フォームについて

質問

お世話になります。
フォームについての質問なんですが、例えば、↓のようなフォームがあったとします。
<form>
<input type="radio" name="sample" value="同意する">同意する
<input type="radio" name="sample" value="同意しない">同意しない
<input type="button" value="同意して申し込む" onClick="location.href='http://www.google.co.jp/'">
</form>
このフォームは「同意する」「同意しない」の選択にかかわらず、「同意して申し込む」をクリックすればgoogleのトップページが開きます。これを、「同意する」を選択していないと、googleのトップページが開かないようにしたいのです。「同意しない」が選択されていたら、動作しないようにしたいです。分かりにくい説明かもしれませんが、どうぞよろしくお願いします。

回答No.3

Kaone · ベストアンサー

#1です。
２番さんの指摘があったので少々ソースを変えました。
ちなみに補足するとHTMLではフォームに名前をつけてもかまいませんがXHTMLだとダメです。
だから非推奨と言うことになっています。

そのかわり、フォームには、idをつけることは認められていて
代わりに以下のように出来ます。

ちなみに、javascriptを使用したタグは現在携帯では使えません。

<form id="formname">
<input type="radio" name="sample" value="同意する">同意する
<input type="radio" name="sample" value="同意しない">同意しない
<input type="button" value="同意して申し込む" onClick="
if( document.getElementById('formname').sample[0].checked ){
alert('同意したのでグーグルページへいきます。');
location.href='http://www.google.co.jp/';
}else if( document.getElementById('formname').sample[1].checked ){
alert('同意しなかったのでヤフーページへいきます。');
location.href='http://www.yahoo.co.jp/';
}else{
alert('同意するか、同意しないのどちらかを選択してね');
}
">
</form>

お礼

回答ありがとうございます。
お陰様で、自分の思うようにいきました。
携帯では使えないとのことなので、ラジオボタンをなくし、通常のボタンにリンクを設定することで対処しました。
本当にどうもありがとうござました<(_ _)>
また、困ったことがあったらお助け下さい。それでは。

回答No.2

yambejp

formにnameをつけるのは非推奨

こんな風にしてみてください
<form>
<input type="radio" name="sample" value="同意する" onclick="this.form.google.disabled=false" id="sample_yes"><label for="sample_yes">同意する</label>
<input type="radio" name="sample" value="同意しない" onclick="this.form.google.disabled=true" id="sample_no"><label for="sample_no">同意しない</label>
<input type="button" id="google" value="同意して申し込む" onClick="location.href='http://www.google.co.jp/'" disabled>
</form>

お礼

回答して頂いてどうもありがとうございます。
返事が遅くなって申し訳ありません。

なるほど、同意するを選択している時は「同意して申し込む」がクリックできて、していない時はクリックできない。これは便利ですね。ですが、同意するを選択した状態で「同意して申し込む」をクリックしても反応しません。私の間違いだったら申し訳ないです。
それから、このフォームタグは携帯でも使えるのでしょうか？

お手数ですが、どうぞよろしくお願いします。

回答No.1

Kaone

<form name="formname">
<input type="radio" name="sample" value="同意する">同意する
<input type="radio" name="sample" value="同意しない">同意しない
<input type="button" value="同意して申し込む" onClick="
if( document.formname.sample[0].checked ){
location.href='http://www.google.co.jp/';
}else{
location.href='http://www.yahoo.co.jp/';
}
">
</form>

上の例では、同意を選択しているときはgoogle　同意しないを選択しているときは、yahooに行くようになっています。

説明すると
まずフォームに名前をつけます。
<form name="formname">
次にRADIOぼたんがありますが、そのまま
<input type="radio" name="sample" value="同意する">同意する
<input type="radio" name="sample" value="同意しない">同意しない
としていますが、valueは別に設定しなくてもいいでしょう。

次にonclick時の処理ですが
if( document.formname.sample[0].checked ){

もし、　document(ホームページの） formname（というフォームの）sample（というコントロール、ボタンやエディット等）[0]というのは、0番目、一番最初がチェックされていたらという意味です。

なぜ[0]がいるかというと　sampleという名前のボタンが二つあるからです。
で[0]で最初の同意するという部分だけ調べています。
気づいたと思いますが、このスクリプトだと、同意するも、同意しないもチェックされていないとき、同意しないの処理になります。
何も押してないなら、押せとメッセージを表示する為には、下記のようになります。

if( document.formname.sample[0].checked ){
//0番目のsampleがチェックされている場合ここの処理が行われます。
　　　location.href='http://www.google.co.jp/';
}else if( document.formname.sample[0].checked ){
//1番目のsampleがチェックされている場合ここの処理が行われます。
　　　location.href='http://www.yahoo.co.jp/';
}else{
//それ以外、すなわち、0番目も1番目もチェックされていない状態
　　　alert('同意するか、同意しないのどちらかを選択してね');
}

お礼

回答して頂いてどうもありがとうございます。
返事が遅くなって申し訳ありません。

助言してくれた通りフォームタグを打ち込んで、サーバー上にUPして確認してみましたが、「同意して申し込む」をクリックしても反応しません。私の間違いだったら申し訳ないです。
それから、このフォームタグは携帯でも使えるのでしょうか？

お手数ですが、どうぞよろしくお願いします。