• ベストアンサー

formについて

JavaScriptを使ったアンケートについて <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>アンケート</title> <script type="text/javascript"> function Conf(){ a = document.forms[0].Email.value; if(a.match(/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/)==null){ alert("間違っています"); } subWin=window.open("about:blank","form_data","width=300,height=300"); subWin.document.open(); subWin.document.write(a); subWin.document.close(); } </script> </head> <body> <form> <p>■メールアドレスを記入して下さい</p> <input type="text" name="Email" id="Email" size="40" /> <input type="button" value="確認" onClick="Conf()" /> </form> </body> </html> これだと、メルアドが間違っていますとalertが表示された後に、サブゥインドウが表示されてしまいます。 アンケートフォームを作りたくてJavaScriptを勉強中なのですが、メアドの入力が合っている場合のみサブゥインドウを表示させる方法が分からず、質問させて下さい。回答よろしくお願い申し上げます。

  • u2122
  • お礼率71% (125/176)

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

  • ベストアンサー
  • x_jouet_x
  • ベストアンサー率68% (162/236)
回答No.3

参考本を見ながらでも、ここまでJavaScriptが書ければ立派ですよ。 さて、新たに作成されたmain.jsですが、これはキレイに関数check()で書かれているので修正は簡単ですよ。 if文を使ってメールアドレスとURLチェックを行っている箇所 ---------- Email = mainF.elements[8].value; //Email if(Email.match(/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/)==null){ alert("メアドが間違っています"); } URL = mainF.elements[9].value; //URL if(URL.match(/^[a-z:.\/]+[a-zA-Z0-9_.\/]+html$|^[a-z:.\/]+[a-zA-Z0-9_.\/]+htm$/)==null){ alert("URLが間違っています"); } ---------- に下記のように return false; を追加しましょう。 ---------- Email = mainF.elements[8].value; //Email if(Email.match(/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/)==null){ alert("メアドが間違っています"); return false; } URL = mainF.elements[9].value; //URL if(URL.match(/^[a-z:.\/]+[a-zA-Z0-9_.\/]+html$|^[a-z:.\/]+[a-zA-Z0-9_.\/]+htm$/)==null){ alert("URLが間違っています"); return false; } ---------- return false; を追加することでメールアドレスやURLが正しくなかった場合、alertを表示してこの関数check()はfalseを返り値として返して終了します。 つまり、サブウィンドウ表示まで処理を進ませなくすることができます。

u2122
質問者

お礼

おおっ！！出来ました。ありがとうございました！出来ると楽しいですね。親切に教えて頂き、本当にありがとうございました！！

その他の回答 (2)

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.2

回答は #1 さんがしてくれているので、別案を。 適当に書いただけなので参考までに。 ======================================= <?xml version="1.0" encoding="Shift_JIS" ?> <!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-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>アンケート</title> <script type="text/javascript"> /*@cc_on@*/ function conf( evt ) { 　var form = /*@if(1) evt.srcElement; @else@*/ evt.target; /*@end@*/ 　var a = form.elements[ 'Email' ].value; 　if( !/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/.test( a ) ) { 　　alert( '間違っています' ); 　　/*@if(1) evt.returnValue = false; @else@*/ evt.preventDefault( ); /*@end@*/ 　} } </script> </head> <body> <form action="form_data.html" method="GET" onsubmit="conf( event );"> 　<div> 　　<p>■メールアドレスを記入して下さい</p> 　　<input type="text" name="Email" size="40" /> 　　<input type="submit" value="送信" /> 　</div> </form> </body> </html> ======================================= == form_data.html ===================== <?xml version="1.0" encoding="Shift_JIS" ?> <!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-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>アンケート</title> </head> <body> <script type="text/javascript"> /*@cc_on@*/ var m = location.search.match( /Email=([^&]*)/ ); document.write( decodeURIComponent( m[1] ) ); </script> </body> </html> ======================================= form_data.html は CGI でやりませう。

u2122
質問者

お礼

これは条件コンパイルって言うのですか？ちょっと私には難しいです。頑張って勉強します。回答ありがとうございました！

  • x_jouet_x
  • ベストアンサー率68% (162/236)
