After user fill a basic form, the data will be showed in table, dynamically created via jquery.
index.html
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="sourceip">Source IP:<span> *</span></label>
<input type="text" class="form-control" id="sourceip" placeholder="_._._._ , _._._._ , _._._._" value="" >
<span class="error_form" id="sourceip_error_message"></span>
</div>
<div class="col-md-6 mb-3">
<label for="destip">Destination IP:<span> *</span></label>
<input type="text" class="form-control" id="destip" placeholder="_._._._ , _._._._ , _._._._" value="" >
<span class="error_form" id="destip_error_message"></span>
</div>
</div>
<div class="mb-3">
<label for="service">Service:<span> *</span></label>
<div class="input-group">
<input type="text" class="form-control" id="service" placeholder="" >
<span class="error_form" id="service_error_message"></span>
</div>
</div>
<div class="mb-3">
<label for="comment">Comment: </label>
<textarea type="text" class="form-control" id="comment" placeholder="Add comment"> </textarea>
</div>
<hr class="mb-4">
<input type="button" class="btn btn-primary btn-lg btn-block add" value="Add rule">
</form>
<div id="tabulka" class="table col-md-10">
<form method="POST" action="#" enctype="multipart/form-data">
{% csrf_token %}
<!--{{ formset.management_form }}-->
<table >
<thead class="thead-dark">
<th scope="col">Source IP</th>
<th scope="col">Destination IP</th>
<th scope="col">Service</th>
<th scope="col">Comment</th>
<th scope="col" colspan="2">Action</th>
</thead>
<tbody id="tbody">
</tbody>
</table>
<input type="submit" value="insert record">
</form>
</div>
script.js
$(".add").click(function () {
var SourceIP = CheckIPAdresses($("#sourceip").val());
var DestIP = CheckIPAdresses($("#destip").val());
var Service = CheckService($("#service").val());
var Comment = $("#comment").val();
for (sadd in SourceIP ){
for (dadd in DestIP){
for (srv in Service){
var markup = "<tr class='table-row' > <td class='SourceIP'> <input name='sip' type='text' class='sip' readonly value='"+SourceIP[sadd] + "'> </td> <td class='DestIP'> <input type='text' name='dip' class='dip' readonly value='"+DestIP[dadd] + "'></td><td class='Service'> <input type='text' class='port' name='port' readonly value='"+Service[srv] + "'></td><td class='Comment'> <input type='text' class='comm' name='comm' readonly value='"+Comment + "'></td> <td><a class='btn btn-xs delete'><i class='fas fa-trash-alt'></i></a></td><td><a class='btn btn-xs edit'><i class='fas fa-pencil-alt'></i></a></td></tr>";
$("#tbody").append(markup);
$(".table-row").attr('id', function (index) {
return "rec-" + index;
});
} } } });
views.py
def InsertRecord(request):
form=InsertIPForm(request.POST)
if form.is_valid():
form.save()
return redirect('app')
context = {"InsertIPForm": InsertIPForm}
return render(request, "app.html", context)
Now I need send data from this table to database. There is no problem with one record, but when I have multiple record, only last record is saved to database. I use Django and I think that the FORMSET will be the right solution. But I have no idea how to create formset from dynamically created forms.
Could you please help me? Or do you have any other idea how can I do it?
Thank you.
Related
When the edit option is clicked in the project, I want to transfer all the values in the relevant row into the modal, how can I do this?
here table body
<tbody class="list form-check-all">
{% for x in model %}
<tr>
<td class="id">{{x.name}}</td>
<td class="company_name">{{x.phonenumber}}</td>
<td class="leads_score">{{x.note}}</td>
<td class="phone">{{x.status}}</td>
<td class="location">{{x.callname}}</td>
<td class="date">{{x.dataname}}</td>
<td>
<ul class="list-inline hstack gap-2 mb-0">
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
<a class="edit-item-btn" href="#showModal" data-bs-toggle="modal"><i class="ri-phone-line fs-16"></i></a>
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
and here my modal
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
</div>
<form action="">
<div class="modal-body">
<input type="hidden" id="id-field" />
<div class="row g-3">
<div class="col-lg-12">
<div>
<label for="leadname-field" class="form-label">Name</label>
<input type="text" id="leadname-field" class="form-control" placeholder="Enter Name" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Company Name</label>
<input type="email" id="company_name-field" class="form-control" placeholder="Enter company name" required />
</div>
</div>
<!--end col-->
<div class="col-lg-6">
<div>
<label for="leads_score-field" class="form-label">Leads Score</label>
<input type="text" id="leads_score-field" class="form-control" placeholder="Enter lead score" required />
</div>
</div>
<!--end col-->
<div class="col-lg-6">
<div>
<label for="phone-field" class="form-label">Phone</label>
<input type="text" id="phone-field" class="form-control" placeholder="Enter phone no" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="location-field" class="form-label">Location</label>
<input type="text" id="location-field" class="form-control" placeholder="Enter location" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-success" id="add-btn">Kaydet</button>
</div>
</div>
</form>
</div>
</div>
</div>
My codes are like this. When the edit option is clicked from here, I want to inherit the values of the relevant row in the table within the modal. How can I do that?
so basically I would do that this way - when you load modal, the element that triggers it has data-id attribute and you send it over AJAX to the Django view. Then, before the modal's fully open, you change html code of the whole div, prepopulated with single-instance template that you send over using JsonResponse.
Something like that should work:
const loadDetails = (e) => {
let btn = $(e.currentTarget);
const modalAjax = $("#modal-ajax");
$.ajax({
url: btn.attr("data-href"),
type: 'GET',
data: {id: <here_you_put_obj_id_using_data_attr>}
dataType: 'json',
beforeSend: function () {
modalAjax.modal("show");
},
success: function (data) {
modalAjax.find('.modal-content').html(data['html_form']);
}
});
};
I made a customer feedback form with rating stars. But problem is, not getting stored data in database. Where the actual problem occured? What is the relevent solution? I tried many time.
forms.py:
class FeedBackForm(forms.Form):
feedBACK = forms.CharField(widget=forms.Textarea, required=True)
rating = forms.CharField(widget=forms.NumberInput)
models.py:
class ProductREVIEWS(models.Model):
rating = models.IntegerField(blank=True, null=True)
feedBACK = models.TextField(blank=True, null=True)
views.py:
def quick_view(request, quick_view_id):
form = FeedBackForm()
if request.method == "POST" and request.user.is_authenticated:
form = FeedBackForm(request.POST)
if form.is_valid():
ProductREVIEWS.objects.create(
feedBACK=form.cleaned_data.get('feedBACK'),
rating=form.cleaned_data.get('product_rating'),
)
template:
<form action="#!" method="POST" class="needs-validation mt-3" style="font-size: 13px;" novalidate="" autocomplete="off">
{% csrf_token %}
<div class="radio-toolbar d-flex">
<input type="radio" id="one_star" name="product_rating" value="1" checked>
<label for="one_star" class="mx-1">1 <i class="fas fa-star"></i></label>
<input type="radio" id="two_star" name="product_rating" value="2">
<label for="two_star" class="mx-1">2 <i class="fas fa-star"></i></label>
<input type="radio" id="three_star" name="product_rating" value="3">
<label for="three_star" class="mx-1">3 <i class="fas fa-star"></i></label>
<input type="radio" id="four_star" name="product_rating" value="4">
<label for="four_star" class="mx-1">4 <i class="fas fa-star"></i></label>
<input type="radio" id="five_star" name="product_rating" value="5">
<label for="five_star" class="mx-1">5 <i class="fas fa-star"></i></label>
</div>
<div class="mb-3 mt-2">
<textarea id="email" placeholder="Share your experiencs..." rows="10" style="font-size: 13px; text-transform: lowercase;" type="email" class="form-control" name="feedBACK" value="" required></textarea>
</div>
Since, you are not doing anything with FeedBackForm, so you can simply get the names of fields through POST request in view as:
from django.shortcuts import redirect
def quick_view(request, quick_view_id):
if request.method == "POST" and request.user.is_authenticated:
ProductREVIEWS.objects.create(
feedBACK=request.POST.get('feedBACK'),
rating=request.POST.get('product_rating')
)
return redirect('success')
return render(request, 'some_folder_name/index.html')
def success(request):
return render(request, 'some_folder_name/success.html')
Note: Its a good practice to redirect after dealing with POST data.
Template file:
<form method="POST" class="needs-validation mt-3" style="font-size: 13px;" autocomplete="off">
{% csrf_token %}
<div class="radio-toolbar d-flex">
<input type="radio" id="one_star" name="product_rating" value="1" checked>
<label for="one_star" class="mx-1">1 <i class="fas fa-star"></i></label>
<input type="radio" id="two_star" name="product_rating" value="2">
<label for="two_star" class="mx-1">2 <i class="fas fa-star"></i></label>
<input type="radio" id="three_star" name="product_rating" value="3">
<label for="three_star" class="mx-1">3 <i class="fas fa-star"></i></label>
<input type="radio" id="four_star" name="product_rating" value="4">
<label for="four_star" class="mx-1">4 <i class="fas fa-star"></i></label>
<input type="radio" id="five_star" name="product_rating" value="5">
<label for="five_star" class="mx-1">5 <i class="fas fa-star"></i></label>
</div>
<div class="mb-3 mt-2">
<textarea id="email" placeholder="Share your experiencs..." rows="10" style="font-size: 13px; text-transform: lowercase;" type="email" class="form-control" name="feedBACK" value="" required></textarea>
</div>
<input type="submit" value="save">
</form>
urls.py
urlpatterns = [
...
path('success/',views.success,name='success')
]
success.html
<body>
<h2>Form successfully submitted.</h2>
</body>
Your code isn't actually utilising the functionality of Django forms. Firstly, I would suggest using a model form rather than just a normal form - it will automatically do some of the lifting to connect the form with your model.
https://docs.djangoproject.com/en/4.0/topics/forms/modelforms/#modelform
Secondly, you are validating the form using is_valid() but you are then manually creating the object - you can instead using save() to create the model.
I have built multi step form by using vue js. When user type is "business" we have to prompt multi step form in that we have 3 steps They are.
first step form:-
This form contains only one fields Category field. If user enters first form field then user can able to open category specified fields.
second step form:-
This form contains category specified fields. If user entered for example IT in first form in second form it has salary, job type,..etc.
third step form:-
Price package form for business user.
If logged in user type is "Consumer" we need prompt like this multi step form. we have 3 steps again her, Those are.
First step form:- In this we have category field. If user enters category then user clclick on next button we prompt next form.
Second step form:- In this second form it prompts We asks a question like weather he want to continue as consumer or business in this form we have two radio button if user selects consumer we need prompt category specified fields again in third form. else if user selects business we need to prompt signuup form to update user to business in thrid form.
Here, I am not understanding how to reuse category specified fields from second step to third step.
Please, If any one help me to achieve this, Thank you.
** code snippet **
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<form action="">
<fieldset class="postad_fieldset" v-if="step == 1">
×
<div style="width: 100%;position: relative;left: 12px;">
<h1 class="post_adttl">Post Ad</h1>
<p><input class="vue_input" style="width: 93%;" type="text" v-model="category" placeholder="Search your category"
name="category" maxlength="200" id="id_post_type"></p>
<button style="background-color: #01ABAA;border-color: #01ABAA;" #click.prevent="next()" class="btn btn-primary">Next</button>
</div>
</fieldset>
<fieldset class="postad_fieldset" v-if="step == 2">
<div style="width: 100%;position: relative;left: 12px;">
<!--if we enter category 'Real Estate | Single Family Homes' in first screen at category field. If that entered category and this template
is matched then based on that category we are prompting this template -->
{% if user_type == 'business' %}
<template v-if="category == 'Real Estate | Single Family Homes'">
<h1 class="post_adttl">Post Ad</h1>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Bedrooms" name="bedrooms_p" v-model="bedrooms" id="id_post_bedrooms">
<input class="vue_input" type="number" placeholder="Bathrooms" name="bathrooms_p" v-model="bathrooms" id="id_post_bathrooms">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="SQFT" name="Square_ft_p" v-model="Square_ft" maxlength="100" id="id_post_Square_ft">
<input class="vue_input" type="number" placeholder="Lot size" name="lot_size_p" v-model="lot_size" maxlength="50" id="id_post_lot_size">
</p>
<button style="background-color: lightgray;border-color:lightgray;" #click.prevent="prev()" class="btn btn-info">Previous</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" #click.prevent="next()" class="btn btn-primary">Next</button>
</template>
<!-- -->
<template v-else-if="category == 'laptop'">
<h1 class="post_adttl">Post Ad</h1>
<h2> laptop template</h2>
<button style="background-color: lightgray;border-color:lightgray;" #click.prevent="prev()" class="btn btn-info">Previous</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" #click.prevent="next()" class="btn btn-primary">Next</button>
</template>
<template v-else-if="category == 'computer'">
<h1 class="post_adttl">Post Ad</h1>
<h2> computer template</h2>
<button style="background-color: lightgray;" #click.prevent="prev()" class="btn btn-info">Previous</button>
<button style="background-color: #01ABAA;" #click.prevent="next()" class="btn btn-primary">Next</button>
</template>
<template v-else-if="category == 'IT'">
<h1 class="post_adttl">Post Ad</h1>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Title" name="title_it" v-model="title_it" maxlength="200" id="id_post_title_it">
<input class="vue_input" type="text" placeholder="Experience" name="experience_it" v-model="experience" maxlength="200" id="id_post_experience_it">
</p>
<p class="select_p">
<input class="vue_input" type="text" placeholder="Location" name="location_it" v-model="location" maxlength="200" id="id_post_location_it">
<input class="vue_input" type="text" placeholder="Salary" name="salary_it" v-model="salary" maxlength="200" id="id_post_salary_it">
</p>
<button style="background-color: lightgray;" #click.prevent="prev()" class="btn btn-info">Previous</button>
<button style="background-color: #01ABAA;" #click.prevent="next()" class="btn btn-primary">Next</button>
</template>
{% else %}
<template v-if="">
<h1 class="post_adttl">Consumer</h1>
<input class="consumer_radio" type="radio" id="consumer" name="flag" value="Personal Ad"
v-model="picked">
<label style="position: relative;left: 1px;"class="personal_postad">Personal Ad:</label>
<p class="postad_p">Personal ads can be posted one ad per month, which will appear <br>
with "sale by owner
tag"</p><br>
<input style="position: relative;
width: 4%;
top: -37px;"class="business_radio" type="radio" id="business" name="flag" value="business"
v-model="picked">
<label style="position: relative;top: -49px;" class="Business_postad">Business Ad:</label>
<p style="position: relative;left: 0px;top: -47px;" class="postad_p">Do you want to
upgrade to business account to post more <br>ads per month</p>
<button style="background-color: lightgray;border-color:lightgray;"
#click.prevent="prev()" class="btn btn-info">Previous
</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" #click.prevent="next()"
class="btn btn-primary">Next
</button>
</template>
{% endif %}
</div>
</fieldset>
<fieldset class="postad_fieldset" v-if="step == 3">
<div style="width: 100%;position: relative;left: 12px;">
{% if user_type == 'business' %}
<template v-if="">
<h1 class="post_adttl">Package</h1>
<p>
<input style="width: 4%;" type="radio" name="price_Ads_package" class="price_1" value="$4.99 - 12 Ads - Month"><span
class="radio_price1"> $2.99 - 6 Ads - Month</span>
</p>
<p>
<input style="width: 4%;" class="price2" type="radio" name="price_Ads_package" class="price_1" value="$4.99 - 12 Ads - Month"><span
class="radio_price2" style="position: relative;
top: -13px;"> $4.99 - 12 Ads - Month</span>
</p>
<button style="background-color: lightgray;" #click.prevent="prev()" class="btn btn-info">Previous</button>
<button style="background-color: #01ABAA;" #click.prevent="next()" class="btn btn-primary">Next</button>
</template>
{% endif %}
<!-- if user picked Personal Ad from 1st step. -->
<!-- But here already this template is avialabble in first step how to display that template here. -->
<template v-if="picked == 'Personal Ad'">
<h1 class="post_adttl">Post Ad</h1>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Bedrooms" name="bedrooms_p" v-model="bedrooms" id="id_post_bedrooms">
<input class="vue_input" type="number" placeholder="Bathrooms" name="bathrooms_p" v-model="bathrooms" id="id_post_bathrooms">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="SQFT" name="Square_ft_p" v-model="Square_ft" maxlength="100" id="id_post_Square_ft">
<input class="vue_input" type="number" placeholder="Lot size" name="lot_size_p" v-model="lot_size" maxlength="50" id="id_post_lot_size">
</p>
<p class="select_p">
<input class="vue_input" type="number" placeholder="Total rooms" v-model="total_rooms" name="total_rooms_p" id="id_post_total_rooms">
<input class="vue_input" type="number" placeholder="Stories" name="stories_p" v-model="stories" maxlength="200" id="id_post_stories">
</p>
<button style="background-color: lightgray;border-color:lightgray;" #click.prevent="prev()" class="btn btn-info">Previous</button>
<button style="background-color: #01ABAA;border-color:#01ABBAA;" #click.prevent="next()" class="btn btn-primary">Next</button>
</template>
<!-- end if user picked Personal Ad from 1st step. -->
<!-- if user picked business from 2nd step. -->
<template v-if="picked == 'business'">
<h1 style="font-size:25px;margin-top:3px;margin-bottom:10px;">Sign Up</h1>
<p style="font-size:12px;float:left;color:grey;">Please fill in this form to create an account!</p>
<div class="form-group new-signup">
<input id="email_business" name="email" placeholder="Business Email Address"
style="border:1px solid #01ABAA;"
type="email">
<span class="input-icon"><i class="fa fa-envelope fa1"></i></span>
</div>
<div class="form-group">
<input type="password" id='password_consumer' class="InputPassword password_r"
name="password_consumer" placeholder="Password" onkeyup="validate_password()"><br>
<p id="password_result12_invalid" class="error_verify"
style="font-size: 8px;position: relative;top: 9px;"></p>
<span class="input-icon"><i class="fa fa-lock fa1"></i></span>
</div>
<button style="background-color: lightgray;" #click.prevent="prev()" class="btn btn-info">Previous</button>
<button class="login-btn" id="submit_consumer" disabled>
Sign Up
</button>
</template>
</div>
</fieldset>
</form>
</div>
I have created a form in Flask, and want to submit certain values which need to be processed.But the method used is getting defaulted to GET even though I have specified the method as post in my form
These are the the relevant code files:
app.py
#app.route('/test',methods=["GET","POST"])
def test():
print(request.method)
error = None
try:
if request.method == "POST":
first_name = request.form['firstname']
last_name = request.form['lastname']
flash(first_name)
flash(last_name)
return render_template("test.html")
else:
return "Wrong"
except Exception as e:
return str(e)
test.html
<form method="post" class="text-center" style="color: #757575;" action="">
<div class="form-row">
<div class="col">
<!-- First name -->
<div class="md-form">
<input type="text" name="firstname" value="{{request.form.firstname}}" class="form-control">
<label for="materialRegisterFormFirstName">First name</label>
</div>
</div>
<div class="col">
<!-- Last name -->
<div class="md-form">
<input type="text" name="lastname" value="{{request.form.lastname}}" class="form-control">
<label for="materialRegisterFormLastName">Last name</label>
</div>
</div>
</div>
<!-- File Upload -->
<div class="md-form">
<input type="file" id="fileupload" class="form-control">
</div>
<input class="btn btn-info btn-block" type="submit" value="Submit">
</form>
The method is getting defaulted to post and the response "Wrong" on loading 127.0.0.1:5000/test. The method is always GET
<form method="post" class="text-center" style="color: #757575;" action="/test" method="post">
<div class="form-row">
<div class="col">
<!-- First name -->
<div class="md-form">
<input type="text" name="firstname" value="{{request.form.firstname}}" class="form-control">
<label for="materialRegisterFormFirstName">First name</label>
</div>
</div>
<div class="col">
<!-- Last name -->
<div class="md-form">
<input type="text" name="lastname" value="{{request.form.lastname}}" class="form-control">
<label for="materialRegisterFormLastName">Last name</label>
</div>
</div>
</div>
<!-- File Upload -->
<div class="md-form">
<input type="file" id="fileupload" class="form-control">
</div>
<input class="btn btn-info btn-block" type="submit" value="Submit">
</form>
By adding the "route" to the action attribute and defining the method of submission of form, you can perform the desired objective.
I have retrieved data from the database and displayed it in a table. Now click of EDIT button I want to edit the form.i have sucessfully insert and retrived data from the database but i cant understand how to edit and save into database.
viwes.py
def pramod(request):
p1 = request.POST.get('name',' ')
p2 = request.POST.get('address',' ')
p3 = request.POST.get('city',' ')
p4 = request.POST.get('sp',' ')
p5 = request.POST.get('country',' ')
p6 = request.POST.getlist('chk1[]',' ')
p7 = request.POST.get('sex',' ')
books = Publisher(name=p1,address=p2,city=p3,state_province=p4,country=p5,course=p6,Gender=p7)
books.save()
dataset=Publisher.objects.all()
data={
'dataset':dataset,
}
return render(request,'Publisher.html',data)
models.py
class Publisher(models.Model):
name = models.CharField(max_length=30)
address = models.CharField(max_length=50)
city = models.CharField(max_length=60)
state_province = models.CharField(max_length=30)
country = models.CharField(max_length=50)
course = models.CharField(max_length=50)
Gender = models.CharField(max_length=50)
Publisher.html
<div class="col-lg-4" style="margin-top: 100px">
<form action="/pramod/" method="POST">
{% csrf_token %}
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" />
</div>
<div class="form-group">
<label>Address</label>
<input type="text" name="address" class="form-control" />
</div>
<div class="form-group">
<label>city</label>
<input type="text" name="city" class="form-control" />
</div>
<div class="form-group">
<label>state_province</label>
<input type="text" name="sp" class="form-control" />
</div>
<div class="form-group">
<label>country</label>
<input type="text" name="country" class="form-control" />
</div>
<div class="form-group">
<label>Course</label>
<input type="checkbox" name="chk1[]" value="Dot.NET" > Dot.NET
<input type="checkbox" name="chk1[]" value="Python" > Python
<input type="checkbox" name="chk1[]" value="Django" > Django
</div>
<div class="form-group">
<label>Sex</label>
<input type="radio" name="sex" checked="checked" value="Male" >Male
<input type="radio" name="sex" checked="checked" value="Female" >Female
</div>
<button type="submit" class="btn bg-olive btn-block">save</button>
</form>
</div>
<div class="col-lg-8" style="margin-top: 100px">
<table class="table table-striped table-condensed table-bordered ">
<B class="btn-success">Data</B> <thead class="btn-primary">
<tr>
<th>Name</th>
<th>Address</th>
<th>city</th>
<th>country</th>
</tr>
</thead>
<tbody>
{% for p1 in dataset %}
<tr>
<td>{{ p1.name }}</td>
<td >{{ p1.address }}</td>
<td >{{ p1.city }}</td>
<td >{{ p1.country }}</td>
<td>edit</td>
<td><a>Delete</a></td>
</tr>
{% endfor %}
</tbody>
</table>
Looking from your code, it looks like a very raw code where you are trying to do everything yourself.
You can try out either of following, to solve this issue:
A. Class Based views (UpdateView):
In Django, Class Based views have been introduced which are highly preferred over function based views.
So, the functionality you are coding above can easily be Achieved using UpdateView in Django: https://docs.djangoproject.com/en/1.6/ref/class-based-views/generic-editing/#updateview
B. Model Forms in Django:
But, If you don't want to change the current view, then you should try Django ModelForms: https://docs.djangoproject.com/en/1.6/topics/forms/modelforms/
Here is a sample use of Model forms: http://www.pythoncentral.io/using-python-django-modelform-first-django-application/
I would highly recommend you use UpdateView, because it already uses a ModelForm behind the scene