Javascript：为什么我的函数不被 onclick 调用？
[英]Javascript: Why my function isn't called by onclick?
问题描述
我正在使用 Jscript 编写表单验证，
但我不知道为什么我什至不能通过 onclick 调用一个简单的警报功能。
这是我的代码的一部分
<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>
我想按钮应该是提交按钮
<input name="Submit" type="submit" value="Submit"onclick="return validate_form()"/>
但是在我的测试过程中，即使是一个简单的“点击我！” 按钮不起作用... 以前会有人反驳这样的问题吗？
5 个解决方案
解决方案1
1 已采纳 2016-10-16 12:16:35
这是一个可以玩的示例片段。
逻辑应该是：
如果验证成功，函数validate_form应该返回true ； 否则为false 。 如果返回值为true则form将被提交。
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>
解决方案2
0 2016-10-16 12:07:33
您应该创建一个真正的按钮，例如：
<button type="submit" onclick="onSubmitClick()">Submit</button> 。
您还可以将onsubmit="onSubmit()"到表单标记中。
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>
解决方案3
0 2016-10-16 12:12:29
我检查过，它工作正常。 你不需要回报。 您不是在返回值，而是在运行警报。
有人提到过 onSubmitClick，onClick 也能正常工作，尽管从技术上讲，您在单击它时提交了一个表单。 onSubmitClick 不适用于其他对象。
<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>
解决方案4
0 2016-10-16 12:12:41
我建议你在提交之前验证表单，就像这样..
<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;
}
解决方案5
0 2016-10-16 12:12:53
删除return声明
function displaymessage(){
alert("Hello World!");
}
<input type="button" value="Click me!" onclick="displaymessage()" />
为什么我的javascript onclick事件没有在第一次点击时触发？
[英]Why isn't my javascript onclick event triggered on the first click?
我的 javascript 不工作，或者 function 没有被调用
[英]Either my javascript is not working, or the function isn't being called
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.