• ベストアンサー

JavaScriptのFormについてだと思うのですが

私は、仕事上初めてJavaScriptに触れて戸惑っております。 それは、おそらくJavaScriptの記述上の問題だとは思うのですがよくわかりません。確認のダイアログボックスで、保存とキャンセルのボタンを表示させて、「保存」ならそのままデータベースにデータを落として、「キャンセル」なら、データを落とさないという手順でプログラミングしたいのですが、「キャンセル」を選んでも、データがデータベースに落ちてしまいます。どなたかよろしくお願いします。 今、テストでは有りますが、以下のようにプログラミングしています。 <html> <head> <title>test</title> <SCRIPT LANGUAGE="JavaScript"> <!--JavaScript function myEnter(){ myRet = confirm("データを保存してもよろしいですか？"); if (myRet == true) alert("保存されました"); else alert("再確認してください"); } // --> </script> </head> <body> <form action="insert.cfm" method="post"> testname:<input type="text" name="testname"> <br> testday:<input type="text" name="testday"> <br> <input type="submit" value="保存" onClick="myEnter()"> <br> <input type="reset" value="reset"> </form> </body> </html> ちなみに、<form action="insert.cfm">というのは、ColdFusionのファイルです。よろしくお願いします。

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

  • ベストアンサー
  • a-kuma
  • ベストアンサー率50% (1122/2211)
回答No.2

confirm()の結果によらず submit されてしまうから、ですかね。 まず、「保存」のボタンのタイプを "submit" ではなく "button" にして、 フォームに名前（仮に "myForm" という名前とします）をつけて、最後に 関数 myEnter() を function myEnter() { 　　if (confirm("データを保存してもよろしいですか？")) { 　　　　document.myForm.submit() 　　} else { 　　　　alert("再確認して下さい") 　　} } って感じにする、で、どうでしょうか？

obahiro
質問者

お礼

早速のお返事ありがとうございます。いろいろなホームページでサンプルを探してみたのですがうまくいかず困っていました。ほんとに助かりました。フォーム名をつけて、条件が真の時だけにsubmitを使い分けるために、保存ボタンをbuttonにするということですね。私なりの解釈になっているかも(^^;)しれませんが助かりました。ありがとうございます.

その他の回答 (2)

  • a-kuma
  • ベストアンサー率50% (1122/2211)
回答No.3

