Ok I feel like this should be really simple; so either I've completely missed the point of the questions on here and other websites I've read or it hasn't been asked in the same context....
I have a REALLY simple form element (below)
<form>
<input type="text" id="searchTerm" />
<input type="submit" value="Submit" id="submitButton" />
</form>
And essentially all I want to do, when the Submit
button is clicked, is have the value entered into the text
box passed to a JavaScript Function
and console logged (for now).
This looks like it has been asked a million times but the questions I've read don't answer my question (I don't think).
Edit Thank you for all the responses; the biggest problem is I was trying to reference a function in an external Javascript
file that was being called after the form element.
HTML forms can send an HTTP request declaratively. But forms can also prepare an HTTP request to send via JavaScript, for example via XMLHttpRequest .
To post HTML form data to the server in URL-encoded format, you need to make an HTTP POST request to the server and provide the HTML form data in the body of the POST message. You also need to specify the data type using the Content-Type: application/x-www-form-urlencoded request header.
It is not necessary to add yet another getElementById()
inside the submit form handler function. I am confused as to why this approach is so common. What would you do if you needed to fetch multiple dozens / all values of the form? Write dozens of element selectors?
I think the following is much cleaner:
Inputs can include a name
attribute which eases their access:
function submitForm(event) {
alert(event.target.elements.searchTerm.value)
return false;
}
<form onsubmit="submitForm(event)">
<input name="searchTerm"/>
<button>Submit</button>
</form>
Even better,
function submitForm(that) {
alert(that.searchTerm.value)
return false;
}
<form onsubmit="submitForm(this)">
<input name="searchTerm"/>
<button>Submit</button>
</form>
In the handler itself, you can even access values directly:
<form onsubmit="alert(searchTerm); false">
<input name="searchTerm"/>
<button>Submit</button>
</form>
Even though I have no idea why the latest example works; Havent found any documentation regarding this yet; I opened a question here.
If you register the event handler via JS, the this
(in non-lambda functions) already points to the form element, so you can also do
document.querySelector('#myForm').addEventListener('submit', function() {
event.preventDefault()
alert(this.elements.searchTerm.value)
});
<form id="myForm">
<input name="searchTerm"/>
<button>Submit</button>
</form>
If you want to get a key/value mapping (plain) object out of an HTML form, see this answer.
Something like this?
document.getElementById('theform').onsubmit = function() {
console.log(document.getElementById('searchTerm').value);
return false;
};
JSFiddle here: https://jsfiddle.net/km7rt62v/
It's important to return false;
to prevent default behaviour at the end of your submit handler, as otherwise the form will post and reload the page.
As others have demonstrated, it is also possible to use the onsubmit
html attribute of the form element, it's a personal preference, but I prefer a cleaner separation between JS and HTML.
Edit: Since I got accepted answer and the question is tagged with jQuery, here's the jQuery equivalent:
$('#theform').submit(function() {
console.log($('#searchTerm').val());
return false;
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With