Q&A
あ、return が原因だ・・・
失礼しました。マイナスをお願いします。
すごく簡単でいいのでjavascriptを使った空検索禁止を実装したいです。
以下のコードを書いたのですがアラート表示はでるものの何故か検索が続行されてしまいます。
初心者なので基本的なことをわかっていないと思いますのでご了承ください。よろしくお願いします。
トップページ【index.php】
javascript
1<html> 2<head> 3<script> 4 <?php echo $message; ?> 5 6 function search() { 7 if (document.forms[0].searchword.value == "") { 8 alert("文字が入力されていません。"); 9 document.forms[0].searchword.focus(); 10 return; 11 } 12 13 document.forms[0].submit(); 14 } 15 16 </script> 17... 18</head> 19.... 20<!--検索フォーム--> 21 <form action="sample.php" method="post"> 22 <input class="...." type="text" name="searchword" id="searchword"> 23 <input type="submit" value="検索する" onclick="search()"> 24</form>
回答4件
0
submitイベントを発火するのはform要素。
HTML
1<form action="sample.php" method="post" 2onsubmit="return search()">
js
1 function search() { 2 if (document.forms[0].searchword.value == "") { 3 alert("文字が入力されていません。"); 4 document.forms[0].searchword.focus(); 5 return false; 6 } 7 return true; 8 }
投稿2017/06/05 05:35
編集2017/06/05 05:35
総合スコア1013
0
ベストアンサー
簡単になるならreturn の戻り値できりわけます
onclickやonsubmit側でもreturn で受けないといけません
javascript
1<script> 2function search(){ 3 if (document.forms[0].searchword.value == "") { 4 alert("文字が入力されていません。"); 5 document.forms[0].searchword.focus(); 6 return false; 7 } 8 return true; 9} 10</script> 11<form action="sample.php" method="post" onsubmit="return search()">> 12<input class="...." type="text" name="searchword" id="searchword"> 13<input type="submit" value="検索する"> 14</form>
投稿2017/06/05 05:34
総合スコア114843
0
input のタイプを submit ではなくbutton にすれば良いと思います。
そうでないと、スクリプト側で submit しなくても submit は実行されてしまいます。
投稿2017/06/05 06:09
総合スコア12
0
inputにtype="submit"属性がついていますので、search()とは別にsubmitが行われています。
html
1<button onclick="search()">検索する</button>
ボタン属性にすれば、search()を呼び出すだけになります。
投稿2017/06/05 05:36
総合スコア726
コメントありがとうございます。「inputにtype="submit"属性がついていますので、search()とは別にsubmitが行われています。」の一言があったおかげで何が原因かがすぐにわかり他の人のコメントも理解しやすかったです！ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。