[Answer]-Loading an html page into a tab using ajax using a for loop. bootstrap 3

by

1👍

✅

ajaxtest.html 

     {% load staticfiles %}


 <head>
<script src="{% static 'js/jquery-1.10.2.min.js' %}"></script>
<script>

    $(document).ready(function() {

        $('#ajaxform').submit(function(event) {

            var $form = $(this);
            var serializedData = $form.serialize();

            $.post('/ajaxtest/', serializedData, function(response) {
                alert(response);
                 });

            event.preventDefault();

        });
    });

</script>

{% csrf_token %}

    <fieldset>
        {% for field in form %}
            <label for="{{ field.label }}">{{ field.label }}</label>
            <input id="{{ field.label }}" type="text" name="{{ field.html_name }}" />
        {% endfor %}

        <button type="submit">Submit</button>
    </fieldset>
 <select name="p1">
     {% for i1 in form %}
     <option>{{ i1.Fname }}</option>
     {% endfor %}
 </select>
 <select name="p2">
     {% for i2 in form %}
     <option>{{ i2.Lname }}</option>
     {% endfor %}
 </select>
   <table>
    <thead>
     <tr>
                <th>first Name</th>
                <th>last Name</th>
                <th> Village</th>
                <th>Dist</th>
            </tr>
    </thead>
    <tbody>
       {% for Loksabha1 in form %}

            <tr>
                <td>{{ Loksabha1.Fname }}</td>
                <td>{{ Loksabha1.Lname }}</td>
                <td>{{ Loksabha1.Village }}</td>
                <td>{{ Loksabha1.Dist }}</td>
            </tr>
          {% endfor %}
    </tbody>
</table>

</form>

view.py

def ajax_test(request):

if request.is_ajax() and request.method == 'POST':
    form = AjaxTestForm(request.POST)

    if form.is_valid():
        print (request.POST)
        # I want this to be alerted
        return HttpResponse('Your AJAX form test was successful!')
    else:
        return HttpResponse('Your AJAX form test failed miserably!')
else:
    form = AjaxTestForm()

return render(request, 'ajaxtest.html', {'form':form} )
👤pramod24

Leave a comment