Javascript: Why my function isn't called by onclick?
Question
I'm writing a form validation using Jscript,
But I don't know why I just can't even call a simple alert function by onclick.
Here's part of my code
<html>
<head>
<title>Check</title>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script></head>
...
<form name="checkout" id="checkout" method="post" action="1.php">
<table align="center">
<tr>
<td>*Name</td>
<td><input type="text" name="name" id="name" size="40"/></td>
</tr>
<tr>
<td>*Phone</td>
<td><input type="text" name="phone" id="phone" size="40"/></td>
</tr>
<tr>
<td>*Address</td>
<td><textarea rows="4" cols="40" name="address"></textarea></td>
</tr>
</table>
<input type="button" value="Click me!" onclick="return displaymessage()" />
</form>
</html>
I suppose the button should be a submit button
<input name="Submit" type="submit" value="Submit"onclick="return validate_form()"/>
But during my testing, even a simple "Click me!" button doesn't work... Will there be anyone who countered kind of question like that before?
5 answers
solution1
1 ACCPTED 2016-10-16 12:16:35
Here is a sample snippet to play around with.
The logic should be:
The function validate_form should return true if validation is successful; otherwise false . If the return value is true the form would be submitted.
var validate_form = function() { var allGood = true; // all good if validation is successful. // check if name is valid allGood = document.querySelector("#name").value.length > 0; // do other validataions... and return whether all is good if (allGood) { console.log("We are okay to proceed"); } else { console.log("Please make sure the form inputs are entered to proceed"); } return allGood; } var action_form = function() { // validate form.. var isFormValid = validate_form(); // do other actions.. // ... // submit the form... if (isFormValid) { console.log("submitting the form..."); document.querySelector("#checkout").submit(); } }
<form name="checkout" id="checkout" method="post" action="https://google.com"> <table align="center"> <tr> <td>*Name</td> <td> <input type="text" name="name" id="name" size="40" /> </td> </tr> <tr> <td>*Phone</td> <td> <input type="text" name="phone" id="phone" size="40" /> </td> </tr> <tr> <td>*Address</td> <td> <textarea rows="4" cols="40" name="address"></textarea> </td> </tr> </table> <!-- <input type="button" value="Click me!" onclick="action_form()" /> or the below --> <input type="submit" value="Click me!" onclick="return validate_form()" /> </form>
solution2
0 2016-10-16 12:07:33
You should create a real button like :
<button type="submit" onclick="onSubmitClick()">Submit</button> .
You can also add onsubmit="onSubmit()" into the form tag.
function onSubmitClick() { alert('Submitted'); }
<!-- Action on the button --> <form> <table align="center"> <tr> <td>*Name</td> <td> <input type="text" name="name" id="name" size="40" /> </td> </tr> <tr> <td>*Phone</td> <td> <input type="text" name="phone" id="phone" size="40" /> </td> </tr> <tr> <td>*Address</td> <td> <textarea rows="4" cols="40" name="address"></textarea> </td> </tr> </table> <button type="submit" onclick="onSubmitClick()">Submit</button> </form> <!-- Action on the form (if multiple submit, it's better) --> <form onsubmit="onSubmitClick()"> <table align="center"> <tr> <td>*Name</td> <td> <input type="text" name="name" id="name" size="40" /> </td> </tr> <tr> <td>*Phone</td> <td> <input type="text" name="phone" id="phone" size="40" /> </td> </tr> <tr> <td>*Address</td> <td> <textarea rows="4" cols="40" name="address"></textarea> </td> </tr> </table> <button type="submit">Submit</button> </form>
solution3
0 2016-10-16 12:12:29
I checked and it works fine. You don't need the return. You aren't returning a value, you are running an alert.
Someone has mentioned onSubmitClick, onClick will work just as well, though technically you submitting a form when you click it. onSubmitClick wouldn't work with other objects.
<html>
<head>
<title>Check</title>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form name="checkout" id="checkout" method="post" action="1.php">
<table align="center">
<tr>
<td>*Name</td>
<td><input type="text" name="name" id="name" size="40" /></td>
</tr>
<tr>
<td>*Phone</td>
<td><input type="text" name="phone" id="phone" size="40" /></td>
</tr>
<tr>
<td>*Address</td>
<td><textarea rows="4" cols="40" name="address"></textarea></td>
</tr>
</table>
<input type="button" value="Click me!" onclick="displaymessage();" />
</form>
</body>
</html>
solution4
0 2016-10-16 12:12:41
I suggest you to validate the form before the submit it, something like this..
<input id="mybtn" type="button" value="Click me!" />
JS:
var form = document.getElementById("checkout");
document.getElementById("mybtn").addEventListener("click", function () {
if ( validate_form() )
form.submit();
else
alert("Name is empty");
});
function validate_form(){
var name = document.getElementById("name").value;
if ( !value )
return false;
else
return true;
}
solution5
0 2016-10-16 12:12:53
Remove the return statment
function displaymessage(){
alert("Hello World!");
}
<input type="button" value="Click me!" onclick="displaymessage()" />
see the onclick event example
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.