I've been working on a Django form. The form is in the poc_add.html site. The index.html side contains the
<div id="output"></div>
that is being filled out with the poc_add.html content. In other words the poc_add.html site is a part of the index.html site.
Here is the code of the form:
<form class="form">
{% csrf_token %}
<fieldset>
<label class="mb-0" for="cmbLocation">Location</label>
<div style="padding-bottom: 15px;" class="row mb-1">
<div class="col-lg-12">
<select class="form-control" id="cmbLocation">
{% for location in locations %}
<option value="{{ location.0 }}">{{ location.1 }}</option>
{% endfor %}
</select>
</div>
</div>
<label class="mb-0" for="cmbCertification">Certification</label>
<div style="padding-bottom: 15px;" class="row mb-1">
<div class="col-lg-12">
<select class="form-control" id="cmbCertification">
<option>Lead Prep</option>
<option>Greeter</option>
<option>Lead Trainer</option>
</select>
</div>
</div>
......
......
<div id="divAddNewPOC" style="padding-bottom: 10px;padding-left: 2px;">
<button class="btn btn-primary custom-btn" id="btnNewPOC" data-dismiss="modal">Save</button>
</div>
</fieldset>
</form>
Here is some JavaScript codes of the poc.js file that is included in the poc_add.html page.
$("#btnNewPOC").click(function(){
var selectedLocationVal = $("#cmbLocation").val();
var selectedCertificationVal = $("#cmbCertification").val();
console.log("Location val: " + selectedLocationVal);
console.log("Current Objective val: " + selectedCurrentObjVal);
console.log("Correct Uniform val: " + selectedCorrectUniformVal);
$.post("poc_form_submit",{'location': selectedLocationVal,
'certification': selectedCertificationVal,
......
......
......
},
function(data) {
.....
.....
.....
}, "html");
});
Here is some part of the urls.py file
urlpatterns = [
path('', views.login, name='login'),
path('index', views.index, name='index'),
....
....
....
path('poc_form_submit', views.poc_form_submit, name='poc_form_submit'),
]
When I click the submit button, it refreshes the index.html site. What I need is to refresh only the poc_add.html page. How can I accomplish that?