Question posted in
You can find the official documentation here.

Submit multiple HTML Forms with same name via AJAX – Jquery ajax

How can I submit multiple forms with the same name? Please see my code below I’m unable to figure it out. I’m using PHP if I use dynamic PHP variable in the form name, then how can ajax will know that it was submitted. Any help would be highly appreciated.

<div>

<form method="post" id="formpressed" enctype="multipart/form-data">
<input type="text" name="question" id="question">
<input type="text" name="question2" id="question2">

<button class="btn-primary btn modalsubmit" name="save" id="save">Submit</button>

</form>
</div>


<div>
<form method="post" id="formpressed"  enctype="multipart/form-data">
<input type="text" name="question" id="question">
<input type="text" name="question2" id="question2">

<button class="btn-primary btn modalsubmit" name="save" id="save">Submit</button>

</form>


<!-- FORM 3 -->
<!-- FORM 4 -->
<!-- FORM n -->


</div>

<script type="text/javascript">
     $('#formpressed').on('submit', function(event){
        event.preventDefault();
        btnSubmit = $('.modalsubmit');
        
            $.ajax({
                url:'post.php',
                method:"POST",
                data: new FormData(this),
                contentType:false,
                cache:false,
                processData:false,
                beforeSend:function(){  
                          btnSubmit.prop('disabled', true);
                    },
                success:function(data)
                {
                    alert(data);
                    $("#formpressed")[0].reset();
                }
            });
           });   
</script>
Tags:

2

Answers


  1. 0

    In HTML id is an abbrevation for identity, and should be unique. To share an name between forms use a class name, like:

    <form method="post" class="formPressed" enctype="multipart/form-data">
 ...
</form>

<form method="post" class="formPressed" enctype="multipart/form-data">
 ...
</form>

    And in script use $(this).find('.modalsubmit') to find the submit button inside your clicked form, like:

    $('.formPressed').on('submit', function(event){
    event.preventDefault();
    var btnSubmit = $(this).find('.modalsubmit');
    var form = $(this);

    $.ajax({
        url:'post.php',
        method:"POST",
        data: new FormData(this),
        contentType:false,
        cache:false,
        processData:false,
        beforeSend:function(){  
                  btnSubmit.prop('disabled', true);
            },
        success:function(data)
        {
            btnSubmit.prop('disabled', false);
            form[0].reset();
            alert(data)
        }
    });
});
    Login or Signup to reply.
  2. 0

    id must unique all html. so always use unique id for each html element.
    better way is to use by form name or class name

                <div>

            <form method="post" class="formpressed"  name="formpressed" enctype="multipart/form-data">
            <input type="text" name="question" id="question">
            <input type="text" name="question2" id="question2">

            <button class="btn-primary btn modalsubmit" name="save" id="save">Submit</button>

            </form>
            </div>


            <div>
            <form method="post" class="formpressed" name="formpressed"  enctype="multipart/form-data">
            <input type="text" name="question" id="question">
            <input type="text" name="question2" id="question2">

            <button class="btn-primary btn modalsubmit" name="save" id="save">Submit</button>

            </form>

            <!-- FORM 3 -->
            <!-- FORM 4 -->
            <!-- FORM n -->


            </div>

    you can get form using $(this)
    to find the submit button inside form $(this).find(‘.modalsubmit’);
    to get all form to be serialized you can do var formData = $(this).serialize();

               <script type="text/javascript">
                $(document).ready(function() {
                     $(document).on('submit','form[name="formpressed"]', function(event){
              // you can do by class name   
              // $(document).on('submit','.formpressed',function(event){
                    event.preventDefault();
                    var btnSubmit = $(this).find('.modalsubmit');
                    var formData = $(this);
        
                    console.log(btnSubmit,formData);
                        $.ajax({
                            url:'post.php',
                            method:"POST",
                            data: formData.serialize(),
                            beforeSend:function(){  
                                      btnSubmit.prop('disabled', true);
                                },
                            success:function(data)
                            {
                                alert(data);
                formData[0].reset();
                btnSubmit.prop('disabled', false);
                            }
                        });
                       });   
                
                });
           </script>

    $(‘form[name="formpressed"]’).on(‘submit’ work same as $(‘form[name="formpressed"]’).submit( but when you use $(document).on(‘submit’,’form[name="formpressed"]’ then it will also work for the DOM added later.

    I have also added jsfiddle for this check here
    https://jsfiddle.net/px95160o/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search