Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72388

How can I refresh only the child page that contains a form in Django environment

$
0
0

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?


Viewing all articles
Browse latest Browse all 72388

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>