ラジオボタンの値でリンク先を変える

質問

ラジオボタンのvalueの値があり、
submitボタンを押したら、その値によって
リンク先を変えたいのですが、
具体的にソースで教えていただけないでしょうか？

回答No.4

leaz024 · ベストアンサー

同じ name 値のオブジェクトが複数ある場合、それらは配列扱いとなるので No.1 の方法では処理できません。
このような場合はループでラジオボタンを１つずつ見て、checked プロパティが true のものを探して処理します。

また、HTML に checked が書かれているラジオボタンが１つもなければ、どれもチェックされていない時の処理も必要になります。

それと、リンク先変更関数の呼び出しについてですが、送信処理に関する関数の呼び出しは必ず FORM タグの onSubmit で行うようにします。
でないと、ラジオボタンにフォーカスがある時に Enter キーによって送信されてしまうのをチェックすることができません。

以下、それらを踏まえたサンプルです。

# スクリプト部
（インデントなどに全角空白を使用しているので、コピペの際は注意！）

// ラジオボタンに対応するURLの配列
var actions = new Array(
　　"URL1",
　　"URL2"
);

function setAction(f) {
　　for (var i = 0; i < f.rb1.length; i++) {
　　　　if (f.rb1[i].checked) {
　　　　　　f.action = actions[i];
　　　　　　return true;　　// true を返すと送信される
　　　　}
　　}

　　// ラジオボタンがチェックされていない時の処理
　　※以下参照
}

※エラーにする場合
　　alert("ラジオボタンをチェックしてください。");
　　return false;　　// false を返すと送信されない

※デフォルトの送信先に飛ばせる場合
　　f.action = "デフォルトのURL";
　　return true;

# フォーム部
<FORM onSubmit="return setAction(this)">
<INPUT type="radio" name="rb1" value="a">aaa<br>
<INPUT type="radio" name="rb1" value="b">bbb<br>
<INPUT type="submit">
</FORM>

下記ページも参考になります。
http://tohoho.wakusei.ne.jp/js/form.htm#ElmButton

参考URL：

http://tohoho.wakusei.ne.jp/js/form.htm#ElmButton

お礼

ありがとうございます！　うまくいきました。

回答No.5

Mizyu

#4さん

ご指摘、ごもっともでございます。
たびたび、回答しておきながら、間違いをお教えしてしまって申し訳ありません。
テストしないで、業務片手間で答えてしまったので間違いをそのまま記入しておりました。

※管理者様、見ていらしたら私の回答をすべて削除してください。質問者の方や他の閲覧者の方が混乱してしまいます。

回答No.3

Mizyu

すいません、逆に名前指定しないと下記ソースは動きません・・・。

<input type ="radio" value="0" name="rb1"> aaa <br>
<input type ="radio" value="1" name="rb1"> bbb <br>

です。たびたびごめんなさいです＾＾；；；

回答No.2

Mizyu

#1です。
失礼しました。

<input type ="radio" value="0"> aaa <br>
<input type ="radio" value="1"> bbb <br>

ですね＾＾；；

補足

答えていただき、ありがとうございます。
リンク先に飛ぶ時に、ラジオボタンの値も
引継ぎたいので、ラジオボタンにnameを
指定したのですが、そのせいかうまくいきません。
ラジオボタンに名前が付いている場合も
教えていただけますか？

回答No.1

Mizyu

ちょうど今、似たような処理を作ってましたｗ

--------------------------
<script type="text/javascript">
<!--

function SubmitChange()
{
if (document.mf.rb1.value="0" )
document.mf.action = "aaa.html";
else
document.mf.action = "bbb.html";
}

// -->
</script>

------------------------
<form method="post" action="" name="mf">
<input type ="radiobuton" value="0"> aaa <br>
<input type ="radiobuton" value="1"> bbb <br>
<input type="submit" onClick="SubmitChange();">

</form>

------------------------

こんな感じです。
分からないところがあれば補足で書いてください。