あ、inoue64 さんの方が簡単　(^^; もっと単純に、こうも書けます。 <input type="submit" value="保存" onClick="return confirm('データを保存してもよろしいですか？')">

  • inoue64
  • ベストアンサー率29% (334/1115)
回答No.1

else{ alert("再確認してください"); return false; } だと思います。

obahiro
質問者

お礼

早速のお返事ありがとうございます。プログラミングにもやはりいろいろとパターンがあるのですね。改めて勉強になりました。今、試しに教えていただいた様にしてみたら、きちんと動作してくれました。ほんとにありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. データベース
  4. その他(データベース)

関連するQ&A

  • javascriptでのアラート表示

    javascriptで大変困っております。 ラジオボタン・テキストエリアにまたがったチェックアラートをだしたいのですが、うまくいきません。 <script> function form_check(f) { if (f.Q1.value == "") { alert("・未記入です！"); return false; } ・ ・ ・ if (f.Q6.value == "") { alert("・名前が未記入です！"); return false; } else return true; } function reset_conf() { if (confirm("フォーム内容をリセットします！\n\nよろしいですか？")) return true; else return false; } </script> -------- <FORM ACTION="hogehoge.cgi" METHOD="POST" onSubmit="return form_check(this)"> 教育:<INPUT TYPE="radio" NAME="Q1" VALUE="OK"> テスト:<INPUT TYPE="radio" NAME="Q2" VALUE="OK">　 アンケート:<INPUT TYPE="radio" NAME="Q3" VALUE="OK"> AAA:<input name="Q4" type="text" /> BBB:<input name="Q5" type="text" /> CCC:<input name="Q6" type="text" /> <INPUT TYPE="hidden" NAME="number" VALUE="6"> <INPUT TYPE="submit" NAME="answer" VALUE="送信する"> <INPUT TYPE="reset" NAME="reset" VALUE="リセット"> </FORM> </form> ------- テキストエリアのアラートチェックは出来ない状態です。 すべてにチェックまたは、テキスト入力がされていないと送信できないようにしたいのです。 どうしたらよいでしょうか？

  • javascriptで別ファイルで変数を取得する。

    A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。 アラートは表示されるのですが、入力欄に何を打っても、　namae と出てしまいます。変数に何も入ってないようです。 これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか？ 〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>

  • JavaScriptでアンケートを作成.。

    JavaScriptでアンケートを作成しました。 ＩＥ6.0で送信ボタンを押すとメール画面がでて、アンケート内容が送信できません。 宜しくお願いします。JavaScriptは有効になっています。 <form METHOD="POST" ACTION="mailto:XXX@***.ne.jp?Subject=XXXXX" ENCTYPE="text/plain" onSubmit="alert('ご協力ありがとうございます。')"> ■XXXアンケート： <select NAME="XXXアンケート"> <option VALUE="XXXますか？">XXXますか？ <option VALUE="・ほとんどない ">・ほとんどない </select><br> <br> ■XXXの感想：<br> <input TYPE="radio" NAME="XXXの感想" VALUE="XXX">XXX <input TYPE="radio" NAME="XXXの感想" VALUE="XXX-1">XXX-1 <br><br> ■XXXな異変：<br> <input TYPE="radio" NAME="XXXな異変" VALUE=">XXX感じ">感じ <input TYPE="radio" NAME="XXXな異変"VALUE="XXXに痛み">XXXに痛み <br><br> よろしければコメントをどうぞ。<br> <textarea NAME="よろしければコメントをどうぞ。" ROWS="6" COLS="25" WRAP="hard"> </textarea> <br> <input TYPE="submit" VALUE="メールを送る"> <input TYPE="reset" VALUE="やり直し"> </font> </form>

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信防止） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • Javascriptでformのmaxlengthは取得可能ですか？

    <form name=test> <input type=text name=test maxlength=10> </form> の場合の、maxlengthをJavascriptで取得する ことは可能でしょうか？

  • javascript ， form ， 配列

    javascript で form の配列要素の参照・値の設定について教えてください。 環境は Windows7 Home , IE8 です。 文字列クリックで、空いているtextboxに上から順に値を入れたく 下のようなソースを書いてみたのですが、 「'frm.item[...]'はNullまたはオブジェクトではありません。」 とおこられてしまいます。 js部 -------------------------------- function setval(xxx) { for(i=1;i<=10;i++){ if(!frm.item[i].value){ frm.item[i].valu = xxx; break; } } } HTML部 ----------------------------- <form name="frm"> <input type="text" name="item[1]"> <input type="text" name="item[2]"> <input type="text" name="item[3]"> ・・・ <span onclick="setval('aaa')">aa<br></span> <span onclick="setval('bbb')">bb<br></span> <span onclick="setval('ccc')">cc<br></span> ・・・ ------------------------------------- 解決方法をご教示いただきたく。 宜しくお願い致します。

  • ＪＡＶＡＳＣＲＩＰＴでＩＮＰＵＴ

    ＨＴＭＬとＪＡＶＡＳＣＲＩＰＴとＪＳＰを使ってシステム構築をしております。 --------------- <html> <head> <SCRIPT Language="JavaScript"> <!-- function send() { alert("<input type=text name=name2>"); } //　--> </SCRIPT> </head> <body> <form onSubmit="send(); return false;"> <input type=text name=name1> <input type=submit> </form> </body> </html> --------------- 上記のコードでやりたいことは、 submitボタンが押されたときにJAVASCRIPTを呼び出し JAVASCRIPT上で文字を入力し次画面へ送信するような機能を作りたいと思っているのですが、本を見てもなかなか載っていません。 もしかしたらJAVASCRIPTだけではできないかもしれません。 ＪＳＰまたはＰＨＰで出来る機能でも良いので教えてください。

  • javascriptを勉強し始めました

    それで簡単なアンケートを作りたいと思い、入力フォームを作って間違えている箇所があれば確認ボタンを押したときに入力に誤りがある項目をアラートで出し、そのアラートに誤っている項目をそのアラート一つにまとめて出したいのですが、出ません。わかないので質問させていただきました。よろしくお願いします。ソースになります。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>課題</title> <script language ="javascript"> <!-- function datachk(){ if(document.form1.last.value == "") { alert("・氏名(姓)が入力されていません。"); }else{ if(document.form1.last.value.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ){ alert("・氏名(姓)は、全角文字のみで入力して下さい。"); }else{ if(document.form1.first.value == "") { alert("・名前(名)が入力されていません。"); }else{ if(document.form1.first.value.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ){ alert("・名前(名)は、全角文字のみで入力して下さい。"); } } } } } //--> </script> </head> <body> <div align="center"> 情報入力 </div><br> <br> 以下に、情報を入力してください。<br> <br> <form name = "form1"> ＊氏名（姓）： <input type = "text" name = "last" value = ""><br> （全角10字入力可）<br> ＊氏名（名）： <input type = "text" name = "first" value = ""><br> （全角10字入力可）<br> ＊性別： <input type = "radio" name = "men" value = "男">男 <input type = "radio" name = "women" value = "女">女<br> <input type="button" value="回答" onClick="javascript:datachk();"><br> </form> </body> </html>

  • formのボタンをsubmitしたときにアラート

    javascript で、formのボタンをsubmitしたときに アラートが出るようにしたいと思います。 下記のように作ってみましたが、うまく動きません。 どのようにすれば動くでしょうか? ご教示いただきたくお願いいたします。 <script type="text/javascript"> function(){ $('form1').submit(function(){ $.ajax({ type: 'POST', data: postData, url: 'buy.php', success: function(data){alert("購入できました");} error: function(){alert('購入できませんでした。再度お試しください');} }); return false; }); } </script> <form name="form1" id="form1" method="POST" name="form1" value="form1" action="buy.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="name" value="高橋" /> <input type="submit" value="Save"> <form/>

  • javascript form送信後の動作

    以下のスクリプトでiframeにデータは送信できているんですが、<input type="text">に入力したテキストが残ってしまいます。どのように記述したらうまくいくでしょうか？ <script type="text/javascript"> function send(){ var frm=document.txt_submit; frm.submit(); frm.reset(); } </script> <form name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" name="ctxt" size="20" value=""> <input type="button" value="送信" onclick="return send();"> </form>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する