如何从表单获取值并防止提交？

Question

I have this simple form:

HTML

<form>
    <label for="eName">Name</label>
    <input id="eName" type="text" name="eName">
    <label for="Email">Email</label>
    <input id="Email" type="text"  name="Email">
    <button id="create" class="boton" 
        onclick="doSomething();" type="submit">Create!</button>
</form>

JS

function doSomething() {
    var name, email;
    name = document.getElementById("eName").value;
    email = document.getElementById("Email").value;
    putElementsIntoTheDOM(name, email);
}

When the user inputs some information I want to populate the DOM with the user input. The example above works. But I think it can be done better. I just don't know how.

How can I wire the <button> so that when the user clicks it the form values are passed to the function doSomething() ?

Also, since I'm not sending the form values anywhere except populating the DOM, how can I prevent the submission?

I've seen something like this but I can't get it too work.

<button id="create" class="boton" onclick="doSomething(this.form);"     
    type="submit">Create!</button>

Answer 1

First of all you have to update your function declaration to be able to receive the variables you want to send

function doSomething(name,email) {
}

Secondly, if you have to send values of some fields to that function, you can do so on button click like this.

<button id="create" class="boton" onclick="doSomething(document.getElementById('eName').value,document.getElementById('Email').value);" type="submit">Create!</button>

However, using unobtrusive javascript is recommended, and for that jQuery is one of the options you can use for passing variables to your function neatly.

Answer 2

If you don't want to send the form values anywhere, then you just need to remove type="submit" from your button.

Your example code works fine. I'm not sure what you mean by a 'better' way. More modern/idiomatic javascript would not be using the onclick attribute, but instead binding doSomething to the button. Using jQuery, that would look like:

$("#create").click(doSomething);

Answer 3

There is a difference between the type="submit" and type="button" that I didn't realize.
Also, the button and submit types react differently with onclick and onsubmit events.

For example

<form onclick="doSomething()">
<label for="eName">Name</label>
<input id="eName" type="text" name="eName">
<label for="Email">Email</label>
<input id="Email" type="text"  name="Email">
<button id="create" class="boton" type="button">Create!</button>
</form>

Notice that at the top of the form there is onclick .
The onclick is fired whenever you focus on an input element, and of course if you click the button.

Changing the form to <form onsubmit="doSomething(); but not changing the type="button" doesn't do anything. Clicking the button doesn't trigger the function.

By changing the type="submit" and keeping the head <form onsubmit="doSomething(); triggers the function when the button is clicked. A nice added functionality to this is that if you have any <input ... required="required"> the submit will only work if those fields are filled in (and your form will let you know about the required fields).

To prevent the submission/refreshing (since I'm only populating the DOM with user input) adding return false at the form head prevents submission
<form onsubmit="doSomething(); return false"> .

Finally, to get the form values adding this :
<form onsubmit="doSomething(this); return false> and then

function doSommething(formInfo) {
   var name = formInfo.eName.value;
   var email = formInfo.Email.value;
   ... 
 }