記入内容のチェックについて

2023/08/03 12:58

このQ&Aのポイント

javascriptの初心者です。記入内容のチェックについて質問があります。
商号が空欄の場合、「確認」ボタンを押すとアラートが表示されない問題が発生しています。
原因が分かる方いらっしゃいますか？

ベストアンサー

記入内容のチェックについて

2006/04/19 14:48

javascriptの初心者です。どうぞよろしくお願いいたします。下記のような内容で「商号」が空欄の場合「確認」ボタンを押すとアラートがかえってきて欲しいのですがうまくいきません。原因が分かる方いらっしゃいますか？ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <Script Language="JavaScript" src="common.js"></Script> <Script Language="JavaScript">  </Script> <title>契約</title></head> <body>　 <form name="OnForm" method=post action="***.cgi"> <center> <TABLE border="0" cellspacing="1"> <tr> <TD>商号</TD> <TD><INPUT type="text" size="42" name="syogo"></TD> </tr> </TABLE> </center> <div align="center"> <center> <table border="0"> <tr> <td width="100%"> <input onclick="kakunin_click()" type="submit" value="確認"><input type="reset" value="やり直し"></td> </tr> </table> </center> </div> </form> </body> </html>

kajita
お礼率75% (130/172)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2006/04/19 16:09 回答No.3

こんにちは。 No1の回答でJavaScriptはそのままでと書きましたが、 document.OnForm.submit(); はいりませんね。 onSubmitという送信ボタンが押された時に呼ばれて、戻ってきた値で本当に送信するか決定しているのであえて submit()を起こす必要がありません。

質問者

お礼 2006/04/19 17:18

数々のアドバイスどうもありがとうございました。お陰で満足のいくしかけができました！このサイトは本当に親切な方が多くて、回答も早くいただけで重宝しています。本当に重ねて感謝いたします。

その他の回答 (2)

LancerVII
ベストアンサー率51% (1060/2054)

2006/04/19 16:07 回答No.2

