人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ページ内に4つのradio の nameグループがあり

function GotoAcc2(){
var frmah = window.document.form2;
frmah.action="xxxxx.php";
frmah.target="_self";
frmah.submit();
}
というonclickについているjsに、『4つのラジオボタンのチェックがないとアラートが出て進めない』
といった命令文を追加したいのですが、分かりません。
助けてください。

●質問者: hidecky
●カテゴリ:ウェブ制作
✍キーワード:js name PHP アラート グループ
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● aiaida333
●20ポイント

わかりません

がんばってください。

http://q.hatena.ne.jp/1258780694


2 ● kebo987654
●50ポイント

nameを使ってラジオボタンを取得してforループでチェックしてみました。

お試しあれ。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<script type="text/javascript" src="test1.js"></script>
</head>
<body>
<form id="form2" name="form2">
<input type="radio" name="radio1">
<input type="radio" name="radio1">
<input type="radio" name="radio1">
<input type="radio" name="radio1">
<input type="button" value="Button1" onclick="GotoAcc2()">
</form>
</body>
</html>

--- test1.js ---

function GotoAcc2(){
var frmah = window.document.form2; 

// フォーム内の name="radio1" を取得
var radio1 = document.getElementsByName( "radio1" );
// ループ
for( var i = 0, l = radio1.length; i < l; ++i )
{
if( radio1[i].checked )
{
// チェックされていたとき
// ループを抜ける
break;
}
}

if( i == l )
{
// 全てのラジオボタンがチェックされていなかったとき
// alertする
alert( "どれかのボタンにチェックを入れてください。" );
}
else
{
// ラジオボタンがチェックされていたとき
// submitする
frmah.action = "xxxxx.php";
frmah.target = "_self";
frmah.submit();
}
}

http://q.hatena.ne.jp/1258844554

◎質問者からの返答

ご回答有難う御座います。本当に困っていて、さらに質問を重ねてしまうのですが、

これはnameが4種類

<input type="radio" name="radio1">

<input type="radio" name="radio1">

<input type="radio" name="radio2">

<input type="radio" name="radio2">

<input type="radio" name="radio3">

<input type="radio" name="radio3">

<input type="radio" name="radio4">

<input type="radio" name="radio4">

のような場合でも有効なのでしょうか・・・・


3 ● kn1967
●50ポイント
<html>
<head>
 <script type="text/javascript">
 <!--
 function GotoAcc2(){
 var frmah = window.document.getElementById("form2");
 var c = 0;
 for (i = 0; i < frmah.elements.length; i++) {
 if (frmah.elements[i].checked == true && frmah.elements[i].type == "radio") {
 c++;
 }
 }
 if (c = 4) {
 frmah.action="xxxxx.php";
 frmah.target="_self";
 frmah.submit();
 } else
 alert("未選択の項目があります。");
 }
 }
 //-->
 </script>
</head>
<body>
 <form id="form2">
 <input type="radio" name="a" id="a" value="1" />a1
 <input type="radio" name="a" id="a" value="2" />a2
 <input type="radio" name="a" id="a" value="3" />a3<br />
 <input type="radio" name="b" id="b" value="1" />b1
 <input type="radio" name="b" id="b" value="2" />b2
 <input type="radio" name="b" id="b" value="3" />b3<br />
 <input type="radio" name="c" id="c" value="1" />c1
 <input type="radio" name="c" id="c" value="2" />c2
 <input type="radio" name="c" id="c" value="3" />c3<br />
 <input type="radio" name="d" id="d" value="1" />d1
 <input type="radio" name="d" id="d" value="2" />d2
 <input type="radio" name="d" id="d" value="3" />d3<br />
 <input type="button" onclick="javascript:GotoAcc2()" value="送信"/>
 </form>
</body>
</html>

フォーム(Form)

◎質問者からの返答

<input radio>のタグが自動で吐き出されるようになっており、それにはidが振ってなく、

