onclick event submits when button clicked but not when enter is pressed on keyboard?

Question

I'm only using HTML and JavaScript.

I have one form

  <form id="form1">
<input name="name" type="text" size="20">
</form>

And one button

<button onclick="outputname()" type="submit">Search</button>

So the idea is the user types a number on the form and clicks the search button and an action is performed (this works great).

However, if the user enters a number and hits the Enter button on keyboard the page is refreshed. The same happens on iPad. ("Return" button is displayed instead of "Go").

So I want the Enter button to work on keyboard and Go to work on iOS.

The idea is that the user enters a customer number and the relevant details are displayed.

Have you considered using the HTML intended for a submit button (``) and then have an `onsubmit` event on the form? — dovetalk, Mar 20 '16 at 22:16
This might be of interest to you: http://stackoverflow.com/questions/2314401/what-is-the-default-form-http-method — cssyphus, Mar 20 '16 at 22:19
dovetalk i changed type="text" to type ="submit" . Instead of user being able to enter a text/number into the form, the form has turned into a button called "submit query" LMAO I'm about to give up on this — Abdul, Mar 20 '16 at 23:57
onclick events should also trigger on pressing the Enter key. Just my opinion... — SendETHToThisAddress, Sep 03 '21 at 21:37

score 3 · Answer 1 · edited May 23 '17 at 12:32

Give an ID to both your input field and button, to be sure you trap the correct one:

HTML:

<form action="destination.html" method="post">
    <input id="foo" name="name" type="text" size="20">
    <button id="mybutt" onclick="outputname()" type="submit">Search</button>
</form>

Note that destination.html is where you want the data posted to. If you want it posted to the same file, just use: action="" or leave it out.

Javascript:

document.getElementById('foo').onkeypress = function(e){
    if (!e) e = window.event;
    var keyCode = e.keyCode || e.which;
    if (keyCode == '13'){
        var btn = document.getElementById('mybutt');
        mybutt.click();
        return false;
    }
}

Sources:

How to detect when the user presses Enter in an input field

Capturing the Enter key to cause a button click with javascript

I've done this leaving action="" blank. The form is there, the button is there. But absolutely nothing happens. I think we might be close. Maybe syntax error. — Abdul, Mar 20 '16 at 23:07

score 1 · Answer 2 · answered Mar 20 '16 at 22:11

1

Insert this: action="post" Inside your form tag. I.e., your form tag will have to be this way <form id="form1" action="post">

answered Mar 20 '16 at 22:11

statosdotcom

3,109
2
17
40

I swear to god I've tried everyhing suggested so far, the one that comes closest is statosdotcom answer. I've added action="post" to my code but when I press enter it displays an ERROR message "File not found" /post?name=702536649 <--- thats the number I inserted. Gibberish also mentioned action="post" amongst other things. I will continue trying and editing. – Abdul Mar 20 '16 at 22:56
Then I think your first problem is over; your form is really getting posted. If you find a "file not found" it means you are facing another problem, which probably is about how you are dealing with the data posted. Show your javascript function outputname to allow us to have a look. – statosdotcom Mar 21 '16 at 01:57
Abdul, please, check as correct if the answer was the one you was searching. If you read the HTML specification you will find that, in order to have a form submitted by pressing the ENTER key, you would need to put `action=post` inside the `form` tag, as I suggested you. As I said before, if you're finding a "file not found" is the proof that the form was submitted (but for a wrong or not set destiny). I'll plus 1 you here after that. Thank you and sorry bothering you. I'll delete this comment right after you. – statosdotcom Mar 28 '16 at 15:13
@Abdul please check the answer you think it was helpful to solve your problem. Thank you. – statosdotcom Apr 22 '16 at 17:59

score 1 · Answer 3 · answered Mar 20 '16 at 22:16

1

In this case, you could manage the submit event, instead of key/click events.

<form id="form1" onsubmit="outputname()">

Submission events triggered by either a click or pressing enter will call outputname.

answered Mar 20 '16 at 22:16

MinusFour

13,913
3
30
39

onclick event submits when button clicked but not when enter is pressed on keyboard?

3 Answers3