1

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>
Improve this question
8
  • form id needs to be unique - Its not a good practice to have same id for different elements. Commented Jul 14, 2020 at 4:51
  • The best way in your case is to use classes. As @AlwaysHelping has said, the two form should have unique IDs. Even the inputs in the form should not share IDs. They can however share a class. And since you will be using the name field to get data, you can always leave out the ID if you cant generate unique ones. Commented Jul 14, 2020 at 4:55
  • I think this can be done in a single form too by using question[] and question2[] Commented Jul 14, 2020 at 5:00
  • Hi @Kasalwe, how can we submit the form using Class? I was only able to submit the first form using the class method. Commented Jul 14, 2020 at 5:01
  • Give each form a class, like myform, for example. Then in JQuery use $('.myform').on('submit', function(event){... Commented Jul 14, 2020 at 5:04

2 Answers 2

Reset to default
1

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks!! could you please also tell how can I reset the form. $(".formPressed")[0].reset();
to reset the form you can use .reset() method. & form elements return array so need to get 0th index in this way. formData[0].reset();.I have updated my answer .I have also added jsfiddle for this. jsfiddle.net/px95160o
1

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)
        }
    });
});
Improve this answer

5 Comments

This Solution helped me! could you please also tell how can I reset the form. $(".formPressed")[0].reset();
reset() method restores a form element's default values. It does not reset other attributes in the input, such as disabled. I updated answer to reset form after success response from server.
I don't see any update to the answer. Could you please check once again?
Dear @steve Check it now, and let me know if three is any problem. happy coding :)
@HassanMonjezi $('.formPressed').on('submit' work same as $('.formPressed').submit( but when you use $(document).on('submit','.formPressed' then it will also work for the DOM added later.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.