Menu
I am basing my question and example on Jason's answer in this question
I am trying to avoid using an eventListener, and just to call handleClick onsubmit, when the submit button is clicked.
Absolutely nothing happens with the code I have.
Why is handleClick not being called?
<html> <head> <script type="text/javascript"> function getRadioButtonValue(rbutton) { for (var i = 0; i < rbutton.length; ++i) { if (rbutton[i].checked) return rbutton[i].value; } return null; } function handleClick(event) { alert("Favorite weird creature: "+getRadioButtonValue(this["whichThing"])); event.preventDefault(); // disable normal form submit behavior return false; // prevent further bubbling of event } </script> </head> <body> <form name="myform" onSubmit="JavaScript:handleClick()"> <input name="Submit" type="submit" value="Update" onClick="JavaScript:handleClick()"/> Which of the following do you like best? <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p> <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p> <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p> </form> </body> </html> edit:
Please do not suggest a framework as a solution.
Here are the relevant changes I have made to the code, which results in the same behavior.
function handleClick() { alert("Favorite weird creature: "+getRadioButtonValue(document.myform['whichThing']))); event.preventDefault(); // disable normal form submit behavior return false; // prevent further bubbling of event } </script> </head> <body> <form name="aye">; <input name="Submit" type="submit" value="Update" action="JavaScript:handleClick()"/> Which of the following do you like best? <p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p> <p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p> <p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p> </form> 
378
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
To invoke this function in the html document, we have to create a simple button and using the onclick event attribute (which is an event handler) along with it, we can call the function by clicking on the button.
In an HTML form, the action attribute is used to indicate where the form's data is sent to when it is submitted. The value of this can be set when the form is created, but at times you might want to set it dynamically.
To execute JavaScript in a browser you have two options — either put it inside a script element anywhere inside an HTML document, or put it inside an external JavaScript file (with a . js extension) and then reference that file inside the HTML document using an empty script element with a src attribute.
You can either use javascript url form with
<form action="javascript:handleClick()"> Or use onSubmit event handler
<form onSubmit="return handleClick()"> In the later form, if you return false from the handleClick it will prevent the normal submision procedure. Return true if you want the browser to follow normal submision procedure.
Your onSubmit event handler in the button also fails because of the Javascript: part
EDIT: I just tried this code and it works:
<html> <head> <script type="text/javascript"> function handleIt() { alert("hello"); } </script> </head> <body> <form name="myform" action="javascript:handleIt()"> <input name="Submit" type="submit" value="Update"/> </form> </body> </html> 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
