An authentication number function that generates eight random characters was implemented.
i inputted username, and mail. because i want to write searching password html and request it at view with Ajax.
When I enter my username and email, I want the authentication number to be sent to the email. At the same time, the code created in ajax should show the authentication number window.
but, it happened nothing.
what should i do...?
help me!
error is Uncaught SyntaxError: Unexpected token '<' WHAT'S THAT..?
First of all, I corrected the white page. I missed it. '>'
#html
{% load static %}
<!DOCTYPE html>
<html lang="KO">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="{% static 'users/css/recovery_pw.css' %}" rel="stylesheet">
<link href="{% static 'users/css/default.css' %}" rel="stylesheet">
<script
src="https://kit.fontawesome.com/96379a54a1.js"
crossorigin="anonymous"
></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'users/js/recovery_pw.js' %}" </script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
{% block content %}
<form method="get" enctype="multipart/form-data">
<div class="container">
<div class="inner-box">
<div class="title">
<h1>비밀번호 찾기</h1>
</div>
<div class="input-box">
<div class="id">
<input type="email" placeholder="등록하신 메일로 인증번호가 발송됩니다." name="email" maxlenth="20" autocomplete="off" value="{{ form.email.value|default_if_none:'' }}" required />
</div>
<div class="password">
<input type="username" placeholder="아이디를 입력하세요" name="username" maxlength="20" value="{{ form.username.value|default_if_none:'' }}" required />
</div>
</div>
<div class="btn">
<div class="btn-white" id="btn_white"><button type="submit">임시 비밀번호 발송</button></div>
</div>
<div class="loading-box">
<div id="loading"></div>
</div>
</div>
</form>
{% endblock %}
</body>
</html>
#users/js/recovery_pw.js
$(document).ready(function () {
$('#find_pw').click(function () {
$('#loading').replaceWith('<div id="loading_end" class="loading"></div>')
// 걍 임의로 만든것 같음
var name = $("#pw_form_name").val();
var email = $("#pw_form_email").val();
$.ajax({
type: "POST",
url: "/users/recovery/pw/find/",
dataType: "json",
data: {
'name': name,
'email': email,
'csrfmiddlewaretoken': '{{csrf_token}}',
},
success: function (response) {
// loading_end 이걸 지움
$('#loading_end').remove()
alert('회원님의 이메일로 인증코드를 발송하였습니다.');
// 나는 이메일전송버튼이지
$('#btn_white').remove()
$('#result_pw').replaceWith(
'<hr><div class="row justify-content-md-center"><form class="form-inline" style="margin-bottom:-15px; margin-top:-10px;"><div class="md-form md-outline"><label for="input_auth_num">인증번호 입력 (<span id="timeset"></span>)</label><input type="text" id="input_auth_num" class="form-control mx-sm-2" autofocus/></div></form>' +
'<button type="submit" name="auth_confirm" id="id_auth_confirm" class="btn btn-red" style="opacity: 90%; height:30%; margin-top:10px; font-size: 12px;"><i class="fas fa-check"></i> 인증확인</button></div><hr>'
)
function countdown(elementName, minutes, seconds) {
var elementName, endTime, hours, mins, msLeft, time;
function twoDigits(n) {
return (n <= 9 ? "0" + n : n);
}
function updateTimer() {
msLeft = endTime - (+new Date);
if (msLeft < 1000) {
alert("인증시간이 초과되었습니다.");
$("" + elementName).remove();
cert_ok = false;
certificationNum = false;
location.href = "{% url 'recovery_pw' %}"
} else {
time = new Date(msLeft);
hours = time.getUTCHours();
mins = time.getUTCMinutes();
$("" + elementName).html((hours ? hours + ':' + twoDigits(mins) : twoDigits(mins))
+ ':' + twoDigits(time.getUTCSeconds()));
setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
}
}
endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
updateTimer();
}
countdown("#timeset", 5, 0);
var user = response.result
$(document).ready(function () {
$('#id_auth_confirm').click(function () {
var input_auth_num = $("#input_auth_num").val();
$.ajax({
type: "POST",
url: "/users/recovery/pw/auth/",
dataType: "json",
data: {
'input_auth_num': input_auth_num,
'csrfmiddlewaretoken': '{{csrf_token}}',
},
success: function (response) {
location.href = "{% url 'recovery_pw_reset' %}";
},
error: function () {
if ($('#input_auth_num').val() == "") {
alert('회원님의 이메일로 전송된 인증번호를 입력해주세요.');
} else {
alert('인증번호가 일치하지 않습니다.');
}
},
});
})
})
},
error: function () {
$('#loading_end').remove()
if (username == "" || email == "") {
alert('이름, 이메일을 모두 입력해주세요.');
} else {
alert('입력하신 정보가 일치하지 않거나 존재하지 않습니다.');
}
},
});
})
});
#views.py
class RecoveryPwView(View):
template_name = 'users/recovery_pw.html'
recovery_pw = RecoveryPwForm
def get(self, request):
if request.method=='GET':
form = self.recovery_pw(None)
return render(request, self.template_name, { 'form':form, })
def ajax_find_pw_view(request):
username = request.POST.get('username')
email = request.POST.get('email')
target_user = User.objects.get(username=username, email=email)
if target_user:
auth_num = email_auth_num()
target_user.auth = auth_num
target_user.save()
send_mail(
'this is email verify',
['email'],
html=render_to_string('users/recovery_email.html', {
'auth_num': auth_num,
}),
)
return HttpResponse(json.dumps({"result": target_user.username}, cls=DjangoJSONEncoder), content_type = "application/json")
#urls.py
path('recovery/pw/', RecoveryPwView.as_view(), name='recovery_pw'),
path('recovery/pw/find/', views.ajax_find_pw_view, name='ajax_pw'),
path('recovery/pw/auth/', views.auth_confirm_view, name='recovery_auth'),
path('recovery/pw/reset/', views.auth_pw_reset_view, name='recovery_pw_reset'),
form
class RecoveryPwForm(forms.Form):
username = forms.CharField(label='id')
email = forms.EmailField(label='email')
class Meta:
fields = ['username', 'email']
class CustomSetPasswordForm(forms.Form):
new_password = forms.CharField(
max_length=16,
min_length=6,
label=_('새 비밀번호')
)
confirm_password = forms.CharField(
max_length=16,
min_length=6,
label=_('새 비밀번호 확인')
)
since you are using the get method into the View model, you can use it directly without checking by method and that is what that function does for ease
Note:-
now you handle the request method by get method which you can't use csrf_token into your form
now the problem is that, you are trying to use get method to send data then, you want to get this data in ajax by Post method which you won't receive any data of course in addition to, that you are trying to execute the separate function in the view which cause a problem where the function will never execute because the form doesn't know where should it send the data in after the request is created.
so, now you can remove the additional function you use and try to use and include what you want in the one view to prevent the confusion so, follow the solution like so:
class RecoveryPwView(View):
template_name = 'users/recovery_pw.html'
recovery_pw = RecoveryPwForm
def get(self, request):
form = self.recovery_pw(None)
return render(request, self.template_name, { 'form':form})
def post(self, request):
form = self.recovery_pw(request.POST)
if form.is_valid():
username = form.cleaned_data.get('username')
email = form.cleaned_data.get('email')
target_user = User.objects.get(username=username, email=email)
# do send email here
# return the render that you want to finish by post method here
html
<form method="post">
{% csrf_token %}
<div class="container">
<div class="inner-box">
<div class="title">
<h1>비밀번호 찾기</h1>
</div>
<div class="input-box">
{% comment %} <div class="id">
<input type="email" placeholder="등록하신 메일로 인증번호가 발송됩니다." name="email" maxlenth="20" autocomplete="off" value="{{ form.email.value|default_if_none:'' }}" required />
</div>
<div class="username">
<input type="username" placeholder="아이디를 입력하세요" name="username" maxlength="20" value="{{ form.username.value|default_if_none:'' }}" required />
</div> {% endcomment %}
{% for field in form %}
<label>{{ field.label }}</label>
<div>{{ field }}</div>
{% endfor %}
</div>
<div class="btn">
<div class="btn-white" id="btn_white"><button type="submit">임시 비밀번호 발송</button></div>
</div>
<div class="loading-box">
<div id="loading"></div>
</div>
</div>
</form>
Now this solution is not completed, because I'm not sure from understanding exactly what you want to do but at least you can see that there's something new happen for your problem to find the min problem, the issue now will come from Ajax just let me know what you are facing after that
Related
I Am trying To Send Post request to The Django using Axios But it Is Not Working
instead it sending get request after the submit button is pressed.
I don't know why this happening I Hvae configured Everything corretelty but it is not working
Any Has Any solution to this then please help me
My Html Code Is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Out</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js" integrity="sha512-0qU9M9jfqPw6FKkPafM3gy2CBAvUWnYVOfNPDYKVuRTel1PrciTj+a9P3loJB+j0QmN2Y0JYQmkBBS8W+mbezg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{% load static %}
</head>
<body>
<div align = "center">
<form action="" name = "out" id ="out" >
{% csrf_token %}
<table>
<th>Name</th>
<th>Stock_out</th>
<tr>
<td><input type="text" id="name" name="name"></td>
<td><input type="text" id="stock_out" name="stock_out"></td>
</tr>
<tr >
<td><span id ="name_er"></span></td>
<td><span id ="stock_err"></span></td>
</tr>
</table>
<input type="button" value="Submit" form = "out" onclick="submit()">
</form>
</div>
<script src="{% static 'out.js/'%}"></script>
</body>
</html>
Here Is My Js Script
function submit(){
let nam = document.getElementById('name').value;
let out = document.getElementById('stock_out').values
if(nam=="" | nam==null){
document.getElementById('nam-er').innerHTML="Name Insert please"
return false
}else{
let form = document.getElementById('out');
var data = new FormData(form);
data.append('name', document.getElementById('name').value);
data.append('stock_out', document.getElementById('stock_out').value);
data.append("csrfmiddelwaretoken",'{{csrf_token}}');
// form.reset();
axios.post('add/product_out',data).then(function(resp){
window.location.href = "add/success";
console.log(resp);
})
.catch(function (error) {
console.log(error);
})
}
}
Here Is My Django Views
def product_out(request):
if request.method =='POST':
name = request.POST.get('name')
stock = request.POST.get('stock_out')
Stock_Out.objects.create(
name=name,
stock_out=stock
)
resp = {
"status":'success'
}
return JsonResponse(resp)
urls.py
from django.urls import path
from add import views
urlpatterns =[
path('add',views.add, name='add'),
path('success',views.success, name='success'),
path('stock_out',views.stock_out, name = 'stock_out'),
path('product_out',views.product_out, name = 'product_out')
]
I Want Send The to The Server from input field Which is Shown on the picture that come from http response from the browser(https://i.stack.imgur.com/3FrMS.png)
I think the issue is that the browser's default submit is triggering making it skip all your javascript part. Try preventing it with preventDefault():
Pass the event to your js (note the e in the parenthesis)
<input type="button" value="Submit" form = "out" onclick="submit(e)">
Prevent the default behaviour:
function submit(e){
e.preventDefault()
// ..the rest of your script here
}
Alternatively, you could change the submit button from being a <input type="submit" /> to a <button type="button">Submit</button>
I have a question, what domain url I should include in the code below to make payments possible in production environment. When I include link to the development website it works on development server (and does not work on the production server), but when I provide the website address related to the production server it doesn't work. What address local/production I should include to make it work?
#csrf_exempt
def create_checkout_session(request):
if request.method == 'GET':
domain_url = ''
stripe.api_key = STRIPE_SECRET_KEY
try:
checkout_session = stripe.checkout.Session.create(
client_reference_id=request.user.id if
request.user.is_authenti$
success_url=domain_url + '/success?session_id=
{CHECKOUT_SESSION$
cancel_url=domain_url + '/cancel/',
payment_method_types=['card'],
mode='subscription',
line_items=[
{
'price': STRIPE_PRICE_ID,
'quantity': 1,
}
]
)
return JsonResponse({'sessionId': checkout_session['id']})
except Exception as e:
return JsonResponse({'error': str(e)})
Template with the Subscribe button:
`{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Django + Stripe Subscriptions</title>
<script src="https://js.stripe.com/v3/"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
<script src="{% static 'static/main.js' %}"></script>
</head>
<body>
<div class="container mt-5">
{% if subscription.status == "active" %}
<h4>Your subscription:</h4>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">{{ product.name }}</h5>
<p class="card-text">
{{ product.description }}
</p>
</div>
</div>
{% else %}
<button type="submit" class="btn btn-primary"
id="submitBtn">Subscribe</button>
{% endif %}
</div>
</body>
</html>
...
console.log("Sanity check!");
// Get Stripe publishable key
fetch("/config/")
.then((result) => { return result.json(); })
.then((data) => {
// Initialize Stripe.js
const stripe = Stripe(data.publicKey);
// Event handler
let submitBtn = document.querySelector("#submitBtn");
if (submitBtn !== null) {
submitBtn.addEventListener("click", () => {
// Get Checkout Session ID
fetch("/create-checkout-session/")
.then((result) => { return result.json(); })
.then((data) => {
console.log(data);
// Redirect to Stripe Checkout
return stripe.redirectToCheckout({sessionId: data.sessionId})
})
.then((res) => {
console.log(res);
});
});
}
});
View stripe_config:
#csrf_exempt
def stripe_config(request):
if request.method == 'GET':
stripe_config = {'publicKey': STRIPE_PUBLISHABLE_KEY}
return JsonResponse(stripe_config, safe=False)
This is up to you -- you can include any domain you like in the success and cancel URL. This is where you customer will be redirected to whether they complete (or bail out of) a Checkout session.
If you can provide more details about this remark, then I might be able to offer more specific guidance:
when I provide the website address related to the production server it doesn't work
What doesn't work?
i have a django project that include a form where user insert data and save it into database using django function and ajax call.
without using the ModelForm in django.
now i want to allow the user to update the form that he choose and once the user choose the form the fields must be displaying the existing data.
until now this was the create process.
i know that the update process will need the id of the object in order to be able to update the selected record.
the error :
'suspect' object is not iterable Request Method: GET Request
URL: http://127.0.0.1:8000/blog/update/23/ Django Version: 2.1.3
Exception Type: TypeError Exception Value: 'suspect' object is not
iterable Exception Location: C:\Users\LT
GM\AppData\Local\Programs\Python\Python37\lib\site-packages\django\template\defaulttags.py
in render, line 165 Python Executable: C:\Users\LT
GM\AppData\Local\Programs\Python\Python37\python.exe
urls.py
path('update/<int:pk>/',update,name = 'update'),
update.html
{% extends "base.html" %}
{% load static %}
{% block body %}
<head>
<link rel="stylesheet" type="text/css" href="{% static '/css/linesAnimation.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/input-lineBorderBlue.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/dropDown.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/home.css' %}">
<link rel="stylesheet" type="text/css" href="{% static '/css/meta-Input.css' %}">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="{% static '/js/jquery-3.1.1.min.js'%}"></script>
<title>Welcome</title>
</head>
<body>
<div class="lines">
<div class="line"></div><div class="line"></div>
<div class="line"></div><div class="line"></div>
<div class="line"></div><div class="line"></div><div class="line"></div>
</div>
{% for suspect in instance %}
<form enctype="multipart/form-data">
<div id='left-column-Input' class="formInput" include="select()">
<div class="forminputs">
<input type="text" id="fname" name="fname" autocomplete="off" required />
<label for="fname" class="label-name">
<span class="content-name" name="fname">{{suspect.suspect_name}}</span>
</label>
</div>
<div class="forminputs">
<input type="text" id="lname" name="lname" autocomplete="off" required />
<label for="lname" class="label-name">
<span class="content-name" name="lname">{{suspect.suspect_last_name}}</span>
</label></div>
<div class="forminputs">
<input type="text" id="fatherName" name="fatherName" autocomplete="off" required />
<label for="fatherName" class="label-name">
<span class="content-name" name="fatherName">{{suspect.suspect_father_name}}</span>
</label></div>
<div class="forminputs">
<input type="text" id="motherName" name="motherName" autocomplete="off" required />
<label for="motherName" class="label-name">
<span class="content-name" name="motherName">{{suspect.suspect_mother_name}}</span>
</label></div>
<div class="formSelect">
<select id="gender" name="gender" required>
<option value="">{{suspect.gender}}</option>
<option value="1">male</option>
<option value="2">female</option>
</select></div>
<div>
<textarea id="content" name="textarea" class="textArea" placeholder="content">{{suspect.content}} </textarea>
</div>
<div class="home-Button">
<button id="edit" name="edit" type="submit">Edit</button>
<button id="clear" name="clear" type="submit">Clear</button>
</div>
</div>
{% endfor %}
<script type="text/javascript">
$(document).ready(function(){
$("#edit").on('click',function(event){
event.preventDefault()
fName=$('#fname').val()
lName = $('#lname').val()
fatherName = $('#fatherName').val()
motherName = $('#motherName').val()
gender = $('#gender').val()
content=$('#content').val()
$.ajax({
url:'/blog/update',
method:'POST',
data: {
FName: fName,
LName: lName,
FatherName: fatherName,
MotherName: motherName,
Gender: gender,
content:content,
// data:data
},
headers:{
'X-CSRFToken':'{{csrf_token}}'
}
}).done(function(msg){
location.href='/blog/list'
}).fail(function(err){
alert(err)
})
})
})
</script>
</form>
</body>
{% endblock %}
views.py
def update(request,pk):
#deny anonymouse user to enter the detail page
if not request.user.is_authenticated:
return redirect("login")
else:
suspect = get_object_or_404(suspect, pk=pk)
if request.method =="POST":
suspect = suspect()
suspect.suspect_name = request.POST['FName']
suspect.suspect_last_name = request.POST['LName']
suspect.suspect_father_name = request.POST['FatherName']
suspect.suspect_mother_name = request.POST['MotherName']
suspect.gender = request.POST['Gender']
suspect.content = request.POST['content']
print(suspect.suspect_name)
suspect.save()
context = {
"title":member.member_name,
"instance":member,
}
return render(request,'blog/update.html',context)
i will appreciate any help
I will give you a simple example that you can extend for your case.
In the template where the user have a link to update his profile :
Update Profile
in your urls.py
path('update_profile/', views.ProfileUpdate, name='Profile-Update')
in views.py
def ProfileUpdate(request):
current_user = request.user
if request.method == 'POST':
get_username = request.POST.get('username', '').strip()
suspect.objects.filter(pk=current_user.pk).update(username=get_username)
return HttpResponse('Profile Updated')
else:
return render(request, 'prorile_update_form.html', {'current_user': current_user})
in prorile_update_form.html :
<form class="update_profile">
{{ csrf_token }}
<input type="text" name="username" value="{{ current_user.username }}">
<button class="submit_update">Save changes</button>
</form>
<!-- So the current user username will be displayed on the input as a value -->
<script type="text/javascript">
$('.submit_update').on('click', function(){
$.ajax({
url: '/update_profile/',
method : 'POST',
data: $('.update_profile').serialize(),
beforeSend: function() {
// things to do before submit
},
success: function(response) {
alert(response)
}
});
return false;
});
</script>
If the user have a different model that he can update so you may want to pass the id of the form as a variable in the url like this :
path('update_profile/<int:pk>', views.ProfileUpdate, name='Profile-Update')
And you interpret the variable on your view like this :
def ProfileUpdate(request, pk):
you can use the pk to fetch the required model and than make all the required updates based on the form that you will provide.
I am very new to JS/Ajax and a relative novice to Django. I am testing to see how I can get information back and forth from an Ajax call to my view, and back to Ajax to replace a header string as a simple test.
I can receive information back to my view (h1, which is "AJAX TEST"). What I can't seem to get is the h2text to change to "HEADER CHANGED".
Any help is appreciated as I don't know if it's my Django return function or my Ajax function.
Here is my ajax_test.html:
<div class="content">
<div class="center">
<h1 id="h1">AJAX TEST</h1>
<div>
<button id="btn">PRESS ME</button>
</div>
</div>
<div id="update_div">
{% include "ProdPlat/ajax_test_div.html" %}
</div>
</div>
<script type="text/javascript" src="{% static 'ProdPlat\js\ajax_test.js' %}"></script>
{% endblock %}
My ajax_test_div.html (which I'm trying to refresh):
<div class="content">
<div class="center">
<h2 id="h2">{{h2text.h2text}}</h2>
</div>
</div>
My views_test.py:
def test_ajax(request):
h2text = {'h2text': "INITIAL HEADER"}
if request.method == 'POST':
logger.debug('POST request')
text = request.POST.get('text')
logger.debug('text = {}'.format(text))
h2text = "HEADER CHANGED"
dict = {
'h2text': h2text,
}
# return JsonResponse(dict)
# return render(request, 'ProdPlat/ajax_test_div.html', {'h2text': h2text})
return render_to_response('ProdPlat/ajax_test_div.html', dict)
return render(request, 'ProdPlat/ajax_test.html', {'h2text': h2text})
And finally my Ajax call:
$(document).on('click', 'button', function(){
var csrftoken = getCookie('csrftoken');
console.log('Button Clicked!');
var text = $('h1').text()
console.log('h1 text = ' + text);
$.ajax({
type : 'POST',
url : "/ProdPlat/Ajax_Test/",
dataType: 'json',
data: {'text' : text,
'csrfmiddlewaretoken': csrftoken,
},
success: function(data) {
console.log('data = ' + data);
console.log('data.h2text = ' + data.h2text);
$('#update_div').load(' #update_div')
console.log('Success!');
},
failure: function(data) {
console.log('Failed!');
console.log('data = ' + data);
},
})
})
I am new to Django. I am trying to create a website with two input textboxes. When the submit button clicked, I need to update the results from django view to the same template without reloading the webpage.
Here is my code so far:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<H1>Welcome to Test</H1>
<div class="input-group" >
Input Text:<br>
<textarea class="form-control" rows="20" cols="70" name="InputText"
placeholder="Enter your Input Text here" form="myForm">
</textarea>
<span class="input-group-addon"><br></span>
Input TextFSM Template:<br>
<textarea class="form-control" rows="20" cols="70" name="InputTemplate"
placeholder="Enter your template here" form="myForm">
</textarea>
<form action="" method="post" id="myForm">
{% csrf_token %}
<input type="submit" value="Submit">
</form>
</div>
<div id="resultid">
<p>Result:</p>
{{result}}
</div>
</body>
</html>
views.py
class HomePageView(TemplateView):
template_name = "index.html"
def get(self, request, **kwargs):
form = ParserForm()
return render(request, self.template_name, {"form": form})
def post(self, request, **kwargs):
form = ParserForm(request.POST)
if form.is_valid():
inputtext = form['InputText'].value()
template = form['InputTemplate'].value()
# Process the data and get the result
print(result)
return render(request, self.template_name, {'result': result})
How to pass the result to index.html from view but the text entered in the textboxes should be persistent.
There is no direct way to update result in django templates or django views without reloading the page. In addition, once page in rendered you need second request to update that page. You could use jquery ajax to do fetch data from server without reloading page.
Ajax is asynchronous javascript extension which is use to send request with out reloading page. This would help you to do exactly that you want.
You could get more help from here
See following example for an instance.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<body>
<H1>Welcome to Test</H1>
<div class="input-group" >
Input Text:<br>
<textarea class="form-control" rows="20" cols="70" name="InputText"
placeholder="Enter your Input Text here" form="myForm">
</textarea>
<span class="input-group-addon"><br></span>
Input TextFSM Template:<br>
<textarea class="form-control" rows="20" cols="70" name="InputTemplate"
placeholder="Enter your template here" form="myForm">
</textarea>
<form id="my-form" action="" method="post" id="myForm">
{% csrf_token %}
<input type="submit" value="Submit">
</form>
</div>
<div id="resultid">
<p>Result:</p>
{{result}}
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
function processForm( e ){
$.ajax({
url: '/url-to-call/', //replace this with url that you want to hit without reloading the page
dataType: 'text',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: $(this).serialize(),
success: function( data, textStatus, jQxhr ){
// manipulate stuff or action
},
error: function( jqXhr, textStatus, errorThrown ){
// This is executed when some error occures
}
});
e.preventDefault();
}
$('#my-form').submit( processForm );
})(jQuery);</body>
</html>