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

How to add submit button to an HTML form with JavaScript function?

本文关键字：添加 提交 按钮 表单 HTML 何使用 JavaScript 函数      更新时间：2023-09-26

下面的表单在用户按下回车键时触发一个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/

表单元素在提交表单时发出一个onsubmit事件(为了提高发生这种情况的几率，实际上包含一个<input type="submit">按钮)。将当前的JavaScript替换为:

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

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

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

您可以使用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
});

让一个函数同时处理(输入&(提交按钮)，并防止"提交"事件。这样的:

$('#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/

我猜问题是如何禁用表单提交时，按下'enter'键。那么，监听'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');
    });
});

为了便于访问，最好保持默认行为。但是，对于某些元素应该是必需的，请仅为这些元素禁用'enter'键。但不是在表格上提交。用户可以点击"提交"按钮，然后按"进入"键。这时需要按回车键

相关文章：