通过 AJAX 提交多个具有相同名称的 HTML 表单 [重复]

Question

如何提交多个同名表单？请在下面查看我的代码，我无法弄清楚。如果我在表单名称中使用动态 PHP 变量，我正在使用 PHP，那么 ajax 怎么会知道它已提交。任何帮助将不胜感激。

<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>

Answer 1

id 必须是唯一的所有 html。所以总是为每个 html 元素使用唯一的 id。 更好的方法是使用表单名或类名

            <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>

您可以使用 $(this) 获取表单 在表单中找到提交按钮 $(this).find('.modalsubmit'); 要序列化所有表单，您可以执行 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' 与 $('form[name="formpressed"]').submit( 但当您使用 $(document) 时相同。 on('submit','form[name="formpressed"]' 那么它也适用于稍后添加的 DOM。

我还为这个检查添加了 jsfiddle 这里 https://jsfiddle.net/px95160o/

Answer 2

在 HTML 中，id 是身份的缩写，应该是唯一的。要在 forms 之间共享名称，请使用 class 名称，例如：

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

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

并且在脚本中使用$(this).find('.modalsubmit') 在您的clicked form 中找到submit 按钮，例如：

$('.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)
        }
    });
});