レス数:4 / 状態:未解決 / No:5 / ATOM
1
名前:ストロー
日付:2014/06/05(木)09:46:10
ID:5/GWklm0yARo
とあるフォーム画面なのですが、同意のチェックボックスにチェックをしたらテキストリンクで飛べるような
ものを作成しました。以下コードです。
<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('リンク先１')" >トップページへはこちら</a>
<a href="javascript:goServlet('リンク先２')" >会員ページへはこちら</a>
</body>
</html>
こちらのテキストリンクをラジオボタンに変更し、同意した上でラジオボタンで選んだ項目により遷移先を変更するように
したいのですがやり方がわからずに止まってしまっています。
goServletはラジオボタンには使えないのでしょうか。
ものを作成しました。以下コードです。
<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('リンク先１')" >トップページへはこちら</a>
<a href="javascript:goServlet('リンク先２')" >会員ページへはこちら</a>
</body>
</html>
こちらのテキストリンクをラジオボタンに変更し、同意した上でラジオボタンで選んだ項目により遷移先を変更するように
したいのですがやり方がわからずに止まってしまっています。
goServletはラジオボタンには使えないのでしょうか。
2
名前:へぼゲーマー
日付:2014/06/08(日)06:22:43
ID:t76HW7tmxyZI
ラジオボタンって何か分かってます？・・
HTML側に全く出てきませんが・・・。
正確に話すと、＝UIのイメージ構築ができていないことを指すんですが
そのような状態で実装するには？と質問されても、回答者が困惑するだけです。
それと、pタグの中に、formタグは入れることができません。
http://www.tagindex.com/html_tag/text_font/p.html
HTML側に全く出てきませんが・・・。
正確に話すと、＝UIのイメージ構築ができていないことを指すんですが
そのような状態で実装するには？と質問されても、回答者が困惑するだけです。
それと、pタグの中に、formタグは入れることができません。
http://www.tagindex.com/html_tag/text_font/p.html
3
日付:2014/06/08(日)21:23:35
ID:uqGvQ4UrzKin
ラジオボタンの value 属性を使用すると、任意の情報を埋め込む事ができます。
現在選択中のラジオボタンの value 属性の値は、JavaScript から取得できます。
<form id="chbox">
<label><input type="checkbox" name="cBox" >同意します！</label><br>
<label><input type="radio" name="my_link" value="リンク先１" checked>ＡＡＡＡＡ</label><br>
<label><input type="radio" name="my_link" value="リンク先２">ＢＢＢＢＢ</label><br>
<input type="button" name="my_jump" value="ジャンプ！" >
</form>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ラジオボタンのリストから値を取得する関数
// ------------------------------------------------------------
function RadioButtonListGetValue (list){
var i;
var num = list.length;
for(i=0;i<num;i++){
var input = list[i];
if(input.checked){
return input.value;
}
}
return null;
}
// ------------------------------------------------------------
// 各要素を取得
// ------------------------------------------------------------
// フォーム要素を取得
var form = document.getElementById('chbox');
// チェックボックスを取得
var check_box = form.cBox;
// ラジオボタンのリストを取得
var radio_button_list = form.my_link;
// ボタンを取得
var button = form.my_jump;
// ------------------------------------------------------------
// クリック時に実行されるイベント
// ------------------------------------------------------------
button.onclick = function(){
// 同意してない
if (!(check_box.checked)){
window.alert("同意して");
// 同意してる
}else{
// ラジオボタンのリストから現在の値を取得
var url = RadioButtonListGetValue(radio_button_list);
// 遷移する
document.location = url;
}
};
-->
</script>
現在選択中のラジオボタンの value 属性の値は、JavaScript から取得できます。
<form id="chbox">
<label><input type="checkbox" name="cBox" >同意します！</label><br>
<label><input type="radio" name="my_link" value="リンク先１" checked>ＡＡＡＡＡ</label><br>
<label><input type="radio" name="my_link" value="リンク先２">ＢＢＢＢＢ</label><br>
<input type="button" name="my_jump" value="ジャンプ！" >
</form>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ラジオボタンのリストから値を取得する関数
// ------------------------------------------------------------
function RadioButtonListGetValue (list){
var i;
var num = list.length;
for(i=0;i<num;i++){
var input = list[i];
if(input.checked){
return input.value;
}
}
return null;
}
// ------------------------------------------------------------
// 各要素を取得
// ------------------------------------------------------------
// フォーム要素を取得
var form = document.getElementById('chbox');
// チェックボックスを取得
var check_box = form.cBox;
// ラジオボタンのリストを取得
var radio_button_list = form.my_link;
// ボタンを取得
var button = form.my_jump;
// ------------------------------------------------------------
// クリック時に実行されるイベント
// ------------------------------------------------------------
button.onclick = function(){
// 同意してない
if (!(check_box.checked)){
window.alert("同意して");
// 同意してる
}else{
// ラジオボタンのリストから現在の値を取得
var url = RadioButtonListGetValue(radio_button_list);
// 遷移する
document.location = url;
}
};
-->
</script>
4
名前:ストロー
日付:2014/06/09(月)09:21:19
ID:5/GWklm0yARo
お返事ありがとうございます。ラジオボタンで選んだ先によってリンクを切り替えるという意味でした。説明足らずで申し訳ありません。
ラジオボタンの位置に加え、ラジオボタンで画面も切り替える仕様に変更になりました。
<html>
<head>
<title>システム利用規約確認</title>
<script type="text/javascript">
<!--
function goServlet(url){
if (!document.chbox.cBox.checked){
window.alert("「システム利用規約」、「プライバシーポリシー」に同意してください");
}else{
document.location = url;
}
}
-->
</script>
<script type="text/javascript">
<!--
function entryChange1(){
radio = document.getElementsByName('entryPlan')
if(radio[0].checked) {
//フォーム
document.getElementById('sentence').style.display = "";
document.getElementById('sentence2').style.display = "none";
document.getElementById('firstBox').style.display = "";
document.getElementById('secondBox').style.display = "";
document.getElementById('link1').style.display = "";
document.getElementById('link2').style.display = "none";
}else if(radio[1].checked) {
//フォーム
document.getElementById('sentence').style.display = "none";
document.getElementById('sentence2').style.display = "";
document.getElementById('firstBox').style.display = "none";
document.getElementById('secondBox').style.display = "";
document.getElementById('link1').style.display = "none";
document.getElementById('link2').style.display = "";
}
}
window.onload = entryChange1;
-->
</script>
</head>
<body>
<p class="mb50" style="padding:5px; border:solid #cc0000;padding:6px 20px;color:#cc0000; width:450px; margin-left: auto;"><font size="2">本コンテンツをご利用いただくには、JavaScriptが有効である必要があります。<br />
JavaScriptが無効の場合は、ブラウザの設定にて有効に切り替えてご覧ください。</font></p>
<table width="980"><tr>
<td width="30"><label><input type="radio" name="entryPlan" value="ラジオ１" onclick="entryChange1();" checked/></td><td>リンク１</label></td>
<td width="30"><label><input type="radio" name="entryPlan" value="ラジオ２" onclick="entryChange1();" /></td><td>リンク２</label></td></tr></table>
<p class="mb20" style="margin-top:20px" id="sentence">説明文１</p>
<p class="mb20" style="margin-top:20px" id="sentence2">説明文２</p>
<div id="firstBox">システム利用規約</div>
利用規約本文ーーーーーーーーーーーーー
</div>
<div id="secondBox">
<div>プライバシーポリシー</div>
プライバシーポリシー本文ーーーーーーーー
</div>
<div>
<table align="center">
<tr><td valign="top" width="370">
<p><font color="#cc0000">上記、「システム利用規約」及び「プライバシーポリシー」に同意します。</font></p></td><td>
<form name="chbox">
<input type="checkbox" name="cBox" style="margin-bottom:20px"></p></form></td></tr></table>
</form>
<div id="link1"><a href="javascript:goServlet('リンク１')" >次へ</a></div>
<div id="link2"><a href="javascript:goServlet('リンク２')" >次へ</a></div>)
</div>
</div>
</body>
</html>
以上がソースになります。画面を切り替えるjavascriptとリンク先をラジオボタンで切り替えるjavascriptの組み合わせ方がわからず、遷移する画面でリンク先の違うボタンが
表示されるように変更しました。（組み合わせ方を調べて試してみたのですがjavascriptがうまく動きませんでした。）
しかし、javascriptを無効にしている場合、ボタンが２つ表示されてしまうのが気になっています。よくないやり方なのでしょうか。
教えていただいたスクリプトを組み合わせることって可能でしょうか。
知識もないままに作成していてわからないことが多くてご迷惑おかけしますが、よろしくお願いいたします。
ラジオボタンの位置に加え、ラジオボタンで画面も切り替える仕様に変更になりました。
<html>
<head>
<title>システム利用規約確認</title>
<script type="text/javascript">
<!--
function goServlet(url){
if (!document.chbox.cBox.checked){
window.alert("「システム利用規約」、「プライバシーポリシー」に同意してください");
}else{
document.location = url;
}
}
-->
</script>
<script type="text/javascript">
<!--
function entryChange1(){
radio = document.getElementsByName('entryPlan')
if(radio[0].checked) {
//フォーム
document.getElementById('sentence').style.display = "";
document.getElementById('sentence2').style.display = "none";
document.getElementById('firstBox').style.display = "";
document.getElementById('secondBox').style.display = "";
document.getElementById('link1').style.display = "";
document.getElementById('link2').style.display = "none";
}else if(radio[1].checked) {
//フォーム
document.getElementById('sentence').style.display = "none";
document.getElementById('sentence2').style.display = "";
document.getElementById('firstBox').style.display = "none";
document.getElementById('secondBox').style.display = "";
document.getElementById('link1').style.display = "none";
document.getElementById('link2').style.display = "";
}
}
window.onload = entryChange1;
-->
</script>
</head>
<body>
<p class="mb50" style="padding:5px; border:solid #cc0000;padding:6px 20px;color:#cc0000; width:450px; margin-left: auto;"><font size="2">本コンテンツをご利用いただくには、JavaScriptが有効である必要があります。<br />
JavaScriptが無効の場合は、ブラウザの設定にて有効に切り替えてご覧ください。</font></p>
<table width="980"><tr>
<td width="30"><label><input type="radio" name="entryPlan" value="ラジオ１" onclick="entryChange1();" checked/></td><td>リンク１</label></td>
<td width="30"><label><input type="radio" name="entryPlan" value="ラジオ２" onclick="entryChange1();" /></td><td>リンク２</label></td></tr></table>
<p class="mb20" style="margin-top:20px" id="sentence">説明文１</p>
<p class="mb20" style="margin-top:20px" id="sentence2">説明文２</p>
<div id="firstBox">システム利用規約</div>
利用規約本文ーーーーーーーーーーーーー
</div>
<div id="secondBox">
<div>プライバシーポリシー</div>
プライバシーポリシー本文ーーーーーーーー
</div>
<div>
<table align="center">
<tr><td valign="top" width="370">
<p><font color="#cc0000">上記、「システム利用規約」及び「プライバシーポリシー」に同意します。</font></p></td><td>
<form name="chbox">
<input type="checkbox" name="cBox" style="margin-bottom:20px"></p></form></td></tr></table>
</form>
<div id="link1"><a href="javascript:goServlet('リンク１')" >次へ</a></div>
<div id="link2"><a href="javascript:goServlet('リンク２')" >次へ</a></div>)
</div>
</div>
</body>
</html>
以上がソースになります。画面を切り替えるjavascriptとリンク先をラジオボタンで切り替えるjavascriptの組み合わせ方がわからず、遷移する画面でリンク先の違うボタンが
表示されるように変更しました。（組み合わせ方を調べて試してみたのですがjavascriptがうまく動きませんでした。）
しかし、javascriptを無効にしている場合、ボタンが２つ表示されてしまうのが気になっています。よくないやり方なのでしょうか。
教えていただいたスクリプトを組み合わせることって可能でしょうか。
知識もないままに作成していてわからないことが多くてご迷惑おかけしますが、よろしくお願いいたします。
このスレッドについて
| 質問の状態 : | 未解決 |
| 投稿開始日 : | 2014/06/05(木)09:46:10 |
| 投稿終了日 : | 2014/06/16(月)09:21:21 |
| 投稿者 : | ストロー |
| レス総数 : | 4 |
| スレッド番号 : | 5 |