CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Chris
Chris

Reputation: 5804

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

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/

Upvotes: 0

Views: 2162

Answers (4)

Sarbbottam
Sarbbottam

Reputation: 5580

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.

Upvotes: 0

meni181818
meni181818

Reputation: 1101

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/

Upvotes: 0

rvighne
rvighne

Reputation: 21897

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.

Upvotes: 5

Kyle Emmanuel
Kyle Emmanuel

Reputation: 2221

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

Upvotes: 0

Related Questions