プロが教えるわが家の防犯対策術!

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

A 回答 (5件)

同じ name 値のオブジェクトが複数ある場合、それらは配列扱いとなるので No.1 の方法では処理できません。


このような場合はループでラジオボタンを1つずつ見て、checked プロパティが true のものを探して処理します。

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

それと、リンク先変更関数の呼び出しについてですが、送信処理に関する関数の呼び出しは必ず 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
    • good
    • 0
この回答へのお礼

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

お礼日時:2003/04/23 10:32

#4さん



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

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

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



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

です。たびたびごめんなさいです^^;;;
    • good
    • 0

#1です。


失礼しました。

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

ですね^^;;

この回答への補足

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

補足日時:2003/04/22 16:13
    • good
    • 0

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



--------------------------
<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>

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q【JavaScript】ラジオボタンにより、formのaction内容

【JavaScript】ラジオボタンにより、formのaction内容を変更したいのですが・・・。

どのラジオボタン(ここでは『A』と『B』とします)をチェックされたかにより、

<form action="(ここの部分)">

(ここの部分)と書かれたformのactionの内容を変えたいのです。

例)
『A』のラジオボタンをチェック → <form action="a.php">になる
『B』のラジオボタンをチェック → <form action="b.php">になる

このようにしたいのです。

どうかよろしくお願いします。

Aベストアンサー

function gamenchange(){
if (document.myform.radio01.value=="1"){
document.myform.action="a.php";
}else{
document.myform.action="b.php";
}
document.myform.submit();
}

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

<form action="#" method="post">
<input type="radio" name="radio01" value="1">ラジオボタンA
<input type="radio" name="radio01" value="2">ラジオボタンB
<input type="submit" onclick="gamenchange()">
</form>

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

submitボタンを押したときにfunctionでaction先をセットする・・・のはいかがでしょう?

Qリンク文字クリックでラジオボタン選択、テキストボックス表示したい

次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。

<html>
<head></head>
<body>
<a href="#">りんご</a>
<a href="#">みかん</a>
<a href="#">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</body>
</html>

ここで、各ハイパーリンク文字列をクリックした瞬間に、

(1) 該当するラジオボタンが選択される
(2) ラベルがテキストボックスに表示される

というように動作させたいのです。

また、<a href="#">とすると画面を再読み込みしてしまうようなので、
再読み込みされない書き方についてもご教示いただけますとまことに
幸いです。よろしくお願い致します。

次のようにハイパーリンク文字列、ラジオボタン、テキストボックスが並んでいます。

<html>
<head></head>
<body>
<a href="#">りんご</a>
<a href="#">みかん</a>
<a href="#">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</body>
</html>

ここで、各ハイパーリンク文字列をクリッ...続きを読む

Aベストアンサー

とりあえず、普通に書くとこんなかんじでしょうか。

<html>
<body>
<form>
<a href="javascript:setFruit('0','りんご')">りんご</a>
<a href="javascript:setFruit('1','みかん')">みかん</a>
<a href="javascript:setFruit('2','いちご')">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
</form>
<script language="javascript">
function setFruit(num1,num2){
//alert(1);
var f=document.forms[0];
f.select[num1].checked=true;
f.label.value=num2;
}
</script>
</body>
</html>

とりあえず、普通に書くとこんなかんじでしょうか。

<html>
<body>
<form>
<a href="javascript:setFruit('0','りんご')">りんご</a>
<a href="javascript:setFruit('1','みかん')">みかん</a>
<a href="javascript:setFruit('2','いちご')">いちご</a>
<input type="radio" name="select" value="0" checked >りんご
<input type="radio" name="select" value="1">みかん
<input type="radio" name="select" value="2">いちご
<input size="40" name="label" type="text" value="りんご" readonly>
...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Qラジオボタンの分岐方法に関して

稚拙な質問で申し訳ないんですが

ラジオボタンを「はい」と選択し、ページ下の送信ボタンを押すとa.htmlへ
ラジオボタンを「いいえ」と選択し、ページ下の送信ボタンを押すとb.htmlへ
という処理を行いたいのですがどのようなコードを書けばいいのでしょうか?

どなたか教えてください。
私事で恐縮なのですが、今週の水曜までに完成させないといけなくて困ってます。宜しくお願い致します。

Aベストアンサー

まずラジオボタン2つ(”はい”と”いいえ”)と送信ボタンを用意します。
<form name="yesno">
はい:<input type="radio" name="check"><br>
いいえ:<input type="radio" name="check"><br>
<input type="button" value="送信" onClick="page()">
</form>

次に処理部ですが、以下のとおりです。
<SCRIPT language="JavaScript">
function page(){
//「はい」のラジオボタンがチェックされている時
if(document.forms["yesno"].elements[0].checked == true){
location.href = "a.html" ;
}
//「いいえ」のラジオボタンがチェックされている時
else if(document.forms["yesno"].elements[1].checked == true){
location.href = "b.html" ;
}
}
</SCRIPT>

これでOKです。
また不明な点がありましたら補足ください。

まずラジオボタン2つ(”はい”と”いいえ”)と送信ボタンを用意します。
<form name="yesno">
はい:<input type="radio" name="check"><br>
いいえ:<input type="radio" name="check"><br>
<input type="button" value="送信" onClick="page()">
</form>

次に処理部ですが、以下のとおりです。
<SCRIPT language="JavaScript">
function page(){
//「はい」のラジオボタンがチェックされている時
if(document.forms["yesno"].elements[0].checked == true){
location.href = ...続きを読む

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。

Qラジオボタンの選択肢をサーブレットで取得するには?

サーブレットの開発を行っていますが、ブラウザー側で
ラジオボタンを選択した際に何を選択したかのデータを取得したいのです。
(下記のHTMLで言えば、割引手形か、手形貸付か、証書貸付というのを取得したいのです)
パラメーターをサーブレットで受け取りたいのですが
うまくいきません
HTMLでHIDDENを使用するとか聞いたことはあるのですがどのようにコーディングすればいいんでしょうか?
よろしくお願いいたします。

<p>
<input type="radio" name="radiobutton" value="radiobutton">
割引手形 
<input type="radio" name="radiobutton" value="radiobutton">
手形貸付 
<input type="radio" name="radiobutton" value="radiobutton">
証書貸付
</p>

ブラウザー側からは
<form action="http://localhost/servlet/yuushi" method=post>
の指定を行っています。
サーブレットでの受け取り方を、
String p2=request.getParameter("radiobutton");
 とすると、p2=radiobuttonとデータがセットされました。

サーブレットの開発を行っていますが、ブラウザー側で
ラジオボタンを選択した際に何を選択したかのデータを取得したいのです。
(下記のHTMLで言えば、割引手形か、手形貸付か、証書貸付というのを取得したいのです)
パラメーターをサーブレットで受け取りたいのですが
うまくいきません
HTMLでHIDDENを使用するとか聞いたことはあるのですがどのようにコーディングすればいいんでしょうか?
よろしくお願いいたします。

<p>
<input type="radio" name="radiobutton" value="...続きを読む

Aベストアンサー

それぞれの項目の value を、ユニークにして下さい。例えば、

<input type="radio" name="radiobutton" value="1"> 割引手形 
<input type="radio" name="radiobutton" value="2"> 手形貸付 
<input type="radio" name="radiobutton" value="3"> 証書貸付

そうすれば、「手形貸付」を選択したときに

String p2 = request.getParameter("radiobutton");

とすれば、p2 は "2" になります。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング