Form submission upon pressing enter

Question

Hello so I have the following code

 <div id="js_example"> 
                    <p id=js_intro_text> Introduce yourself! </p>
                    <form id="js_form">
                        Please enter your name: <input  id = "name_form" type="text" name="full_name"><br>
                    <input type="button" onclick=greet() value="submit">
                    </form>
                    <p id="js_intro_answer"></p>
    </div>

This is a very simple form that has a button that reads the value of the form text box and greets the user depending on the name they type. However, the only way to activate the function is by pressing the submit button. Is there a way to activate the greet() function wihtin the text box by pressing enter while the user has selected said text box?

Thanks

The button you refer to is not a submit button. Rather It's a button of type "button" with no implicit side effects. "submit" is its text content. — traktor, Jan 02 '17 at 02:18

score 1 · Accepted Answer · answered Jan 02 '17 at 00:11

1

Replace the button with a submit button
Bind the event handler to the submit event of the form

Such:

document.querySelector("#js_example").addEventListener("submit", myFunction);

function myFunction (event) {
    event.preventDefault();
    console.log("Submit event fired on form with id " + this.id);
}

<div id="js_example">
  <p id=js_intro_text>Introduce yourself!</p>
  <form id="js_form">
    <label for="name_form">Please enter your name:</label>
    <input id="name_form" type="text" name="full_name">
    <br>
    <input type="submit" value="submit">
  </form>
  <p id="js_intro_answer"></p>
</div>

(NB: The configuration of Stackoverflow prevents this demo from working and fires the error: Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.. A working demo is hosted externally)

answered Jan 02 '17 at 00:11

Quentin

914,110
126
1,211
1,335

The first block of code is within – alexp2603 Jan 02 '17 at 00:15
1

Yes, see the link to the externally hosted live demo. – Quentin Jan 02 '17 at 00:16
For a beginner, what does "binding" entail? – alexp2603 Jan 02 '17 at 00:19
@alexp2603 — Calling `addEventListener` or using an `onsomething` attribute. – Quentin Jan 02 '17 at 00:20

score 0 · Answer 2 · edited May 23 '17 at 10:30

Forms are generally used for posting data back to the server, but it looks like, from "onclick" property of your button (which prevents the form from reloading the page), that you're looking at client-side only.

You can use a form for this, but a more straightforward way is to get rid of the form and get your textbox to listen for the enter key.

Simple examples of both approaches are in this answer (duplicate question, really)

https://stackoverflow.com/a/13987669/7353829

traktor · Answer 3 · 2017-01-02T00:43:17.940

Is there a way to activate the greet() function wihtin the text box by pressing enter while the user has selected said text box?

Yes, you can dissallow submission if the text box was selected when the submit event fired by checking the value of document.activeElement

For example, using global variables set up for elements which have an id attribute and adding a submit handler after the window has loaded:

window.onload = function (){

    js_form.onsubmit = function () {
       if( document.activeElement == name_form) {
           greet();
           return false;
       }
    }
 };

which would allow you to add a real submit button separately, at a later date. To prevent submission from any input element as opposed to testing for a specific one (name_form), the greeting test could be changed to

    if( document.activeElement.tagName == "INPUT") {

Form submission upon pressing enter

3 Answers3