Question

当我点击submit1然后点击submit2时，一切进展顺利，但是，当我在第一个输入文字上按Enter Key时，我会转到第二部分

当我在第二个输入文本上按Enter键时 - ＆gt;执行第一个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

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

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

$("#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 3

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

显然，虽然你想将文本框链接到一个按钮然后为此我会看一下这个问题How to trigger HTML button when you press Enter in textbox?

Answer 4

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

Answer 5

我让它像那样工作：
为什么我会遇到一个表格的麻烦？ IE＆lt; 6？

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 */
  });

});

多个Javascript以相同的形式提交

5 个答案: