如何使用 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”到“提交”按鈕，然后按“回車”鍵。 那時，需要兌現“回車”鍵。