jquery ajax提交2种不同或多种形式答案

【问题标题】：jquery ajax submit 2 diffrent or many formjquery ajax提交2种不同或多种形式
【发布时间】：2018-03-04 03:41:12
【问题描述】：

我是 jquery ajax 的新手，我需要一些帮助。

这是我的基本 html。

    <form id="replayForm1">
        msg_id:
        <input type="text" name="msg_id">
        <br>
        msg_replay
        <input type="text" name="msg_replay">
        <button onClick="getmsg(1)">Click Me</button>
    </form>
    <form id="replayForm2">
        msg_id:
        <input type="text" name="msg_id">
        <br>
        msg_replay
        <input type="text" name="msg_replay">
        <button onClick="getmsg(2)">Click Me</button>
    </form>

这是我的 jquery：

<script>
    function getmsg(formID) {
        var formName = '#replayForm' + formID;
        $(formName).submit(function (e) { 
            e.preventDefault();
            var msg_id = $('input[name=msg_id]').val();
            var msg_replay = $('input[name=msg_replay]').val();
            alert(msg_id + msg_replay);
        });
    }
 </script>

我的问题是，当我填写第二个表格时，我得到了空值。第一种形式没有问题，它返回值并且没有问题。如何处理这个问题？我尝试仅使用 1 个功能使此表单独一无二，以便于轻松提交表单。

【问题讨论】：

欢迎来到 Stack Overflow！ Stack Overflow 不是一个讨论论坛，它是一个问答网站，您可以在其中提出可以回答而不是讨论的特定编程问题。请阅读How do I ask a good question? 和What topics can I ask about here?，然后编辑您的问题以符合站点指南。诸如此类的离题问题通常会关闭，但如果经过编辑以提出可回答问题，则可以再次重新打开。谢谢。

标签： javascript jquery

【解决方案1】：

jQuery 将查找它找到的输入的第一个实例，因此请使用 formName 来匹配正确的实例。

您还应该删除之前的事件，否则您将在第二次单击同一按钮后收到多个警报。

function getmsg(formID) {
  var formName = '#replayForm' + formID;
  $(formName).off('submit').on('submit', function (e) { 
    e.preventDefault();
    var msg_id = $(formName + ' input[name=msg_id]').val();
    var msg_replay = $(formName + ' input[name=msg_replay]').val();
    alert(msg_id + msg_replay);
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="replayForm1">
  msg_id:
  <input type="text" name="msg_id">
  <br>
  msg_replay
  <input type="text" name="msg_replay">
  <button onClick="getmsg(1)">Click Me</button>
</form>
<form id="replayForm2">
  msg_id:
  <input type="text" name="msg_id">
  <br>
  msg_replay
  <input type="text" name="msg_replay">
  <button onClick="getmsg(2)">Click Me</button>
</form>

【讨论】：

.off 或没有 .off 有什么区别，如果我不输入.off，它仍然有效
点击提交多次你会看到它为它分配了多个事件处理程序，所以发生的情况是你在点击2次后有多个警报。
效果见下文；p
嗨，我回来了，我有一个问题，不用function / onClick也可以做到吗？
@JaironLanda 当然，一个函数并添加一个内联 onClick 可能是最糟糕的方法。不过，您需要提出另一个问题。

【解决方案2】：

在这两种情况下，name 是相同的。更改名称并将这些值传递给 getmsg 函数

function getmsg(formID, inputName, msgReplyName) {
  var formName = '#replayForm' + formID;
  $(formName).submit(function(e) {
    e.preventDefault();
    var msg_id = $('input[name=' + inputName + ']').val();
    var msg_replay = $('input[name=' + msgReplyName + ']').val();
    alert(msg_id + ' ' + msg_replay);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="replayForm1">
  msg_id:
  <input type="text" name="msg_id">
  <br> msg_replay
  <input type="text" name="msg_replay">
  <button onClick="getmsg(1,'msg_id','msg_replay')">Click Me</button>
</form>
<form id="replayForm2">
  msg_id:
  <input type="text" name="msg_id_2">
  <br> msg_replay
  <input type="text" name="msg_replay_2">
  <button onClick="getmsg(2,'msg_id_2','msg_replay_2')">Click Me</button>
</form>

【讨论】：

如果您要更改它，getmsg(this) 会更好。