フォーム内の値のチェックについて

このようなフォーム(aspでセレクトボックスの数は可変になります。)にてSubmit時に
同じ値が選ばれていたらalertを出すJavaScriptを作りたいのですが、
どのようなものを作ればよろしいでしょうか？


<FORM name="TestForm" action="" method="POST" target="">
<TABLE border="1" cellspacing="0" cellpadding="0" width="100%">
<TR>
<td>1位</td>
<TD>
<select name="Select1">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>

<td>2位</td>
<TD >
<select name="Select1">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>

<td>3位</td>
<TD>
<select name="Select1">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>
</TR>
</TABLE>
<TR><TD>
<INPUT type="submit" value=登録 name=B1 onClick="">
</TD></TR>
</FORM>

No.1 ベストアンサー 回答者： yambejp 回答日時： 2005/11/25 13:07

formはonSubmitでfalseを受け取るとデータを送信しません。

それさえ理解すればそんなに難しく考える必要はない
と思います。
selectの数は可変的とのことですので、オブジェクトの
タイプを見てチェックするようにしました。
もっと簡単な方法があるかもしれませんが、
フローとしては以下のような形になると思います。
お試しください。

余談ですがselectはユニークな名前にした方がよいでしょうね。
勝手に別名にしてあります。あしからず。

<script language=javascript>
function check(){
var f=document.forms["TestForm"];
var a=new Array();
for (var i=0;i<f.length;i++){
if (f.elements[i].type=="select-one"){
var thisValue=f.elements[i].options[f.elements[i].selectedIndex].value;
if(thisValue=="449"){alert((a.length +1)+"番目が未選択");return false;}
for(var j=0;j< a.length ;j++){
if(thisValue==a[j]){alert((j+1)+"番目と"+(a.length+1)+"番目が同じ値");return false;}
}
a[a.length]=thisValue;
}
}
return true;
}
</script>
<FORM name="TestForm" action="check.htm" method="POST" target="" onSubmit="return check()">
<TABLE border="1" cellspacing="0" cellpadding="0" width="100%">
<TR>
<td>1位</td>
<TD>
<select name="Select1">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>

<td>2位</td>
<TD >
<select name="Select2">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>

<td>3位</td>
<TD>
<select name="Select3">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>
</TR>
</TABLE>
<TR><TD>
<INPUT type="submit" value=登録 name=B1>
</TD></TR>
</FORM>

この回答へのお礼

ありがとうございました。無事作ることができました。
いろいろな方法があるのですね、非常に参考になりました。

お礼日時：2005/11/27 09:33

No.3 回答者： BLUEPIXY 回答日時： 2005/11/25 13:52

submit時でなく、選択時にチェックする方で考えてみました。

<select name="Select1">
<select name="Select2" onchange="if(this.options[this.selectedIndex].value==this.form.Select1.options[this.form.Select1.selectedIndex].value){alert('既に選択されています');this.options[0].selected=true;}">
<select name="Select3" onchange="if(this.options[this.selectedIndex].value==this.form.Select1.options[this.form.Select1.selectedIndex].value || this.options[this.selectedIndex].value==this.form.Select2.options[this.form.Select2.selectedIndex].value){alert('既に選択されています');this.options[0].selected=true;}">

この回答へのお礼

ありがとうございました。無事作ることができました。
いろいろな方法があるのですね、非常に参考になりました。

お礼日時：2005/11/27 09:33

No.2 回答者： bdr 回答日時： 2005/11/25 13:14

以下のとおり

出来れば、「onclick」より「onsubmit」のイベントの方が適していると思います

<script language=javascript>
function test(){
var i
var j
var c
c = TestForm.Select1.length;
for (i = 0; i <= c - 1; i++){
for (j = 0; j <= c - 1; j++){
if(TestForm.Select1(i).value == TestForm.Select1(j).value){
alert("だめ");
return false;
}
}
}
}
</script>

<!--<FORM name="TestForm" action="" method="POST" target="">-->
<FORM name="TestForm" action="" method="POST" target="" onClick="return test();">
<TABLE border="1" cellspacing="0" cellpadding="0" width="100%">
<TR>
<td>1位</td>
<TD>
<select name="Select1">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>

<td>2位</td>
<TD >
<select name="Select1">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>

<td>3位</td>
<TD>
<select name="Select1">
<OPTION value="449">[選択なし]</OPTION>
<OPTION value="465">あ</OPTION>
<OPTION value="466">い</OPTION>
<OPTION value="467">う</OPTION>
</select>
</TR>
</TABLE>
<TR><TD>
<!--<INPUT type="submit" value=登録 name=B1 onClick="return test();">-->
<INPUT type="submit" value=登録 name=B1>
</TD></TR>
</FORM>

この回答へのお礼

ありがとうございました。無事作ることができました。
いろいろな方法があるのですね、非常に参考になりました。

お礼日時：2005/11/27 09:34