Jquery Multiple Forms Submit

Jquery submit multiple forms in a page

I would suggest putting a class on every input button you wish to submit like this.

For example you could have some forms like this:

<form id="form1">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>
<form id="form2">
  <!--Form elements-->
  <input class="submitButton" type="button" value="submit" />
</form>

You could then use jQuery to submit them like this:

$(".submitButton").click(function() {

  //Select the parent form and submit
  $(this).parent("form").submit();

});

Jquery - Submit all forms by one button

Form submission is a synchronous action, so when you submit a form and then immediately submit a different form in your page, the first form's submission is canceled.

What you can do instead is make sure the forms are submitted asynchronous (using ajax):

$(function() {
    $("#allsubmit").click(function(){
        $('.allforms').each(function(){
            valuesToSend = $(this).serialize();
            $.ajax($(this).attr('action'),
                {
                method: $(this).attr('method'),
                data: valuesToSend
                }
            )
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="allforms" method="POST" action="">
  <input type="hidden" name="_method" value="PATCH1">
  <input type="submit" />
</form>

<br />
<form class="allforms" method="POST" action="">
  <input type="hidden" name="_method" value="PATCH2">
  <input type="submit" />
</form>

<br />
<form class="allforms" method="POST" action="">
  <input type="hidden" name="_method" value="PATCH3">
  <input type="submit" />
</form>

<br />
<button id="allsubmit" class="btn btn-info">Continue</button>

ajax form submission with jquery multiple forms

I have modified some things, having in mind mainly: 'Id attributes must be unique in the document'

(Even, If there are not other references in the code to the form elements by id then the id attribute can be removed)
So I have renamed ids as they have an unique value, then I fetch the click event for catch any input submit

NOTE: I have accessed to the other elements from the parent (its form) which contains the last clicked element because I'm not sure if it is the entire HTML you have.

campers.php

<form id="retro1457806069">
<input type="hidden" id="class1" name="classa" value="retro">
<input type="hidden" id="type1" name="type" value="1">
<input type="submit" id="submit1" value="Rent This Camper"></form>

<form id="two1457806069">
<input type="hidden" id="class2" name="classa" value="classtwo">
<input type="hidden" id="type2" name="type" value="1">
<input type="submit" id="submit2" value="Rent This Camper"></form>

<form id="three1457806069">
<input type="hidden" id="class3" name="classa" value="classthree">
<input type="hidden" id="type3" name="type" value="1">
<input type="submit" id="submit3" value="Rent This Camper"></form>

script.js

$(document).ready(function() {
  $("input[type=submit]").click(function(e) {
    // **Accesing by proximty of the last clicked element, and by its name.
    e.preventDefault();
    var classa = $(this).parent('form').find('input[name="classa"]').val();
    var type = $(this).parent('form').find('input[name="type"]').val();
    // Returns successful data submission message when the entered information is stored in database.
    var dataString = 'class=' + classa + '&type=' + type;
    if (classa == '' || type == '') {
      alert("Please Fill All Fields");
    } else {
      // AJAX Code To Submit Form.
      $.ajax({
        type: "POST",
        url: "campersub.php",
        data: dataString,
        cache: false,
        success: function(result) {
          window.location.assign("gear.php")

        }
      });
    }
    return false;
  });
});

I think it must run with these changes...

How to submit a specific form if multiple forms are present in one page using jquery

you would say

<input type="submit" name="btn1" id="btn1" value="Submit"/>

 $("#btn1").click(function(){  
  $("#frm1").submit();
}

and

<input type="submit" name="btn2" id="btn2" value="Submit"/>

 $("#btn2").click(function(){  
  $("#frm1").submit();
}

submit two forms with one submit button jQuery

I don't think you can do two regular post requests from a single html page, because making the post involves leaving the page and following the redirect response.

If you're submitting the forms via ajax, why not just make a single ajax button and grab the needed parameters to stick in the request? IE:

$.ajax({
  type: 'POST',
  dataType: 'JSON',
  data: {param1: $('input#param1').val(), param2: $('input#param2').val()},
  url: 'url to post to',
  success: (your success callback function goes here)
})

to submit a form among multiple forms using jquery-ajax

You need to reference the form with this when you serialize it...

$(function () {
    $('form').on('submit', function (e) {
        $.ajax({
            type: 'post',
            url: 'addfr.jsp',
            data: $(this).serialize(),
            success: function () {
                location.reload();
            }
        });
        e.preventDefault();
    });
});

How to handle multiple forms on same page

Looking at the source of the provided URL you have a jQuery click handler for each form:

jQuery('input[type=submit]')

This approach could result in more than one binding for each form submit button, depending on how the code is structured.

The solution is to have only one click handler declared inside a $( document ).ready(...).
The button and function below have been modified to work on this scenario (not tested):

<input type='submit' name='".$post->ID."' value='Licitar' class='bidvalue'>

The function below declared only once, outside any loop, and generally in the <head></head> section of the document.

$(document).ready(function()
{
    jQuery('.bidvalue').click(function(e) {
        e.preventDefault();
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: 'action=newbid&id='+e.target.name,
            success: function(msg){
                jQuery('#vehicle-value-box'+e.target.name).html(msg+',00€');
            }
    });
});

Submit multiple forms not working

It is not possible to submit multiple forms simultaneously. This is logical, since the default behavior when you submit a form is that the server's response is loaded as a new page.

Instead, I would recommend that you either change your HTML so that all of the values you need to submit are inside of a single form, or create an object that contains the values you want to submit, and send them to your server using AJAX (http://api.jquery.com/jquery.ajax/) instead.

---

Related Topics