多个 JavaScript 以同一个表单提交

Question

当我点击submit1，然后点击submit2，一切正常，但是，当我在第一个输入文本上按Enter Key 时，我进入第二部分

当我在第二个输入文本上按 Enter 键时 -> 第一个 JavaScript 函数执行，这给我带来了麻烦。

我不想禁用Enter Key 按下，但他执行了良好的提交输入。

submit1 被处决后有没有办法取消激活？

或者知道从哪个输入文本中按下了 Enter 键？

HTML：

<div id="1">
    <input type="text" placeholder="name"/>
</div>
<div id="2">
    <input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
    <input type="text" placeholder="firstname"/>
</div>
<div id="4">
    <input type="submit" value="submit" id="submit2"/>
</div>

CSS：

#3, #4
{
    display: none;
}

JavaScript：

$(document).ready(function() {

  $("#submit1").click(function () { 

      /* Verify data with javascript and send it with Ajax */
      /* if everything is ok display: */

      document.querySelector("#2").style.display = "none";
      document.querySelector("#3").style.display = "block";
      document.querySelector("#4").style.display = "block";
  });

  $("#submit2").click(function () { 

       /* Verify data with javascript and send it with Ajax */
  });

});

Answer 1

除非我误解了这个问题 - 您只是想确保根据用户选择的按钮调用正确的事件处理程序。只要按钮具有它们所具有的唯一 ID，这将正常工作 - 并且您可以将它们与正确的事件处理程序相关联（这看起来就像您在共享代码中所做的那样）。

此外，您可以使用 disabled 属性禁用任何按钮（将其设置为 true）。

禁用 document.getElementById("submit1").disabled = true;

启用： document.getElementById("submit1").disabled = false;

Answer 2

据我所知，您最大的问题是您似乎在一个表单标签中有两个提交按钮。我强烈建议不要这样做，因为它可能会导致您遇到的问题。相反，我会将两者都更改为按钮并将提交功能添加到 JavaScript 方法中，就像您现在正在做的那样。

显然，尽管您想将文本框链接到一个按钮，然后我会看看这个 SO 问题 How to trigger HTML button when you press Enter in textbox?

Answer 3

<input type="submit"> 是一个特殊的控件。如果表单具有焦点并且按下回车按钮，它将导致表单提交。使用它时，您应该使用event.preventDefault() 在绑定到单击事件时取消该行为。我建议改用<button type="button"><button>。

Answer 4

如果您在 submit1 上按 ENTER，则不会选择 submit2，除非您按 TAB。你在做这个吗？

无论如何，你可以这样做：

$("#submit1").click(function () { 

      /* Verify data with javascript and send it with Ajax */
      /* if everything is ok display: */

      $("#submit2").focus(); // This will automatically focus the user on the second submit button //
});

这将强制用户在他下次按 ENTER 时提交submit2 按钮。

但是不要使用.submit()...你应该使用.submit()函数而不是.click()，因为我相信.click()只检查鼠标点击？

$("#submit1").submit(function(){ 
      /* Blah blah blah... */

      $("#submit2").focus(); // This will automatically focus the user on the second submit button //
});

$("#submit2").submit(function(){ 
     /* ... */
});

---

正如其他用户所说，submit1 和 submit2 在同一个<form> 标签中：

是的。但如果您想分别提交数据，则不应在同一个 <form> 标记中包含 2 个字段。

这样做：

HTML

<form>
    <div id="1">
        <input type="text" placeholder="name"/>
    </div>
    <div id="2">
        <input type="submit" value="submit" id="submit1"/>
    </div>
</form>
<form>
    <div id="3">
        <input type="text" placeholder="firstname"/>
    </div>
    <div id="4">
        <input type="submit" value="submit" id="submit2"/>
    </div>
</form>

JQuery

$("#submit1").submit(function(e){ 
      /* Blah blah blah... */
      e.preventDefault(); // Keeps the user on the same page //
});

$("#submit2").submit(function(e){ 
      /* ... */
      e.preventDefault(); // Keeps the user on the same page //
});

---

Answer 5

我让它这样工作：
为什么我会在一种表格上遇到麻烦？ IE

HTML：

<form>
<div id="1">
    <input type="text" id="text1"/>
</div>
<div id="2">
    <input type="submit" value="submit" id="submit1"/>
</div>
<div id="3">
    <input type="text" id="text2"/>
</div>
<div id="4">
    <input type="submit" value="submit" id="submit2"/>
</div>
</form>

CSS：

#3, #4
{
    display: none;
}

JAVASCRIPT：

$(document).ready(function() {

  $('#text2').keypress(function(e){
      if(e.keyCode==13)
      $('#submit2').click();
    });

  $("#submit1").click(function () { 

      /* Verify data with javascript and send it with Ajax */
      /* if everything is ok display: */

      document.querySelector("#2").style.display = "none";
      document.querySelector("#3").style.display = "block";
      document.querySelector("#4").style.display = "block";
      document.querySelector("#submit1").disabled = true;
  });

  $("#submit2").click(function () { 

       /* Verify data with javascript and send it with Ajax */
  });

});