• ベストアンサー

フォームの入力チェックをすると既に入力した項目が消える

実は過去のQ&Aの中でご紹介されていた ホームページを拝見させて頂いたのですが、 残念ながら私の応用力が足りず、 上手く作ることが出来ません。 下記のように書いてみたのですが、 これでは未入力のメッセージにOKを押すと その前に入力したものが全て消えてしまいます。 何方か、正しい書き方をご教示下さいますよう 宜しくお願い申し上げます。 <script language="JavaScript"> <!-- function checkForm(){ if(document.form1.chk1.checked == false && document.form1.chk2.checked == false) { alert('チェックなし'); return false; } { flag = 0; for ( i = 0 ; i < document.form1.radiobtn.length ; i++){ if (document.form1.radiobtn[i].checked){ flag = 1; } } if (!flag){ alert('ラジオなし'); return false; } if(document.form1.sel.selectedIndex == 0){ alert('メニューなし'); document.form1.sel.focus(); return false; } if(document.form1.bun.value == ""){ alert('文字なし'); document.form1.bun.focus(); return false; } } return true; } //--> </script>

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

  • ベストアンサー
回答No.3

消える理由は、フォームactionのリンク先を設定せずにローカルで試しているためではないでしょうか? リンク先を指定していしない場合は、もう一度今見ているページをロードするため消えているように見えてしますということです。 こんな回答でよろしかったでしょうか? とりあえずはソースにエラーはないとおもわれます。

toriesky
質問者

お礼

AquaSkyMoon様 2度もお答え頂いて、大変感謝しております。 #3のご回答で全て解決致しました。 form action に送り先を指定すると、 ちゃんと消えずに書き込めました\(^o^)/ 分かってみると単純なことでしたが、 どうしても分からなくて困っていました。 今回のご回答のおかげで思うとおりのフォームが作れます。 本当にどうもありがとうございました。

その他の回答 (4)

回答No.5

#4を訂正させてください。 すみません、すっごい寝ぼけてました。 >2回onsubmitしているから、おかしいのではないでしょうか? ↑これはいいとして、対応策は、間違ってます。 submitボタンのonClickイベントを削除 で、いけると思います。

toriesky
質問者

お礼

kappa_neko様 わざわざ2回もご回答ありがとうございました。 onClick="checkForm()" を消して <input type="submit" value="送信">にするということですよね? 残念ながらこれだけでは上手く動かず、 form actionに送り先を指定すると ちゃんと動作してくれました。 結局問題は送り先を指定していなかったことのようです。 >2回onsubmitしているから、おかしいのではないでしょうか? というご指摘、確かにそうですよね! これに関しては全然疑問に思いませんでした。 もっといろんなサイトや参考書を見て勉強してみます。 本当にありがとうございました。

回答No.4

2回onsubmitしているから、おかしいのではないでしょうか? 1. formタグのonSubmitを削除 & checkFormファンクション内で、 documnt.form1.submit(); (return trueではなくて。) を追加。 2. submitボタンを普通のボタンにする。 ↑どっちかで解決すると思います。 (すみません、試したわけではないです。)

  • kaiu
  • ベストアンサー率20% (65/315)
回答No.2

少しみてみましたが 一度クッキーで内容を取得するとよろしいかと。 先の回答の方がいらっしゃるので、 詳細はお任せします。

toriesky
質問者

お礼

