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

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/

Why the downvote? This is the kind of question new js- and jquery-users look for. — testuser
– testuser, Commented Jul 19, 2014 at 23:15

rvighne · Accepted Answer · 2014-07-19 22:29:21Z

5

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.

answered Jul 19, 2014 at 22:29

rvighne

22.1k11 gold badges53 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle Emmanuel · Accepted Answer · 2014-07-19 22:28:20Z

0

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

answered Jul 19, 2014 at 22:28

Kyle Emmanuel

2,2211 gold badge17 silver badges23 bronze badges

5 Comments

Sterling Archer Over a year ago

-1 because there is submit(). This isn't wrong technically, but a better solution exists

Kyle Emmanuel Over a year ago

And why is this downvoted? just add the submit button to your form

Kyle Emmanuel Over a year ago

Note the user's specification: "However, I'd like the function to be triggered when the user presses a submit button."

charlietfl Over a year ago

@KyleEmmanuel I didn't downvote but button won't get clicked using keyboard

Kyle Emmanuel Over a year ago

Why would one want to click a button using the keyboard?

Syscall · Accepted Answer · 2021-04-04 06:43:28Z

0

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/

edited Apr 4, 2021 at 6:43

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered Jul 19, 2014 at 22:57

meni181818

1,1011 gold badge7 silver badges11 bronze badges

Comments

Syscall · Accepted Answer · 2021-04-04 06:43:47Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related