メールフォームの送信制御方法と確認メッセージの表示方法
- メールフォームの送信制御方法と確認メッセージの表示方法について説明します。
- enterキーでの送信を制御するために、フォームのonsubmitイベントを利用します。
- 送信ボタンをクリックした際に確認メッセージを表示するために、window.confirmを使います。
- ベストアンサー
送信確認メッセージ及びenterで送信させない
いつもお世話になっております。 現在メールフォームを使用していていますが、下記のようにしたいと思います。 １、enterでも送信されないようにする。（送信ボタンを押した時のみ送信したい） ２、送信ボタンを押した時に確認メッセージを表示してからOKかキャンセルを選択していただく。 色々なサイトを参考に １、enterでも送信されないようにする <form action="***" method="***" onsubmit="return false;"> 入力欄１：<input type="text" name="st1" value=""><br> 入力欄２：<input type="text" name="st2" value=""><br> <input type="button" value="送信する" onclick="submit();"> </form> ２、送信ボタンを押した時に確認メッセージを表示してからOKかキャンセルを選択していただく。 <script type="text/javascript"> <!-- function check(){ if(window.confirm('送信してよろしいですか？')){ // 確認ダイアログを表示 return true; // 「OK」時は送信を実行 } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 return false; // 送信を中止 } } // --> </script> </head> <body> <form method="POST" action="example.cgi" onSubmit="return check()"> <p>お名前：<input type="text" name="field1" size="25"></p> <p><input type="submit" value="送信"></p> </form> で試しました。片方だけなら作用しますが、両方を組み合わせると1の「enterでも送信されないようにする」のみだけ作用します。 私はjavaを初めて使用するため全く知識がございません。 この二つを併用することは不可能なのでしょうか？ 参考させていただきましたサイト http://okwave.jp/qa/q778438.html http://okwave.jp/qa/q867257.html http://www.tohoho-web.com/lng/199911/99110147.htm http://allabout.co.jp/gm/gc/23972/2/ http://www.koikikukan.com/archives/2012/01/18-022222.php あまり難しいようでしたらどちらか一方を優先させたいと思います。 ご指導のほどよろしくお願いします。
- sabarcab
- お礼率89% (35/39)
- Java
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
んー onSubmit、onClickがどういう意味なのかを理解していないのね だからこんな頓珍漢なコードになるんだわ それはいずれ勉強してもらうとして そうね 最初に答えを書いちゃいましょうか <script type="text/javascript"> <!-- function check(){ if(window.confirm('送信してよろしいですか？')){ // 確認ダイアログを表示 document.forms[0].submit(); // 「OK」時は送信を実行 } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 // 送信を中止 } } // --> </script> <form method="POST" action="example.cgi"> <input type="button" value="注文" onclick="return check()" /> <input type="reset" value="取消" /> </form> どうしてこうなるのかは頑張って勉強してみてね
その他の回答 (2)
- askaaska
- ベストアンサー率35% (1455/4149)
実際にどういう実装しているのかわからないので アドバイスのしようがないわ
お礼
askaaska 様 度々のコメント有難うございます。 現在試行錯誤でたどり着いたのが <script type="text/javascript"> <!-- function check(){ if(window.confirm('送信してよろしいですか？')){ // 確認ダイアログを表示 return true; // 「OK」時は送信を実行 } else{ // 「キャンセル」時の処理 window.alert('キャンセルされました'); // 警告ダイアログを表示 return false; // 送信を中止 } } // --> </script> <form method="POST" action="example.cgi" onSubmit="return check()"> <input type="button" value="注文" onclick="return check()" /> <input type="reset" value="取消" /> です。 最初の質問に記載したものを組み合わせてみただけなので的外れかもしれませんが現状はここまでしかたどり着けません。 すみませんが現状の問題点をご指摘ください。
- askaaska
- ベストアンサー率35% (1455/4149)
それぞれが なぜそういう動きになるのかを理解すれば おのずと答えは見えてくるものだけど １．がEnterで送信されない理由 送信ボタンがｔｙpe=submitのとき、Enterで送信されてしまう だから送信ボタンをtype=buttonにして、ボタンクリックイベントでformをsubmitするようにした ２．送信前に確認を表示できる理由 formがsubmitされるタイミングで呼び出されるイベントonSubmitで 確認ダイアログを出すJavaScriptをよんでいる じゃあどうすればいいか 送信ボタンをtype=buttonにして、ボタンクリックイベントで 確認ダイアログを出すJavaScriptを呼び そのJavaScriptの中で確認ダイアログで「OK」されたときに formをsubmitすればいい それだけ
お礼
askaaska 様 早速のご教授有難うございます。 自分なりに色々試してみました。 <form method="POST" action="example.cgi" onSubmit="return check()"> <input type="button" value="送信する" onclick="return check()" /> クリックで確認ログがでますが、送信が出来ないところで躓いてます。 多分ここがJavaScriptの中でformをsubmitするという事でしょうか？ JavaScript form submitの組み合わせで検索したサイトを読んでも基礎がない為理解できませんでした。 もう少し検索して勉強してみます。 有難うございました。
補足
未だ解決できておりません。 どなたかお知恵をお貸しください。
関連するQ&A
- enterについて２
<form onsubmit="openWin0003( '2','./test.html')";return false;"> <INPUT TYPE="TEXT" NAME="no" SIZE="10" MAXLENGTH="8"> </form> でenterキーを押した時にfunctionを実行することは 成功したのですが、 このときにwindow.openした時に、すでに開かれているブラウザまで読みこんでしまうのですが、これを回避するにはどうすればいいのでしょうか？
- ベストアンサー
- JavaScript
- 複数のフォームを一括で送信することは可能ですか？
それらしきキーワードで検索しても出てこないので 頓珍漢な質問をしてるかもしれませんが、ご容赦ください。 送信ボタンは同一フォーム内のデータを送信できると思うのですが 複数のフォームを１つの送信ボタンで送信することは可能でしょうか？ 例えば、下の２つのフォームを１つの送信ボタンでデータ送信することは可能でしょうか？２つのフォームを１つに合わせるというのは なしでお願いいたします。 <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>お名前 ：<input type="text" name="name" size="40"></p> <p> メッセージ： <br> <textarea cols="50" rows="5" name="message"></textarea> </p> <p><input type="submit" value="送信する"></p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>お名前 ：<input type="text" name="name" size="40"></p> <p> メッセージ： <br> <textarea cols="50" rows="5" name="message"></textarea> </p> <p><input type="submit" value="送信する"></p> </form>
- ベストアンサー
- HTML
- ＰＨＰでフォームからの送信
ＰＨＰでフォームからデータを送信する方法について教えてください。例えばPHPファイルの中に下の様にフォームを作成して、送信ボタンを２つ作ります。一つのボタンをクリックすると全てのフォームの情報が送信されてしまいますが、独立して送信できるようにはできないのでしょうか。簡単にでもできるかできないかを教えていただけましたら、あとは自分でなんとかがんばりますので、どなたか教えていただけれますと幸いです。宜しくお願いします。 <form action="abc.php" method="post"> AAA：<input type="text" name="simei"> BBB：<input type="password" name="pass"> <input type="submit" value="送信"> </form> <form action="abc.php" method="post"> CCC：<input type="text" name="simei"> DDD：<input type="text" name="pass"> <input type="submit" value="送信"> </form>
- ベストアンサー
- PHP
- javascript フォームについて
javascriptでフォームを作ったのですが、複数フォームの空白をチェックするにはどのようなプログラムにすればよろしいでしょうか？ onsubmit="return chk1(this)でフォーム送信が押されたときにチェックを行おうと考えているのですが そのときのchk()の中身やif文の条件がわからないのです。 どのようにすれば上手くいくでしょうか？ 回答よろしくお願いします。 ソースは以下のとおりです。 <script language="javascript"> function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } function chk1(frm){ if(frm.elements["txt1"].value==""){ alert("解答欄に空白があります"); /* FALSEを返してフォームは送信しない */ return false; }else{ /* TRUEを返してフォーム送信 */ return true; } } </script> <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()" onsubmit="return chk1(this)">
- ベストアンサー
- JavaScript
- input type="image"の時、enterでsubmitされない方法
http://oshiete1.goo.ne.jp/kotaeru.php3?q=115527 で、「enterでsubmitされない方法」が記載されているのですが、 input type="image"の時、うまく反映されません。 formタグには以下のように、 <form name="form1" method="post" action="" onSubmit="return false"> 送信ボタンは以下のように設定しています。 <input type="image" src="***.gif" onClick="submit();"> ちなみにinput typeを"button""submit"にすると反映してくれますが "image"ではうまくいきません。 ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
- エンターでsubmitさせたい
テキストボックスが複数あるようなフォームを作っているのですが、 submitボタンを表示させず、エンターのみで動作するものを作りたいと思っています。 stype="display:none;"で表示を消すことができたのですが、 エンターを押しても動作しません。 ご存知の方教えて頂けると大変助かります。 <form method="post"> <input type="text" size="10" name="obj1"> <input type="text" size="10" name="obj2"> </form> <? print $_POST['obj1']."<br>"; print $_POST['obj2']."<br>"; ?>
- ベストアンサー
- PHP
- ENTERキーを無効にしたいのですが教えて下さい。その２
以前、以下の方法を教えていただいてうまくいったのですが、 ボタンを画像ボタンにし、javascriptで、押したら沈むボタンを 作成したところ、ENTERキーが無効にならなくなりました。 ENTERキーを押されて送信されないことが先決なので、 どなたかご伝授いただければと思います。 以前のスクリプト <html> <head> <title>親</title> <script type="text/javascript"> <!-- window.name = (new Date()).getTime(); function make_newwin(f) { f.target = window.name + "_ko"; var w = window.open("about:blank", f.target, "スタイル設定"); w.focus(); f.submit(); } //--> </script> </head> <body> <form action="/cgi-bin/test-check.cgi" method="post" onSubmit="return false"> <input type="button" value="送信" onClick="make_newwin(this.form)"> </form> </body> </html> こちらで、 <input type="button" value="送信" onClick="make_newwin(this.form)"> これを以下のようにtypeを変えてしまったところ、効かなくなりました。 <input type="image" SRC="new.gif" ALT="新規登録ボタン" NAME="botan_new11" WIDTH="78" HEIGHT="26" BORDER="0" ID="botan_new" border=0 onMouseOver="MM_swapImage('botan_new11','','botan_new_sw.gif',1)" onMouseOut="MM_swapImgRestore()" onClick="make_newwin(this.form)"> これは、無理な話なのでしょうか？教えて下さい。
- ベストアンサー
- JavaScript
- 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
- 入力制限アラートと送信制限
以下のフォームが合った場合に (1),や@や*、バカ等の文字など文字入力があった場合にアラートで表示する方法がわかりません。参考になるようなサイトやアドバイスをお願いします。 また、 同時にsubmitボタンが2度押しできないようにするにはどうしたらよいでしょうか？ <form action="./***" method="POST" name="check"> <input type=text name=data1 value="０" size=30> <input type=text name=data2 value="０" size=30> <input type=text name=data3 value="０" size=30> <input type=submit value="送信する"> </form>
- 締切済み
- JavaScript
- javascriptで二重送信防止
javascriptでの二重送信防止（submitボタンの無効化）ができません。 【HTML】 <form name="fm" method="post" onsubmit="return dclk()"> <input type="submit" name="smt" value="送信" /><br /> </form> 【javascript】 function dclk(){ document.fm.smt.disabled = true; return false; } これだと、サブミットボタンを押すとボタンが無効化され、その後、送信自体が キャンセルさるのですが、これだと送信自体ができないので意味がありません。 これはなんとか意味はわかります。 そこでreturn falseを省くと送信されると同時にサブミットボタンが無効化されるのかな？と思ったら、 今度は送信されるようですが送信されたと同時にボタンが無効化されません。 どうすべきでしょうか？ ネットで調べたらいろいろな方法があるようで、上記のHTMLとjavascriptのコードで なんとかならないでしょうか？
- ベストアンサー
- JavaScript
お礼
askaaska 様 おはようございます。 度々のアドバイス有難うございます。 最初にいただいた そのJavaScriptの中で確認ダイアログで「OK」されたときにformをsubmitすればいい という部分が出来ていなく、 onSubmit="return check()"とonclick="return check()"を2重に記載していることが問題なのですね。 今日仕事から帰ったら自分のコードとアドバイス頂きましたコードをにらめっこしながら勉強します。 まだ自分で理解していないので完全に解決とはいきませんが、この質問を放置しておくのも無責任ですので一旦締め切ることにします。 今日、明日で勉強してまだ出来ないようでしたら新たに出来ない部分で質問をしてみたいと思います。（出来るだけそのようなことがないように勉強します） 色々と有難うございました。