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

Posted 2023-05-07

【中文标题】通过 AJAX 提交多个具有相同名称的 HTML 表单 [重复]

【英文标题】：Submit multiple HTML Forms with same name via AJAX [duplicate]

【发布时间】：2020-11-03 09:03:38

【问题描述】：

如何提交多个同名表单？请在下面查看我的代码，我无法弄清楚。如果我在表单名称中使用动态 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>

【问题讨论】：

form id 必须是唯一的 - 对于不同的元素使用相同的 id 不是一个好习惯。

在您的情况下，最好的方法是使用类。正如@AlwaysHelping 所说，这两种形式应该有唯一的ID。即使是表单中的输入也不应该共享 ID。但是，他们可以共享一个班级。而且由于您将使用名称字段来获取数据，因此如果您无法生成唯一的 ID，则始终可以省略 ID。

我认为这也可以通过使用question[]和question2[]以单一形式完成

嗨@Kasalwe，我们如何使用Class提交表单？我只能使用类方法提交第一个表单。

给每个表单一个类，例如 myform。然后在 JQuery 中使用 $('.myform').on('submit', function(event)...

【参考方案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/

【讨论】：

谢谢！！你能告诉我如何重置表格吗？ $(".formPressed")[0].reset();

重置表单可以使用 .reset() 方法。 & 表单元素返回数组，因此需要以这种方式获取第 0 个索引。 formData[0].reset();.我已经更新了我的答案。我还为此添加了 jsfiddle。 jsfiddle.net/px95160o

【参考方案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)
        
    );
);  

【讨论】：

这个解决方案帮助了我！你能告诉我如何重置表格吗？ $(".formPressed")[0].reset();

reset() 方法恢复表单元素的默认值。它不会重置输入中的其他属性，例如禁用。在服务器成功响应后，我更新了重置表单的答案。

我没有看到任何更新的答案。你能再检查一次吗？

亲爱的@steve 现在检查一下，如果三个有问题，请告诉我。快乐编码:)

@HassanMonjezi $('.formPressed').on('submit' 与 $('.formPressed').submit( 但是当你使用 $(document).on('submit' ,'.formPressed' 那么它也适用于稍后添加的 DOM。