javascript - jquery ajax提交2个不同或多个表单

Question

我是 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 个函数使此表单与简单提交表单不同。

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