同意チェックボックスの遷移先が複数にならない問題
- WordPressで同意チェックボックスの遷移先が複数にならない問題が発生しています。
- 「javascript:goServlet('http://google.com')」の部分がうまく機能していないようです。
- フォームのsubmitを使用して解決する方法を教えていただきたいです。
- ベストアンサー
同意チェックボックスはひとつ、遷移先は複数にしたい
探して見つけた↓をWordPressで使わせていただきたいのですが、 WordPressの投稿ページで動きません・・・。 <html> <head> <script type="text/javascript"> function goServlet(url){ if (!document.chbox.cBox.checked){ // 同意してない window.alert("同意して"); }else{ // 同意してる document.location = url; } } </script> </head> <body> <p>上記、「システム利用規約」に同意します。 <form name="chbox"> <input type="checkbox" name="cBox" > </form> </p> <a href="javascript:goServlet('http://google.com')" >トップページへはこちら</a> <a href="javascript:goServlet('http://yahoo.jp')" >会員ページへはこちら</a> </body> </html> 「"javascript:goServlet('http://google.com')"」 この部分がダメなのだと思うのですが、他の方法を教えていただけないでしょうか・・・。 できましたらformのsubmitで・・・。 (すみませんド素人です) よろしくお願いします。
- 2010shin
- お礼率50% (5/10)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE9 以上なら <script> addEventListener('DOMContentLoaded', function(){ var checkAgree = function(ev) { var agreed = document.forms['chbox'].elements['cBox'].checked; if (!agreed) { ev.preventDefault(); alert('同意して'); } } var Q = function(s){return Array.prototype.slice.apply(document.querySelectorAll(s))}; Q('a.agreed').forEach(function(a){a.addEventListener('click', checkAgree, false)}); Q('form.agreed').forEach(function(f){f.addEventListener('submit', checkAgree, false)}); }, false); </script> <form name="chbox"> <label><input type=checkbox name="cBox"> 上記、「システム利用規約」に同意します。</label> </form> <a href="page1.html" class=agreed>リンクで遷移する場合</a> <a href="page2.html" class=agreed>複数でも大丈夫</a> <form method=GET action="page3.html" class=agreed> <button type=submit>サブミットで遷移する場合</button> </form> <form method=GET action="page4.html" class=agreed> <button type=submit>複数でも大丈夫</button> </form>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
アンカータグでやるならむしろurlをユーザー関数に渡す必要もないのでは？ またformをnameで参照する方法はちょっと古くてあまりお勧めできません。 cBoxをずばりidで指定した方がよいような気がします。 <html> <head> <script> function goServlet(url){ if (!document.getElementById("cBox").checked){ window.alert("同意して"); return false; }else{ return true; } } </script> </head> <body> <p>上記、「システム利用規約」に同意します。 <form name="chbox"> <input type="checkbox" name="cBox" id="cBox"> </form> </p> <a href="http://google.com" onclick="return goServlet()" >トップページへはこちら</a> <a href="http://yahoo.jp" onclick="return goServlet()" >会員ページへはこちら</a> </body> </html>
関連するQ&A
- 「利用規約の同意」複数のチェックボックスでアクセス制御
どうしてもわからないので助けてくださいませ～～ 利用規約でチェックボックスにチェックが入ると 次のページへ進めるボタンをつけたページなのですが チェックボックスが1つなら下記でできたのですが 複数になった場合はどうしたらよいでしょうか？？ 複数全てにチェックしないと次のページへ進めないようにしたいのです。 どうぞよろしくお願いいたします。 <script type="text/javascript"> function check(){ if(document.form.agree.checked == true){ return true; }else{ alert("利用規約に同意してください。"); return false; } } </script> <form action="***.html" method="post" name="form" onsubmit="return check();"> <input type="checkbox" name="agree" value="1"> <input type="image" src="***.gif" name="***" alt="***" border="0"> </form>
- 締切済み
- JavaScript
- 条件により、リンク先に画面遷移しないようにする方法
リンクボタンを押したときに、同じフォーム内の、他の入力内容をチェックして、その結果によってはリンクを無効にして画面遷移しないようにしたいのですが、可能でしょうか。 分らないながら、ソースを作成してみたのですが、うまくいきませんでした。どなたか、ご存知でしたら、お願いします。 下のサンプルの場合は、名前が入力されている時は次画面に遷移し、入力されていない場合は、メッセージを表示して、現画面にとどまるようにしたいのです。 <script type="text/javascript"> <!-- //************************* function funcCheck(){ //************************* var v; v = document.myform.in_name.value; alert("document.myform.in_name.value=" + v ); if(v == ""){ alert("名前を入力してください"); return false; }else{ return true; } } //--> </script> <head> </head> <body> <form name="myform"> 名前:<input type=text name="in_name" value=""> <a href="xxx.htm" onclick="funcCheck()">チェック</a> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスONでジャンプ
javascript初心者です。 現在チェックボックスをONにすると別の商品のページにジャンプするという シンプルなものを作っているのですが、Chromeではきちんと動作するのに、 その他のブラウザ（firefox opera ie)で動作しません。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function chkClick() { if (formTest.chkTest.checked) { location.href="item123.html"; } } //--> </script> </head> <body> <form act="test.cgi" id="formTest" method="post"> <input type="checkbox" name="chkTest" value="1" onclick="chkClick()"> </form> チェックを入れると商品１２３のページへ </body> どこか記述が間違っているところがありますでしょうか？ ご指摘頂ければ助かります。よろしくお願い致します。
- ベストアンサー
- JavaScript
- 同意を求めて、次のページに進む方法
他の質問等を見たのですが、初心者の自分にはわからず、質問を新たにしました。 質問は、ページ内にあるよくある、同意を求めて、 ”はい”だと注文ページへ。 ”いいえ”だとはいにチェックをし、注文ページへ進んで下さい。 などと表示できるようにしたいのですが、どのようにしたらよいのか 教えて下さい。 また、ただ、<A href="xxxxx.html">同意する</A> 、<A href="xxxxx.html">同意しない</A> という形は避けたいです。 できれば <SCRIPT LANGUAGE="JavaScript"> function check() { chk = document.formChecker.Checker; if (chk = "YES") { //YES this.location.href = "yes.html"; } else { if (chk = "NO") { //NO this.location.href = "no.html"; } }} </SCRIPT> <FORM NAME="formChecker"> <INPUT TYPE="radio" NAME="Checker" VALUE="YES"> Yes <INPUT TYPE="radio" NAME="Checker" VALUE="NO"> No <INPUT TYPE="button" VALUE="送信" onClick="check()"> </FORM> みたいな形にしたいのですが、上記のタグでは グチャグチャで思ったように動きません。 どなたか、上記を正しく直し、アドバイスをいただけると 助かります。よろしくお願いします。
- ベストアンサー
- HTML
- 複数のチェックボックスから複数の分岐先に値を保持
恥ずかしながら、どなたかご指導いただければとても助かります。 稚拙なソースで、かつ間違いだらけで見づらいと思いますがどうぞよろしくお願いします。 ・複数のCheckboxの値を、複数設定したボタンで分岐した時に、その値をそれぞれで引き継ぎたい （Aボタンを押してもBボタンを押しても、チェックした値は同じ値を引き継いでいく、という意味） ・Checkboxの数は多いため、全選択or全解除のボタンを使用したい（Javascript利用) ・可能であればボタンは以前に作成した画像を利用したい（例 icon_A-button.gif） ここで、<Form> に action を入れないとCheckboxの値は引き継がれず、入れてしまうとその移動先にしか移動できない また </Form> を入れる位置は本来であれば※1であると思うがここに入れると、移動もできない ※2の位置だと、反映はされるが、Bボタンを押してもAボタンの行き先に飛んで行ってしまう etc etc・・・ <Form></Form>の位置や、Javascriptのlocationなど色々と試してみましたがどうもうまくいきません onClickなど、JavaScript またはセッションなどを利用した方がよいのでしょうが、方法が判りません。 どうかよろしくお願いいたします。 confirm.php <HTML> <HEAD> <TITLE></TITLE> <script language="javascript"> <!-- function allcheck(formName, checkboxName, bool) { for(i = 0; i<eval('document.' + formName + '.elements["' + checkboxName + '"].length'); i++) { eval('document.' + formName + '.elements["' + checkboxName + '"][' + i + '].checked = ' + bool); } } //--> </SCRIPT> </HEAD> <BODY> <? $Data = array('A-data','B-data','C-data','D-data');?> <form action = "view1.php" method ="post" name ="form1"> <input type=checkbox name='ChkData[]' value = "<? print $Data[0]; ?>"> <input type=checkbox name='ChkData[]' value = "<? print $Data[1]; ?>"> <input type=checkbox name='ChkData[]' value = "<? print $Data[2]; ?>"> <input type=checkbox name='ChkData[]' value = "<? print $Data[3]; ?>"> <INPUT TYPE="button" onClick=allcheck('form1','ChkData[]',true) VALUE= "All-ON"> <INPUT TYPE="button" onClick=allcheck('form1','ChkData[]',false) VALUE= "All-OFF"> ※1 </form> <input type = "image" value="A-button" src="icon_A-button.gif" name="form1" onClick=location.href="view1.php"> <input type = "image" value="B-button" src="icon_B-button.gif" name="form1" onClick=location.href="view2.php"> ※2 </form> </BODY> </HTML> view1.php view2.php ・・・複数ボタンの飛ぶ先のソースの例 <? if( isset( $_POST[ 'ChkData' ] ) ){ $cbx_values = $_POST[ 'ChkData' ]; for( $i = 0; $i < count( $cbx_values ); $i ++ ){ print "送信された内容{$cbx_values[$i]} <br/>"; } } ?> 多分基本的なことなのでしょうが、全く見当がつきません。 以上ご指導の程、宜しくお願いいたします。
- ベストアンサー
- PHP
- プルダウンメニューの項目をクリックしてもリンク先に
<HTML> <HEAD> <TITLE>リンク先をプリダウンメニューで表示したい</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function linkMenu(m) { if(m==0)return; document.form01.url.selectedlndex = 0; if(m == 1) document.location="https://www.google.com/?hl=ja&gws_rd=ssl"; if(m == 2) document.location="http://www.yahoo.co.jp/"; } //--></SCRIPT> </HEAD> <BODY> <FORM NAME="form01"> <SELECT NAME="url" onChange="linkMenu(this.selectedlndex)"> <OPTION>クリックして選択してね <OPTION>e-support <OPTION>Office TAKASAKU </SELECT> </FORM> </BODY> </HTML> 以上ですが プルダウンメニューの項目をクリックしてもリンク先が開かないのですが！？ 何かミスがあるでしょうか！？ 宜しくお願いします。
- ベストアンサー
- JavaScript
- リンクでPOST送信
http://www.kojikoji.net/pso/javascript.asp こちらにその方法がのっていて、 Windows IE 6.0 Windows Opera 7.13 では動作を確認しました。ですが、 Windwos Netscape 7.1 で動作しません。Netscapeにも対応した書き方で、<a href=...>を用いてPOST送信することは可能でしょうか？ *****以下引用*********************************** リンクやボタンを使って「xxx.asp」へPOST送信 <html> <head> <script language="JavaScript"> <!-- function wPost(a1,a2){ document.form1.text1.value=a1; document.form1.text2.value=a2; document.form1.action = "xxx.asp"; document.form1.submit(); } //--> </script> </head> <body> <a href="javascript:wPost("text1","text2")">送信</a> <input type="button" OnClick="wPost('text3','text4')" value="送信"> <form name="form1" method="post" action="err.html"> <input type="hidden" name="text1"> <input type="hidden" name="text2"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 複数のvalue値を返すには
Ａを選択した時10、Ｂを選択した時100、Ｃなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Ａの時10と20を、Ｂの時100と200、Ｃの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">Ａ</option> <option value="100">Ｂ</option> <option value="1000">Ｃ</option> </select> </form>
- ベストアンサー
- JavaScript
- セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい
web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。 1. topページにセレクトボックスを設置。 2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。 3. 2を繰り返す。 このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。 script_test01.htmlの内容 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <script type='text/javascript' src='script_test01.js'> </script> <br> <form name='form_0'> <select onchange='rewrite()' name='sel_0'> <option>A or B</option> <option>A</option> <option>B</option> </select> </body> </html> -------------------------------------------------- script_test01.jsの内容 -------------------------------------------------- function rewrite() { var sel_in =document.form_0.sel_0.options.selectedIndex; var sel_name = document.form_0.sel_0.options[sel_in].text; document.write('<html>\n'); document.write('<head>\n'); document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n'); document.write("<script type='text/javascript' src='script_test01.js'>\n"); document.write("</script>\n"); document.write('</head>\n'); document.write('<body>\n'); document.write(sel_in,' : ',sel_name,'<br>\n'); /* ↓この部分がうまくいかない document.write('<br>\n'); document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); document.write('<option>A or B</option>\n'); document.write('<option>A</option>\n'); document.write('<option>B</option>\n'); document.write('</select>\n'); /* ↑この部分がうまくいかない document.write('</body>\n'); document.write('</html>\n'); } -------------------------------------------------- script_test01.jsのコメントアウトをはずすとエラーになります。 script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。 あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。 topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか？「日本語[EUC]」に出来ないでしょうか？
- ベストアンサー
- JavaScript
- javascriptでラジオボタンをチェックさせて、それによってリンク
javascriptでラジオボタンをチェックさせて、それによってリンクを飛ばしたいと考えています。 自分なりに調べて、作成したのですが、 フレームを利用しており、ページ全体を移動（top）したいのですが、フレーム内でしか表示されません。 <HTML> <HEAD> <TITLE>らじお</TITLE> <SCRIPT LANGUAGE="JavaScript"> function jump(){ var flag = 0; for(i=0; i<document.forms[0].url.length; i++){ if(document.forms[0].url[i].checked){ flag = 1; window.location.href = document.forms[0].url[i].value; } } if(flag == 0){ alert('ラジオボタンが選択されていません。'); } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="radio" NAME="url" VALUE="表示したいＵＲＬ.htm" checked>選択肢１<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいＵＲＬ.htm">選択肢２<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいＵＲＬ.htm">選択肢３ド<br> <INPUT TYPE="button" onClick="jump();" VALUE="移動"> </FORM> </BODY> </HTML> 上記状態で、あちらこちらに"_top"を挿入してみたのですが、うまくいきません。 どなたかお知恵を拝借出来ませんでしょうか？
- ベストアンサー
- JavaScript
お礼
おおお！すごい！天才ですか！？ できました！本当にありがとうございました！！ 感謝感謝です！ yambejpもありがとうございました！！