kaiu様 ご回答ありがとうございました。 単純に、form action に送り先を指定することで 解決することができました。 >一度クッキーで内容を取得するとよろしいかと。 そういうやり方もあるのですね。 と言っても、具体的なやり方は調べないとわからないという、 本当にまだまだド素人のレベルなので、 上級すぎる技かもしれませんが(^^ゞ でも、貴重なお時間にわざわざご回答下さったこと、 本当に感謝致します。 ありがとうございました。

回答No.1

しっかりと内容を見せてもらっていないのと、 フォームのHTMLがあれば分かりやすいのですが、、、 とりあえず1点 最初のほうのIF分でカッコがあまってるように思えるのですが、確認していないのでまちがってたらすいません。 >function checkForm(){ if(document.form1.chk1.checked == false && document.form1.chk2.checked == false) { alert('チェックなし'); return false; } <<-ここに「else」がはいるのでは?? { flag =

toriesky
質問者

お礼

早速のご回答ありがとうございます。 フォームの部分は文字数の関係で投稿できなかったのですが、 下記のようにしております。 <body> <form name="form1" method="post" action="" onSubmit="return checkForm()"> <input type="checkbox" name="chk1">1 <input type="checkbox" name="chk2">2<br> <input type="radio" name="radiobtn">1 <input type="radio" name="radiobtn">2<br> <select name="sel"> <option>▽選択</option> <option value="1">項目1</option> <option value="2">項目2</option> </select><br><br> <input type="text" name="bun"><br> <input type="submit" value="送信" onClick="checkForm()"> </form> </body> また、ご指摘の通りelseを入れてみたのですが やはり上手くいきませんでした。

toriesky
質問者

補足

チェックボックスとラジオボタンのvalueが抜けてました。 【訂正後】 <body> <form name="form1" method="post" action="" onSubmit="return checkForm()"> <input type="checkbox" name="chk1" value="1">1 <input type="checkbox" name="chk2" value="2">2<br> <input type="radio" name="radiobtn" value="1">1 <input type="radio" name="radiobtn" value="2">2<br> <select name="sel"> <option>▽選択</option> <option value="1">項目1</option> <option value="2">項目2</option> </select><br><br> <input type="text" name="bun"><br> <input type="submit" value="送信" onClick="checkForm()"> </form> </body>

関連するQ&A

  • チェックボックスの選択チェック

    ラジオボタンの選択チェック、セレクトボタンの選択チェックのあとにチェックボックスの選択チェックをしたいのですが、どのように入れればよいのでしょうか。教えてください。 ↓参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++) if(document.form1.seibetu[i].checked)flag=false; } if(flag){ alert('性別が選択されていません'); return false; } if(document.form1.nenrei.value=="")flag=true; if(flag){ alert('年齢が選択されていません'); return false; } if( document.form1.Q1.length){ flag=1; var i; for(var i=0; i<document.form1.Q1.length; i++) if(document.form1.Q1[i].checked)flag=false; if(flag){ alert('Q1が選択されていません'); return false; } else {★★★ここに入れたい★★★   ;} } }

  • フォームの入力チェックについて

    下記のプログラムで、チェックボックスや、ラジオボタンの 入力チェックを行うと、 値自体は、$_POST['radio_check']にて取得できるのですが、Javascriptコンソールにて objElm has no propertiesと 出てしまいます。 外部ファイル部分 function requiredRadioCheck(objElm,strErr) { flag=false; for(i=0;i<objElm.length;i++){ if(objElm[i].checked){flag=true;} } if(!flag){ return strErr + "が入力されていません。 \r"; }else{ return ""; } } html部分 function chk(){ strErr=""; strErr+=requiredCheck(strErr+=requiredRadioCheck(document.Form.radio_check.value,"ラジオボタン"); strErr+=numberTypeCheck if(strErr==""){ return true; }else{ window.alert(strErr); return false; } }

  • ラジオボタンとセレクトボックスの選択チェック

    ラジオボタン、セレクトボタンの選択チェックをしたいのですが 同時にチェックする場合どうすればよいのでしょうか。 失敗策ですが、参考までに↓ function check() { var flag=0; if( document.form1.seibetu.length){ flag=1; var i; for(i=0; i<document.form1.seibetu.length; i++){ if(document.form1.seibetu[i].checked){ flag=0; break; } } } else{ if(!document.form1.seibetu.checked){ flag=1; } } if(flag){ window.alert('性別が選択されていません'); return false; } else{ return true; } if(document.form1.nenrei.options[document.form1.nenrei.selectedIndex]. value==""){ flag=1; } if(flag){ window.alert('年齢が選択されていません'); return false; } else{return true; } }

  • htmlフォームでチェックボックスの入力漏れを警告

    チェック必須にしたいのですが、出来ません。 以下のようにnameの所に name="kurasu[1]" と入れています。 他の処理もあるので、そのような入れ方をしています。 <input type="checkbox" name="kurasu[1]" id="kurasu1" value="1" /> <input type="checkbox" name="kurasu[5]" id="kurasu5" value="5" /> <input type="checkbox" name="kurasu[8]" id="kurasu8" value="8" /> としてあるので、以下のように if(!document.form.kurasu[1].checked && !document.form.kurasu[5].checked && !document.form.kurasu[8].checked){ として、アラートを出したいのですが、出来ません。 やはり kurasu[1] では出来ないでしょうか? 他のものは以下で処理しています。 <script type="text/javascript"> function check(){ var flag = 0; var errorMes = new Array(); var chkCount = 0; if(!document.form.tel.checked){ // 「電話番号」の記入をチェック flag = 1; errorMes.push("「電話番号」をご記入ください。\n"); } if(flag){ var n = errorMes.length; var errorStr =""; for(i=0;i<n;i++){ errorStr+= errorMes[i]; } window.alert(errorStr); // 記入漏れがあれば警告ダイアログを表示 return false; // 送信を中止 }else{ return true; // 送信を実行 } } </script>

  • 複数のラジオボタンの選択チェック

    Q1とQ2の2問があり、ラジオボタンで回答を選択するようにしていますが、 ラジオボタンを選択しなかった場合、選択を促すようメッセージを表示させるようJavaScriptで以下のように作成してみましたがうまくいきません。 Q1とQ2の両方を選択しなかった場合、「Q1が選択されていません」とメッセージが表示されますが、Q1だけを選択してQ2を選択しなかった場合はメッセージが表示されません。 いろいろ調べてみたのですが、function checkの使い方に問題があるのでしょうか? function check(){ var flag = 0; if(document.form1.Q1.length) { flag = 1; var i; for(i = 0; i < document.form1.Q1.length; i ++){ if(document.form1.Q1[i].checked){ flag = 0; break; } } } if(flag){ window.alert('Q1が選択されていません'); return false; } else{ return true; } var flag = 0; if(document.form1.Q2.length) { flag = 1; var i; for(i = 0; i < document.form1.Q2.length; i ++){ if(document.form1.Q2[i].checked){ flag = 0; break; } } } if(flag){ window.alert('Q2が選択されていません'); return false; } else{ return true; } }

  • フォーム入力チェックの効率のよいソース

    こんにちは、おせわになります。 アンケートを作っています。 内容が何項目かあり、そのうちの多くがラジオボタンによるものです。 入力チェックを行う際に下記のような形で行っておりますが、 ひとつの項目につき、ラジオボタンが10個ほど用意されてるものもあり、 10個分 document.forms.reason[0].checked==false) && と付け足していくのは効率が悪いとおもいます。 簡潔にソースを書くにはこの部分をどう書けばいいか教えてください。 多分forを使うのかなとは思いますが よくわかりません。 それと念のため補足ですが、ひとつの関数の中にすべてのチェックを入れたいので 性別のラジオボタン分の関数、年代のラジオボタン分の関数のように 分けずに書いています。 function aaa() { if ((document.forms.reason[0].checked==false) && (document.forms.reason[1].checked==false)){ alert("ボタンが未選択です"); return false ; } if ((document.forms.sei[0].checked==false) && (document.forms.sei[1].checked==false)){ alert("ボタンが未選択です"); return false ; } if ((document.forms.age[0].checked==false) && (document.forms.age[1].checked==false)&& (document.forms.age[2].checked==false)&& (document.forms.age[3].checked==false)){ alert("ボタンが未選択です"); return false ; } ・・・・・・・・・・・・・・・つづく } //--> </script> よろしくお願いします!

  • 入力チェックをしたいです。

    結構初心者です。 フォームに入力された内容をチェックしたいので、まず下記のように書きました。 <script Language="JavaScript"> <!-- function submitCheck(){ var flag = 0; // 設定開始(必須にする項目を設定します) if(document.insert.MatterID.value == ""){ flag = 1; } else if(document.insert.name.value == ""){ flag = 1; } else if(document.insert.Correspondencedate.value == ""){ flag = 1; } if(flag){ window.alert('必須項目に未入力があります。'); // チェックされていない場合は警告ダイアログを表示 return false; // 送信を中止 } else{ return true; // 送信を実行 } } --> </script> で、これにチェックボックスの入力チェックも含めたいのですが、ただ else if(document.insert.bld_ReceiptNo.checked){ flag = 1; } こうするだけではダメなのですね;; どうすればいいかお知恵を拝借できませんでしょうか。

  • お問い合わせフォームを作成しているのですがジャバがうまく動いてくれません。

    お問い合わせフォームを作成しているのですが(phpとscriptです)、 script部分がうまく動いてくれません。 必須項目が名前、ふりがな、ラジオボタンで選択項目3つあります。 名前、ふりがな部分を入力せずに送信を押すとアラートがなりますが、 ラジオボタン部分がIEでは一つも選択しないとアラートが正常に機能しますが、ファイヤーフォックスでは送信されてしまいます。 下記にscript部分をコピペしておきますのでお気づきの点がありましたら教えて下さい。 <script LANGUAGE="javascript"> function CheckInput(){ /*チェック項目*/ var object = document.form_1.name.value; if(object == ""){ alert("お名前を入力してください"); return false; } /*チェック項目*/ var object = document.form_1.furigana.value; if(object == ""){ alert("ふりがなを入力してください"); return false; } /*チェック項目*/ var check_flag = 0; //チェックボックスの配列の数だけループ(1個目の配列チェック) for(var i = 1 ;i <= 3 ;i++){ //1個以上のチェックがあればフラグを変更 if(document.all("renraku["+i+"]").checked == true){ check_flag = 1;} } //フラグが0なので1個以上のチェックが無い if(check_flag == 0){ alert("ご連絡方法を選択して下さい") return false; } } </script> また、script部分ではなく、他の原因等が考えられましたら教えていただきたく思います。 宜しくお願い致します。

  • フォームのチェックについて

    今、フォームの送信ボタンを押すとチェックする 関数を作成しております。 function restChar() { if(10000 < document.F1.ご質問内容.value.length) window.alert("ご質問内容は全角5,000字以内でお願いします"); } function check(){ var flag = 0; if(document.F1.name.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.F1.kana.value == ""){ // 「パスワード」の入力をチェック flag = 2; } else if(document.F1.mail.value == ""){ // 「コメント」の入力をチェック flag = 3; }      else if(document.F1.ご質問内容.value == ""){ // 「コメント」の入力をチェック flag = 4; } if(flag == 1){ window.alert('お名前を入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 2){ window.alert('フリガナを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 3){ window.alert('メールアドレスを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 }      if(flag == 4){ window.alert('ご質問内容を入力して下さい'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } fOBJ = document.F1.mail.value; check = /.+@.+\..+/; if (!fOBJ.match(check)){ window.alert("メールアドレスが正しくありません"); return false; // 送信を中止 } fOBJ = document.F1.ご質問内容.value.length; if(10000 < fOBJ){ window.alert("ご質問内容は全角5,000字以内でお願いします"); return false; // 送信を中止 } return true; // 送信を実行 } こんな感じです。 1-4のチェックは問題ないのですが、 アドレスと文字数のチェックは、一度は ダイアログがでますが、連続で押すと通ってしまいます。 何がわるいのでしょうか?

    • ベストアンサー
    • Java
  • フォームのチェックボックスの入力チェック JavaScriptの添削依

    フォームのチェックボックスの入力チェック JavaScriptの添削依頼 フォーム制作しています。 複数選択可能なチェックボックスの入力チェックを行いたいのですが、 動かず困っています。 JavaScriptの添削をお願いします。 他のチェック項目との兼ね合いもあり、 JavaScriptはform.jsに記載したいこと、 チェックボックスが未選択の場合は、flag に 1 を入れること、 チェックボックスの数が多いため、それぞれ違う name を振る方法は避けたいこと、 が制作の条件になっています。 ■index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> </head> <html> <head> <!-- *** javascript *** --> <script src="form.js" type="text/javascript" charset="utf-8"></script> </head> <body bgcolor="#ffffff"> フォームの入力で未入力のチェックを行います。 <form method="post" onSubmit="return chkform()" name="form1"> <input type="checkbox" name="chk[]" value="OK">OK <input type="checkbox" name="chk[]" value="NG">NG <input type="checkbox" name="chk[]" value="GOOD">GOOD <br> <br> <input type=submit value=" 送信 "> <input type=reset value=" 取消 "> </form> </body> </html> ■form.js function chkform() { var flag = 1; var list=document.getElementsByName(chk); for(var i=0;i<list.length;i++){ if(list[i].checked){ flag = 0; break; } } if(flag == 1){ window.alert('チェックボックスが未選択です'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } else { return true ; } }

専門家に質問してみよう