Javascript - Detect a form button press
Question
I wrote some test code to see if i could detect the pressing of a form's submit button.
HTML
<form action="/pst" method="POST">
Form
<input type="url" name="form_input">
<input type="submit" value="submit" />
JAVASCRIPT
<script>
var submit = document.getElementsByTagName('input')[0];
submit.onclick = function() {
alert("Button pressed!");
}
</script>
This does not work... Also i have to report that the script is locaded inside the <body> .
2 answers
solution1
3 ACCPTED 2018-08-29 11:52:35
var submit = document.getElementsByTagName('input')[0];
This will select the first input, of type = url, not the submit. This is because the url input is first in the DOM, before the submit input.
Target the element more accurately. Give it an ID or use a query like
document.querySelector('input[type=submit]');
Also, you should probably be listening in on the form's submission event, not the button's click event.
document.querySelector('form').addEventListener('submit', ...
solution2
-3 2018-08-29 11:52:55
You are referencing the first input element in the document when you use an index of 0 , but you need to reference the second input element. It will work if you reference the correct element. You want index 1, not 0.
var submit = document.getElementsByTagName('input')[1]; submit.onclick = function() { alert("Button pressed!"); }
<form action="/pst" method="POST"> Form <input type="url" name="form_input"> <input type="submit" value="submit"> </form>
As you are just learning, it's appropriate to kill some bad habits before they settle in. .getElementsByTagName() certainly works, but it returns what is called a "live" node list which means that every time you use the variable referencing the list, the entire document must be scanned again to find the most up-to-date set of matching elements. As such, it should only be used in situations where elements are being dynamically added/removed from the document. Additionally, since you are only interested in one element, scanning the whole document for a set of elements, just to throw all but one of those references away is wasteful.
Instead, use more appropriate APIs, such as .querySelector() and .getElementById() .
Next, instead of setting up your event handler with the .onclick property, use the more modern and robust .addEventListener() API, which allows you to register multiple event handlers for a single event.
Lastly, be aware that clicking a submit button actually triggers two events, the click event of the button itself and the submit event of the form element that the submit button is tied to. Usually, we want to tap into the submit event of the form.
Putting this all together:
// Get a reference to the form var form = document.querySelector("form"); // Set up a submit event handler form.addEventListener("submit", function() { alert("Form Submitted!"); }); // Get a reference to the textbox var textbox = document.querySelector("input[type='url']"); // Set up a input event handler (fires every time you type in the box) textbox.addEventListener("input", function() { console.log("edit - new value is:" + this.value); });
<form action="/pst" method="POST"> Form <input type="url" name="form_input"> <input type="submit" value="submit"> </form>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.