Javascript：为什么我的函数没有被onclick调用？

我在写一个使用Jscript的表单验证，Javascript：为什么我的函数没有被onclick调用？

但我不知道为什么我只是不能通过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()"/>

但我的测试过程中，即使一个简单的“点击我！”按钮不起作用......以前会有人反对这样的问题吗？

来源

2016-10-16 hoho97

'onclick'属性是一起value..without空间 –

哦废话..如果我删除了我的validate_form（）函数，那么该按钮再次工作 – hoho97

这是否意味着我的'validate_form（）'函数有一些问题？ – hoho97

下面是一个示例代码段一起玩。

逻辑应该是：

函数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>

来源

2016-10-16 12:16:35

你应该创建像一个真正的按钮：

<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>

来源

2016-10-16 12:07:33 C0ZEN

我检查，它工作正常。你不需要回报。您没有返回价值，您正在运行警报。

有人提到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>

来源

2016-10-16 12:12:29

我建议你去验证表单之前提交，这样的事情..

<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; 
}

来源

2016-10-16 12:12:41

取出return statment

function displaymessage(){ 
    alert("Hello World!"); 
} 

<input type="button" value="Click me!" onclick="displaymessage()" />

见onclick event example

来源

2016-10-16 12:12:53 Merlin

Javascript：为什么我的函数没有被onclick调用？

回答

相关问题