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

Question

The following form triggers a JavaScript function upon the user pressing enter. However, I'd like the function to be triggered when the user presses a submit button.

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

Also, see here: https://jsfiddle.net/chrisguzman/7Tag3/5/

Answer 1

Form elements emit an onsubmit event when the form is submitted (to improve the chances of that happening, actually include a <input type="submit"> button). Replace your current JavaScript with this:

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

Preferably, you'd set an id on the specific form you want and use that in the selector.

It is not recommended to use a click handler on a submit button instead of the more reliable and semantically appropriate submit event.

Answer 2

You can use the click() method

// 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

make one function for handle both (enter & subnit button), and prevent the 'submit' event. like this:

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

I guess the question how to disable form submit when 'enter' key is pressed. Well, listen for the 'keypress' event, if the keyCode is === 13 prevent the default behavior of the event and stop it from being propagated.

Please refer this fiddle

Markup:

<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>

Vanilla 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');
    });
});

It is better to keep the default behavior as is for the sake of accessibility. However, should be required for some elements, please disable the 'enter' key only for those elements. But not on the form submit. User can 'tab' to the 'submit' button and press the 'enter' key. At that time, 'enter' key press needs to be honored.