How to submit multiple forms in single submit

Question

I have the following form created in my HTML, this will be submitted to "url 'submitrecord'". This will work fine for single entry per HTML. How can I add multiple entries of this type and submit at once.

Code:

<form method='POST' action="{% url 'submitrecord' %}">
      <div class="row">
             <div class = "col-md-1 form-group">
                    <input type="text" class="form-control" name="EntryNo"  placeholder="EntryNo"/>
            </div>
            <div class = "col-md-2 form-group">
                    <input type="text" class="form-control" name="MedicineName" placeholder="MedicineName"/>
            </div>
                    <button type="submit" class="btn btn-default">Done</button>
    </div>       
</form>

I'd probably use AJAX to POST one form, and onSuccess post the next. If you have to do it on one server roundtrip, then I'd use jquery .serialize() or json_encode each form and then send as an array to be decoded server-side — Jason Fetterly, Jul 03 '16 at 17:47
HI @json im new to web development, an example will give me more insight. — Datta, Jul 03 '16 at 17:58
You can submit as many forms as you like. To do so in a single POST request you must have all forms to be submitted rendered within the `
` tags. When dealing with forms for multiple model instances, use formsets as suggested above. One last tip; supply the `prefix` argument when instantiating forms to avoid the pitfall of having fields from multiple forms with the same name. WIth all this in place, you can process as many forms as you like in a single request/response cycle. — Ian Price, Jul 03 '16 at 17:59
@Json, i want to solve this in the browser side, so AJAX solutions looks more convincing to me. — Datta, Jul 03 '16 at 18:02
@Datta This is likely the answers you're looking for http://stackoverflow.com/questions/29758558/inlineformset-factory-create-new-objects-and-edit-objects-after-created — KhoPhi, Jul 03 '16 at 18:57
Check this for an AJAX solution http://stackoverflow.com/questions/7998050/submitting-multiple-forms-with-ajax — Jason Fetterly, Jul 03 '16 at 18:59
Ajax is completely unnecessary here. As Ian says, send all the forms at the same time inside the same `form` tag. — Daniel Roseman, Jul 03 '16 at 19:40

score 0 · Answer 1 · answered Jul 03 '16 at 19:48

I found this answer but still it isnot sending the request to my URL.

<script>
$(document).ready(function(){
 var called = 0;
ajax_recaller = function(forms){
$.ajax({
type: "POST",
data: forms[called].serialize(),                             
url: forms[called].attr('action'),                        
success: function(data) {
called++;                                                                        
 if(called < forms.length) {
ajax_recaller(forms);                                        
} else {
called=0;                                                                    // set called value to 0 again
alert('All forms has been submitted!');
}

}
});

}


$(document).on('click','.submitforms',function(){
var x=0;

$('.ajax_form').each(function(){
forms[x] = $(this);
x++;
});

ajax_recaller(forms);
});

});
</script>

How to submit multiple forms in single submit

1 Answers1