如何使用 JavaScript 函数向 HTML 表单添加提交按钮？

Question

以下表单在用户按下 Enter 键时触发 JavaScript 函数。 但是，我希望在用户按下提交按钮时触发该功能。

<form action="">
    <input type="text" name="query" size="20" class="hintTextbox" id='emailinput' placeholder='email'>
    <input type="text" name="query" size="20" class="hintTextbox" id='variablesinput' placeholder='variables'>
</form>


$('#variablesinput').keypress(function (e) {
    if (e.keyCode == 13) {
        var email = $('#emailinput').val();
         var variable = $('#variablesinput').val();
        alert(email + variable);
    }
});

另外，请参见此处： https : //jsfiddle.net/chrisguzman/7Tag3/5/

Answer 1

当表单被提交时，表单元素会发出一个onsubmit事件（为了提高发生这种情况的机会，实际上包括一个<input type="submit">按钮）。 用这个替换你当前的 JavaScript：

$("form").submit(function() {
    var email = $('#emailinput').val();
    var variable = $('#variablesinput').val();
    alert(email + variable);
});

最好是在您想要的特定表单上设置一个 id 并在选择器中使用它。

不建议在提交按钮上使用click处理程序，而不是使用更可靠且语义上更合适的submit事件。

Answer 2

您可以使用click()方法

// Let's say you have a submit button within the form
// with an id of ="submit_btn"
$("#submit_btn").click(function(){
  // do stuff in here
});

Answer 3

制作一个功能来处理两者（输入和子按钮），并防止“提交”事件。 像这样：

$('#variablesinput').keypress(function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        submiting();
    }
});

$( "#f" ).submit(function(e) {
    e.preventDefault();
    submiting();
});

function submiting() {
    // do somthing:
    var email = $('#emailinput').val();
    var variable = $('#variablesinput').val();
    alert(email + variable);
}

https://jsfiddle.net/7Tag3/8/

Answer 4

我猜问题是如何在按下“输入”键时禁用表单提交。 好吧，监听 'keypress' 事件，如果 keyCode 是 === 13 阻止事件的默认行为并阻止它被传播。

请参考这个小提琴

标记：

<form id="form">
    <input type="text" class="no-submit-on-return">
    <input type="text" class="no-submit-on-return">
    <input type="text" class="no-submit-on-return">
    <input type="text" class="no-submit-on-return">
    <input type="submit">
</form>

原生 JavaScript：

var form = document.querySelector('#form');
form.addEventListener('submit', function(e){
    e.preventDefault();
    e.stopPropagation();
    alert('Submit event');
});

var noSubmitOnReturns = document.querySelectorAll('.no-submit-on-return');
[].slice.call(noSubmitOnReturns).forEach(function(noSubmitOnReturn){
    noSubmitOnReturn.addEventListener('keypress', function(e){
        e.preventDefault();
        e.stopPropagation();
        alert('Keypress event');
    });
});

为了可访问性，最好保持默认行为。 但是，对于某些元素应该是必需的，请仅对这些元素禁用“输入”键。 但不是在表单上提交。 用户可以“tab”到“提交”按钮，然后按“回车”键。 那时，需要兑现“回车”键。