回答No.1

このままだとメールアドレスが正しくても正しくなくても、subWin=window.open("about:blank","form_data","width=300,height=300");以降の処理が実行されてしまいます。 メールアドレスのチェック結果によって、alert表示／サブウィンドウ表示のように処理を分けたい場合は、 if ( ... ) { } else { } 構文を使いましょう。 以下に修正したJavaScriptを貼っておきます。 ---------- <script type="text/javascript"> function Conf(){ a = document.forms[0].Email.value; if(a.match(/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/)==null){ alert("間違っています"); } else { subWin=window.open("about:blank","form_data","width=300,height=300"); subWin.document.open(); subWin.document.write(a); subWin.document.close(); } } </script>

u2122
質問者

補足

分かり易く回答下さり誠にありがとうございます。さらに質問したいのですが、 本を見ながら自分なりにプログラムを作ってみたのですが、 ＜＜main.js＞＞ function check(){ var aa = ""; NameN = mainF.elements[0].value; //氏名の値を抜き出す FameN = mainF.elements[1].value; //フリガナを書き出す for(i=2;i<4;i++){ //radioの値を取り出す a = mainF.elements[i].checked; if(a==true){ d = mainF.elements[i].value; } } for(j=4;j<8;j++){ //checkboxの値を取り出す c = mainF.elements[j].checked; if(c==true){ e = mainF.elements[j].value; aa = aa+e+"　"; } } f = mainF.age.options[mainF.age.selectedIndex].text; //年齢を取り出す Email = mainF.elements[8].value; //Email if(Email.match(/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/)==null){ alert("メアドが間違っています"); } URL = mainF.elements[9].value; //URL if(URL.match(/^[a-z:.\/]+[a-zA-Z0-9_.\/]+html$|^[a-z:.\/]+[a-zA-Z0-9_.\/]+htm$/)==null){ alert("URLが間違っています"); } subWin=window.open("about:blank","form_data","width=550,height=700"); subWin.document.open(); subWin.document.write(NameN,"<br>"); subWin.document.write(FameN,"<br>"); subWin.document.write("性別：",d,"<br>"); subWin.document.write("好きなデザート：",aa,"<br>"); subWin.document.write("年齢：",f,"<br>"); subWin.document.write("Email：",Email,"<br>"); subWin.document.write("URL：",URL,"<br>"); subWin.document.close(); } ＜＜html＞＞ <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" type="text/css" href="style_body.css" media="all" /> <script type="text/javascript" src="main.js" charset="UTF-8"></script> <title>Form</title> </head> <body> <form action="./check.cgi" method="get" id="mainF" name="mainF" onsubmit="return check()"> <p>■名前を記入して下さい（全角）</p> <input type="text" name="MynemeN" id="MynemeN" size="15" value="名前" /> <p>■フリガナを記入して下さい（全角フリガナ）</p> <input type="text" name="MynaeR" id="MynaeR" size="15" value="名前" /> <p>■性別は？</p> <label><input type="radio" name="sex" value="男" />男性</label> <label><input type="radio" name="sex" value="女" />女性</label> <p>■好きなデザートは？（複数選択可）</p> <label><input type="checkbox" name="like" value="cake" /> ケーキ</label> <label><input type="checkbox" name="like" value="purin" /> プリン</label> <label><input type="checkbox" name="like" value="pahue" /> パフェ</label> <label><input type="checkbox" name="like" value="ais" /> アイス</label> <p>■年齢は？</p> <select name="age" size="4"> <option disabled="disabled">新生児</option> <option>10代</option> <option>20代</option> <option selected="selected">30代</option> <option>40代</option> <option>50代</option> </select> <p>■メールアドレスを記入して下さい</p> <input type="text" name="Email" id="Email" size="40" value="メルアド" /> <p>■URLを記入して下さい</p> <input type="text" name="URL" id="URL" size="40" value="http://" /> <input type="button" value="確認" onClick="return check()" /> <input type="reset" value="リセット" /> </form> </body> </html> これにx_jouet_x様がおっしゃったようなif文を入れたら、やはりサブウィンドウは表示されてしまう訳で・・・。どうやったら良いのか分からなくなってしまいました。アドレスやURLが間違っていたら、サブウィンドウを表示させないようにしたいのです。綺麗なプログラムソースの書き方があったら教えて下さい。よろしくお願い申し上げます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • formとalert

    javascript初心者です。 formを使ってテキストボックスに入力された文字をalertを使って表示させたいのですが、functionの中の記述がよくわかりません。　formを使った参考資料も見つからず質問するに至りました。 教えていただければと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>練習</title> <script type="text/javascript"> </script> </head> <body> <form name="a">文字を入力: <input type="text"size="20" name="name1" ><br> <input type="button" name="name2" value="確認" onclick="alert(chk)"> </form> <script type="text/javascript"> function chk(){ var n=document.a.name1.value; alert(n); } </script> </body> </html>

  • FireFoxでfocus()が上手く動かない

    javascriptを使って、 フォームのテキストエリアの入力文字数をチェックし、 オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。 ようにしようとしています。 IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。 どこがまずいのか、教えてください。 コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 1) { alert('サイズオーバーです'); aText.focus(); } } //--> </script> </head> <body> <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> <input type="text" name="dummy"> </form> </body> </html>

  • BODYタグのonloadについて

    こんにちは。 HTMLのBodyタグにて、onload処理を記述しているのですが、 不思議な現象が起きます。。。 <html> <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></title> <script language="JavaScript" type="text/JavaScript"> <!-- // 初期表示 function init() { alert("AAA"); var formObj = document.getElementById("starter"); alert("formObj.action = " + formObj.action); formObj.submit(); } //--> </script> </head> <body onload="init()" tabindex="-1"> Now Loading... <form method="post" name="starter" action="/getIchiran.do" > <% System.out.println("このJSPにきてますか？"); %> </form> </body> </html> 上記のように記述しているのですが、 onloadのinit関数が、呼ばれる場合と呼ばれない場合があります・・・ 呼ばれる場合と、呼ばれない場合でも 「このJSPにきてますか？」のログは表示されているので、このHTML（JSP）は呼ばれている模様です。 どうしてこうのような現象が起きるのかさっぱり分からなくて・・・ 何が悪いのか教えて頂けないでしょうか？ 宜しくお願い致します。 IEは6.0、 OSはWindowsXPです。

    • ベストアンサー
    • HTML
  • formの判別について

    テキストボックスが空だったら、alertをだし、からじゃなかったら次のページへ飛ぶというスクリプトを実行させたいのですが、うまくいきません。 以下のどこがおかしいのかご教授いただけないでしょうか？ --------------以下スクリプト ●htmlのヘッダへ記入 <script language="JavaScript"> <!-- function checkForm(form){ /* IDのチェック */ if(!form.text1.value){// 未入力のチェック alert("IDが入力されていません。"); }else{ 　　document.location.href="next.html"; 　　} } //--> </script> ●html内のフォーム側 <form action="" onSubmit="checkForm(this)" method="post"> <input type="text" size="50" name="text1" maxlength="10"> ----------------------------------以上

  • 違う文字コードのページへＦＯＲＭデータを送る時

    いつもお世話になっております。 EUC-JP のページからx-euc-jpのページへFORMを使いデータを渡しているのですが、どうも受け取り側で渡したデータが文字化けを起こしているようなのです。 原因が分かる方がいたら、ご教授下さい。 <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <script type="text/javascript"> <!-- function sent2() { document.INPUT.submit(); } // --> </script> </HEAD> <BODY onload="sent2()"> <form name="INPUT" METHOD="POST" action="http://okwave.jp" ENCTYPE="text/plain"> <input type="hidden" name="arr1" value="555006303003"> </form> </BODY> </HTML>

  • [fromについて]　onClickを使用せず合計を出す方法はありますか？

    割算の計算式なのですが、計算ボタンを押さずに数字を入力したら自動的に合計を出す方法がわかりません。＞＜； まったくの素人で困っています。何卒よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>かけ算、割り算（警告）</title> <script language="javascript" type="text/javascript"> <!-- function Calculate(){ var Div var a = document.calc_IN.data_A.value; var b = document.calc_IN.data_B.value; if(b == 0){ alert("0で割ることになります"); }else{ Div = a/b; document.calc_OUT.data_D.value=Div; } } // --> </script> </head> <body> <FORM NAME="calc_IN"> <INPUT NAME="data_A" TYPE="text" SIZE=10> <INPUT NAME="data_B" TYPE="text" SIZE=10> <INPUT NAME="GO" TYPE="button" VALUE="計算開始" onClick="Calculate()"> </FORM> <FORM NAME="calc_OUT"> 割り算：<INPUT NAME="data_D" TYPE="text" SIZE=10><BR> </FORM> </body> </html>

  • javascript　＋　php　でエラー

    エラーを取り除くことができず、困っています。 助けてください。 下記のようなコードで、PHPからjavascriptに文字列を渡しているのですが、 文字列に改行コードがあるとエラーになってしまいます。 (改行コードがない場合はエラーはでません) 文字コードはEUC-JP、改行はLFとしています。 エラーの原因と、対策を教えてください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function sampl(str) { alert(str); } //--> </script> </head> <body> <form method="post" action="#"> <?php $str = "テスト\n改行あり"; ?> <input type="button" value="実行" onClick="sampl('<?=$str?>')"> </form> </body> </html>

  • Event.observe について教えてください。

    javascript および prototype.js について理解が中途半端なのですが、Event.observe() の 'click' 指定で、関数に引数を渡すにはどうしたらよいでしょうか？そんなことできないのでしょうか？ どういうことかといいますと、まず次のようなプログラムは動かすことが出来ました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <script src="prototype.js" type="text/javascript"></script> </head> <body> test page <form name="form1"> <input type="button" name="exe" value="実行" id="b1" > </form> </body> </html> <script type="text/javascript"> function myfunc(){ return confirm('exe ?'); } Event.observe($('b1'), 'click', myfunc, false); </script> ------------------------------------- なのですが、この myfunc()関数に引数を与えれたらよいな、と思いまして、 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <script src="prototype.js" type="text/javascript"></script> </head> <body> test page <form name="form1"> <input type="button" name="exe" value="実行" id="b1" > </form> </body> </html> <script type="text/javascript"> function myfunc(a){ alert(a); return confirm('exe ?'); } Event.observe($('b1'), 'click', myfunc(3), false); </script> のようにしてみましたが、これは意図通り動かず、何故か画面をロードした時に、myfunc()関数も呼ばれているようです。 何分理解が中途半端なので、わたしがよく分かっていないことがあるのだと思いますが、どなたかご教授していただけたら嬉しいです。よろしくお願い致します。

  • テキストフォームの内容をページ内に表示する方法

    初めて質問します。 JavaScriptも初心者です。 初めてづくしで見苦しい点もあるかと思いますが、よろしくお願いします。 複数のテキスト入力欄に書き込まれた内容をページ内に表示したいと思い、下のようなコードを書いています。 ---------- <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- function output(){ document.write(document.forms[0].text1.value); document.write("<br>"); document.write(document.forms[0].text2.value); document.write("<br>"); } // --> </script> <form action="#" name="form1"> <input type="text" name="text1"> <input type="text" name="text2"> <input type="button" value="output" onclick="output()"> </form> </body> </html> ---------- forms[0]以降、forms[1]、forms[2]…と同様に続けたいと思ってこのようにしたのですが、 function output()内の3行目でつまってしまうようです。 入力欄オブジェクトの指定方法がまずいのかも、とも思うのですが… Statement on line 6: Cannot convert undefined or null to Object というエラーメッセージが出ています。 自分で使うためのプログラムで、体裁にこだわるつもりはありません。 何かよい解決方法はないでしょうか。 どうかよろしくお願いします。

  • DOMで生成したタグにCSSが適用されない(IE)

    DOMでタグを生成した場合、IEではそのタグにCSSが適用されないのですが 何かいい解決法はないでしょうか。ちなみに試したHTMLは下記の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> </head> <body> <script type="text/javascript"><!-- A = document.createElement("div"); A.setAttribute("id", "A"); A.setAttribute("style", "color:red;"); document.body.appendChild(A); document.getElementById("A").appendChild(document.createTextNode("test")); --></script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する