こんにちは。複数のチェックボックスがチェックされているかどうか調べるにはちょいとひねる必要があります。 function kakunin_click () { // チェック用カウント count = 0; // syogoチェックボックスの数分ループ処理を行う for ( i = 0; i < document.OnForm.syogo.length; i ++ ) { // チェックされている物があった場合はカウントを加算 if ( document.OnForm.syogo[i].checked ) { count ++; } } // カウントが０すなわち、チェックされているものが無かった場合は // falseを返す if ( count == 0 ) { alert ( "一つはチェックを入れて下さい。" ); return false; } } やり方はいろいろあると思いますが、こんな感じでしょうか。

LancerVII
ベストアンサー率51% (1060/2054)

2006/04/19 14:55 回答No.1

こんにちは。私の環境ではアラートは上がります。が、OK押した時点でsubmitされてしまうので以下のように変更すると良いと思います。 (return false;やフォーカスを当てる等を行っているところを見るとやりたいことは以下のようになると思います） JavaScriptはそのままで大丈夫です。 <form name="OnForm" method=post action="***.cgi"> を <form name="OnForm" method=post action="***.cgi" onSubmit="return kakunin_click();"> に変更し、また <input onclick="kakunin_click()" type="submit" value="確認"> を <input type="submit" value="確認"> にします。これで、確認ボタンが押された時に実行され、falseが返ってきた場合はsubmitせず、trueが返ってきた時にsabmitします。

質問者

補足 2006/04/19 15:41

早速のご回答ありがとうございました。 LancerVIIさんのおっしゃる通り、アラートはあがりますね。すみません。慌て者なので。そしてOK押した時点でsubmitされてしまう箇所を修正して頂き感謝いたします。確かにアラートは出るもの次の画面に行ってました。アラートが出ないことだけで頭が一杯で気付きませんでした。教えていただいた通りに修正してうまくいきました。もう一つ問題にぶつかったのですが、良ければ教えていただけますか？今度はチェックボックスのアラートなのですがどれにもチェックが入ってない時にアラートが出るようにしたいのですが、このままではチェックなしでもアラートが出ないみたいです。お願いいたします。 <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <Script Language="JavaScript" src="common.js"></Script> <Script Language="JavaScript">  </Script> <title>契約</title></head> <body>　 <<form name="OnForm" method=post action="***.cgi" onSubmit="return kakunin_click();"> <center> <TABLE border="0" cellspacing="1"> <tr> <TD>商号</TD> <TD> <INPUT type="checkbox" name="syogo" value="Ａ" size="40">Ａ<BR> <INPUT type="checkbox" name="syogo" value="Ｂ" size="40">Ｂ<BR> <INPUT type="checkbox" name="syogo" value="Ｃ" size="40">Ｃ </TD> </tr> </TABLE> </center> <div align="center"> <center> <table border="0"> <tr> <td width="100%"> <input type="submit" value="確認">input type="reset" value="やり直し"></td> </tr> </table> </center> </div> </form> </body> </html>

関連するQ&A

画面の２重起動をチェックする方法について
画面の２重起動をチェックする方法について PHPかJavaScriptどちらで実現できるかわかりませんが... 【確認】ボタンを押下で【確認画面】を別画面で表示します。既に【確認画面】が起動されていたら【既に表示されています】OR【起動されている画面を前面に表示】などできないかなぁと思っています。このようなご経験がある方、よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="content-style-type" content="text/css"> <title>２重起動チェックテスト</title> <script type="text/javascript"> function kogamen_check() { //**************************************************** //ここで確認画面(kakunin.php)が起動済かチェックできないでしょうか？ //**************************************************** } </script> </head> <body> <table align = "center" cellspacing="0"> <form name="form1" action="kakunin.php" method="post" target="_blank" onSubmit="return kogamen_check()"> <tr> <td align="right">項目１</td> <td><input type="text" name="item1" size="10" maxlength="10"><br> </tr> <tr> <td align="right">項目２</td> <td><input type="text" name="item2" size="10" maxlength="10"><br> </tr> <tr> <td><br></td> <td align="center"> <input type="submit" name="kakunin" value="確認"> <input type="button" value="メニューへ" onClick="parent.location = 'menue.php'"> </td> </tr> </form> </table> </body> </html>
- ベストアンサー
- JavaScript
同一nameの　input type="text" の合計を計算したい
初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。以下は自分なりに試行錯誤の末の拙いソースです。どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript">  </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
jQuery　変数の使い方について
jQuery　変数の使い方について【やりたいこと】ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を教えていただけませんでしょうか？よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript">  </script> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>
- ベストアンサー
- JavaScript
入力チェックの外部スクリプトについて
どなたか、お分かりになる方がおりましたらご指導お願いいたします。フォームの入力チェックのjavascriptを外部ファイルにしたいのですが外部ファイルにすると動かなくなります。htmlファイル内部に記入すると動きます。以下のようにしています。 jabascriptはフォルダjsに入っています。 function formcheck(){ if(document.otoiawase.kenmei.value==""){ alert ("お問い合わせ件名を入力してください。"); return false; } if(document.otoiawase.email.value==""){ alert ("emailを入力してください。"); return false; } if(document.otoiawase.honbun.value==""){ alert ("本文を入力してください。"); return false; } } html文は以下の用になっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="content-language" content="ja" /> <meta http-equiv="robots" content="index" /> <meta name="kywords" contents="" /> <script type="text/javascript" src="../js/check_otoiawase.js"> </script> <title></title> </head> <body> <form action="****.php" method="post" name="otoiawase" onsubmit="return formcheck()"> <table> <tr> <td> <label>件名：</label> </td> <td> <input type="text" size="40" name="kenmei" /> </td> </tr> <tr> <td> <label>Email：</label> </td> <td> <input type="text" size="40" name="email" /> </td> </tr> <tr> <td colspan="2"> <textarea cols="40" rows="10" name="honbun"></textarea> </td> </tr> <tr> <td colspan="2"> <input type="submit" name="sousin" value="送信" /> </td> </tr> </table> </form> </body> </html> htmlファイルから見ますと、javascript文は一つ上の階層にある別のフォルダに入っていますので ../js/check_otoiawase.jsとしています。よろしくご指導お願いいたします。
- 締切済み
- JavaScript
テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>
- ベストアンサー
- JavaScript
JavaScriptのロジック？
<HTML> <HEAD> <TITLE>JavaScript</TITLE> <SCRIPT type="text/javascript">  </SCRIPT> </HEAD> <BODY> <form name="SampleForm" method="POST"> <table align="center"> <TR> <TD>OnClick機能 :　<Input type="text" name="nameOne" value="Ok"><Input type="submit" value="押して！" onclick="funDouble()" ></TD> <TD>| 結果 => | </TD> <TD>　OnChange後同じ値を２重表示 ;　<Input type="text" name="nameTwe" value="123456"></TD> </TR> </table> </form> </BODY> </HTML>
- ベストアンサー
- JavaScript
配列の使い方
JavaScript 初心者です。下記ソースでinput type="text"でname="kazu1,name="kazu2"のように２個限定で使っているのですが将来的にＤＢから読んだ数分に変わる予定です。その場合 eval(document.myForm.kazu1.value)+　の表現はどのように変えたらいいでしょうか。配列の数はi7で持ってきています。 <script language="JavaScript"></script> </head> <table border=1> <tr> <td width="40%" ><input type="text" name="kazu1" value="10">%</td> <td width="40%" ><input type="text" name="kazu2" value="10">%</td> </tr> <tr> <td><input type="submit" name="button" value="keisan" onClick="ttlValue(2)" ></td> <td></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
target="_blank"の使い方について
画面に入力項目が２つあります。【入力項目】項目１項目２確認ボタンを押下後、入力チェックを行いエラーがなければ別ウィンドーに確認画面を表示したいです。下記のソースでは、エラーがないときは問題ないですが．．．エラーがあっても別ウィンドーにエラーを表示してしまいます。何かよい対策はありませんでしょうか？よろしくお願いします。 <? //確認ボタン押下 if($_POST["kakunin"]){ //入力チェック if($_POST["item1"]=="") { $error[] = "アイテム１を入力してください。"; } if($_POST["item2"]=="") { $error[] = "アイテム2を入力してください。"; } if(!$error){ // 確認画面へリダイレクト header("Location: {'kakunin.php'}"); } } ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="content-style-type" content="text/css"> <title>【テスト】</title> </head> <body> <tr><b>【テスト】</b></tr> <br> <hr> <? //エラー表示をする！ ?> <table align = "center" cellspacing="0"> <form action="kakunin.php" method="post" target="_blank"> <tr> <td><b>項目１</b></td> <td> <input type="text" name="item1" size="17" maxlength="10" value = "<? echo $_POST["item1"] ?>"> </td> </tr> <tr> <td><b>項目２</b></td> <td> <input type="text" name="item2" size="17" maxlength="10" value = "<? echo $_POST["item2"] ?>"> </td> </tr> <tr align="center"> <td colspan="2" > <input type="submit" name="kakunin" value="確認"> </td> </tr> <tr align="center"> <td colspan="2" > <input type="button" value="メニューに戻る" onClick="parent.location = 'menue.php'"> </td> </tr> </form> </table> </body> </html>
- 締切済み
- PHP
【緊急】リアルタイムでエラーチェック
下記のコードを使って、リアルタイムでエラーチェックを行うファームを作りたいと考えています。このコードだとsubmitしてからでないとコードチェックが行われないので、最初の入力時から行うようにしたいのですが、何か手立てはないでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>exValidationサンプル 2</title> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link type="text/css" rel="stylesheet" href="skin/selectable/style.css" /> <link type="text/css" rel="stylesheet" href="css/exvalidation.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing.js"></script> <script type="text/javascript" src="js/exvalidation.js"></script> <script type="text/javascript" src="js/exchecker-ja.js"></script> <script type="text/javascript"> $(function(){ $("form") .exValidation({ rules: { name: "required", kana: "required katakana", email: "required email hankaku group", pass: "required min6 max12", repass: "required retype-pass", radio: "radio", checkbox: "checkbox" }, errInsertPos: 'after', errPosition: 'fixed' }); }); </script> </head> <body> <div class="pagebody"> <h1>exValidation</h1> <form> <fieldset> <p class="attention">*は必須項目です</p> <table> <tbody> <tr> <th>Name<span>*</span></th> <td><input type="text" id="name" name="name" value="" /></td> </tr> <tr> <th>Kana<span>*</span></th> <td><input type="text" id="kana" name="kana" value="" /></td> </tr> <tr> <th>Mail<span>*</span></th> <td><span id="email"><input type="text" id="email" name="email" value="" /> @ <input type="text" name="email2" value="" /></span></td> </tr> <tr> <th>Password<span>*</span></th> <td><input type="password" id="pass" name="pass" value="" /></td> </tr> <tr> <th>Retype-Password<span>*</span></th> <td><input type="password" id="repass" name="repass" value="" /></td> </tr> <tr> <th>Sex<span>*</span></th> <td> <span id="radio"> <label for="male"><input type="radio" id="male" name="sex" value="male" />male</label> <label for="female"><input type="radio" id="female" name="sex" value="female" />female</label> </span> </td> </tr> <tr> <th>Prefecture<span>*</span><br /> this is selectable</th> <td> <select id="pref" name="pref" class="selectable"> <optgroup label="---"> <option value="">---</option> </optgroup> <optgroup label="北海道"> <option value="01">北海道</option> </optgroup> <optgroup label="東北"> </optgroup> </select> </td> </tr> <tr> <th>City</th> <td><input type="text" name="city" value="" /></td> </tr> <tr> <th>Street</th> <td><input type="text" name="street" value="" /></td> </tr> <tr> <th>Favorite<span>*</span></th> <td> <span id="checkbox"> <label for="f1"><input type="checkbox" id="f1" name="fav" value="f1">books</label> <label for="f2"><input type="checkbox" id="f2" name="fav" value="f2">music</label> <label for="f3"><input type="checkbox" id="f3" name="fav" value="f3">game</label> <label for="f4"><input type="checkbox" id="f4" name="fav" value="f4">study</label> <label for="f5"><input type="checkbox" id="f5" name="fav" value="f5">fishing</label> </span> </td> </tr> </tbody> </table> </fieldset> <p class="submit"><input type="submit" value="Submit" class="button" /></p> </form> </div> </body> </html>
- ベストアンサー
- JavaScript
javascriptによる計算
テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>
- ベストアンサー
- JavaScript

記入内容のチェックについて

記入内容のチェックについて