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>

Answer 2

在这两种情况下name都相同。更改名称＆amp;将这些值传递给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>

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

2 个答案: