Javascript：私の関数がonclickによって呼び出されないのはなぜですか？

私はJscriptを使ってフォームバリデーションを書いています。Javascript：私の関数がonclickによって呼び出されないのはなぜですか？

しかし、なぜ私はonclickによって簡単なアラート機能を呼び出せないのか分かりません。

は、ここで私はボタンでも、送信ボタン

<input name="Submit" type="submit" value="Submit"onclick="return validate_form()"/>

しかし、私のテスト中にあるべきと仮定私のコード

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

ですシンプルな "Click me！"ボタンは機能しません...以前のような質問に反論した人はいますか？

<button type="submit" onclick="onSubmitClick()">Submit</button>：

出典

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

はあなたのような本当のボタンを作成する必要があります。

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なステートメント

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

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

を削除します

を参照

出典

2016-10-16 12:12:53 Merlin

Javascript：私の関数がonclickによって呼び出されないのはなぜですか？

答えて

関連する問題