name のみで処理しなくてはならなくて、できません(*ノ_<*)エーン


4 ● GoldenDawn
●50ポイント

ちょっと泥臭いですけどこんな感じでどうでしょうか。

フォーム

<form name="form2">
 項目 1
 <input type="radio" name="r1" value="1" />
 <input type="radio" name="r1" value="2" />
 <input type="radio" name="r1" value="3" />
 <br />

 項目 2
 <input type="radio" name="r2" value="1" />
 <input type="radio" name="r2" value="2" />
 <input type="radio" name="r2" value="3" />
 <br />

 項目 3
 <input type="radio" name="r3" value="1" />
 <input type="radio" name="r3" value="2" />
 <input type="radio" name="r3" value="3" />
 <br />

 項目 4
 <input type="radio" name="r4" value="1" />
 <input type="radio" name="r4" value="2" />
 <input type="radio" name="r4" value="3" />
 <br />

 <input type="button" onclick="GotoAcc2()" value="Send" />
 <input type="reset" />
</form>

JavaScript

function GotoAcc2() {
 with (window.document.form2) {
 try {
 for (var i = 0; i < r1.length; ++i) {
 if (r1[i].checked) break ;
 if (i == r1.length - 1) throw "1" ;
 }
 for (var i = 0; i < r2.length; ++i) {
 if (r2[i].checked) break ;
 if (i == r2.length - 1) throw "2" ;
 }
 for (var i = 0; i < r3.length; ++i) {
 if (r3[i].checked) break ;
 if (i == r3.length - 1) throw "3" ;
 }
 for (var i = 0; i < r4.length; ++i) {
 if (r4[i].checked) break ;
 if (i == r4.length - 1) throw "4" ;
 }
 } catch (e) {
 alert("項目 " + e + " が選択されていません") ;
 return ;
 }

 action = "xxxxx.php" ;
 target = "_self" ;
 submit();
 }
}

http://q.hatena.ne.jp

◎質問者からの返答

できません(*ノ_<*)エーン


5 ● kn1967
●100ポイント ベストアンサー

name バージョン

<html>
<head>
 <script type="text/javascript">
 <!--
 function GotoAcc2(){
 var frmah = window.document.form2;
 var c = 0;
 for (i = 0; i < frmah.elements.length; i++) {
 if (frmah.elements[i].checked == true && frmah.elements[i].type == "radio") {
 c++;
 }
 }
 if (c == 4) {
 frmah.action="xxxxx.php";
 frmah.target="_self";
 frmah.submit();
 } else {
 alert("未選択の項目があります。");
 }
 }
 //-->
 </script>
</head>
<body>
 <form name="form2">
 <input type="radio" name="a" value="1" />a1
 <input type="radio" name="a" value="2" />a2
 <input type="radio" name="a" value="3" />a3<br />
 <input type="radio" name="b" value="1" />b1
 <input type="radio" name="b" value="2" />b2
 <input type="radio" name="b" value="3" />b3<br />
 <input type="radio" name="c" value="1" />c1
 <input type="radio" name="c" value="2" />c2
 <input type="radio" name="c" value="3" />c3<br />
 <input type="radio" name="d" value="1" />d1
 <input type="radio" name="d" value="2" />d2
 <input type="radio" name="d" value="3" />d3<br />
 <input type="button" onclick="javascript:GotoAcc2()" value="送信"/>
 </form>
</body>
</html>

http://q.hatena.jp/ダミーでごめんね。

※コメント欄開いてないから、回答にさせてもらいました。

コメント欄開いてたら細かな話も出来て便利なので、開けておくことをお勧めしておきます。

◎質問者からの返答

すみません、はてなに質問する事自体に慣れていませんで。。。

コメント欄というのは質問を出す際に設定しなくてはいけなかったようですね。

残念です。2度も回答いただきありがとうございます。

やってみます。。。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