使用 jquery-ajax 在多个表单中提交一个表单

Posted 2023-05-09

【中文标题】使用 jquery-ajax 在多个表单中提交一个表单

【英文标题】：to submit a form among multiple forms using jquery-ajax

【发布时间】：2013-10-11 12:13:43

【问题描述】：

我有多个具有相同类名的表单

<form >
  <input type="hidden" value="<%=ids%>" name="idd">
  <input type="hidden" value="<%=email%>" name="cby">
  <input type="text" class="cmd" name="cm" style="width:300px;" placeholder="comment">
  <input type="submit" value="" style="display:none;">
</form>
  <!-- n number of forms are  generated using while loop-->
<form>
  <input type="hidden" value="<%=ids%>" name="idd">
  <input type="hidden" value="<%=email%>" name="cby">
  <input type="text" class="cmd" name="cm" style="width:300px;" placeholder="comment">
  <input type="submit" value="" style="display:none;">
</form>

那么我如何在我尝试使用的这 n 个表单中提交一个表单

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

                  
          );
         e.preventDefault();
     );
  );

但它总是提交 n 形式中的第一种形式。 如何在 n 种形式中提交随机形式。 请任何人帮助我。

【问题讨论】：

同类型问题***.com/questions/16638181/…

【参考方案1】：

序列化时需要用this引用表单...

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

【讨论】：

+1 比我快了半秒，但这似乎是问题所在，每次触发其中一个表单上的提交事件时都会序列化所有表单。

@adeneo 您需要充分润滑才能在此站点上足够快，不是吗！只要他们得到答案:)

$(this).serialize() 在ajax 中可能不起作用，因此您应该为this reference 使用一个变量，然后再使用它。

@RohanKumar - 没有新的作用域，所以this 可以正常工作。

@HarikaChoudaryKanikanti “不工作”是什么意思？实际发生了什么？

【参考方案2】：

使用此关键字。它将提交触发事件的表单。

你为什么要使用 location.reload？

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

【参考方案3】：

 You can try this...

 function submitForm()
document.formName.action="actionName";
document.formName.submit();
 


 <form method="post" name="formName" enctype="multipart/form-data">
  ....
 <input type="button" onclick="submitForm()"/>
 <form>