セレクトボックスの値取得に関して

解決済

質問者：sirius2003
質問日時：2009/11/26 10:45
回答数：3件

こんにちは。今、セレクトボックスの値取得に頭を悩ませています。
具体的には、（送迎バスの）到着時間、出発時間を入力してもらい、
到着時間が出発時間より早くないとアラートを出すような仕掛けを
作りたく思っています。以下のようなスクリプトを作ったのですが、
時間の計算がうまくいかないみたいです。至らぬ点など多々あるかと
思いますが、ご教授よろしくお願いいたします。

<html>
<head><title>select_test</title>
<script type="text/javascript">
function jikoku_chk(){
//到着時刻
arrive_time=eval(document.getElementsByName("HH1").selectedindex)*60+eval(document.getElementsByName("MM1").selectedindex);
//出発時刻
depart_time=eval(document.getElementsByName("HH2").selectedindex)*60+eval(document.getElementsByName("MM2").selectedindex);
if (arrive_time > depart_time){
alert("出発時刻は到着時刻以降でなければなりません");
}else{
alert("入力内容は適切です");
}
</script>
</head>
<body>
<form name="s_box" action="./select_test.html" onsubmit="jikoku_chk()">
到着時間
<select name="HH1">
<option>00
<option>01
<option>02
</select>
:
<select name="MM1">
<option>00
<option>01
<option>02
</select>
<br><br>
出発時間
<select name="HH2">
<option>00
<option>01
<option>02
</select>
:
<select name="MM2">
<option>00
<option>01
<option>02
</select>
<br>
<input type="submit" value="登録">
</form>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2009/11/26 20:06

#1です。

HH[1]やMM[1]はjavascriptで配列を表す表記法です。
ちゃんと確認してはいませんが、これをevalで評価しようとしているので、配列値として評価しようとされるかあるいは構文エラーなどになっている可能性が高いと思われます。
eval(document.s_box）は評価されますが、eval(document.s_box.HH[1]）は評価されないことをご確認ください。
もとのご質問では要素の指定にgetElementsByName()を使用していたのに、なぜこのように変えてしまったのでしょう？

＞javascriptの中でfor文でまわして、一行ずつ処理を行いたいので
＞すが、このような方法は難しいのでしょうか？
対象が2個しかないので、配列にしてもかえって複雑になるだけのような気もしますが…（数がたくさんあれば別ですが）
例えば、
var select_name = ['HH[1]','MM[1]','HH[2]','MM[2]'];
とでもしておいて（もちろんループ内で名前を自動生成しても可）

for (var i=0; i<4; i++) alert(document.getElementsByName(select_name[i])[0].selectedIndex);
または、
for (var i=0; i<4; i++)　alert(document.forms['s_box'].elements[select_name[i]].selectedIndex);
のようにすると、セレクターのインデックス値が順に表示されます。

あるいは、nameに頼らずフォーム内のセレクタを順にみてゆくなら
var sel = document.forms['s_box'].getElementsByTagName('SELECT');
for (var i=0; i<sel.length; i++) alert(sel[i].selectedIndex);
だけでも同様の結果が得られます。

ついでに、
selectedIndexの値は文字列ではなく、数値であることがわかっていますので、evalは必要無くそのままで計算可能です。
value値などを使用する場合は、確かに文字列として扱われる可能性があるのですが、その場合でもparseInt()などを利用なさったほうがよろしいかと…

- 0
- 件

通報する

No.3

回答者： red-seal
回答日時：2009/11/27 23:02

こんな感じでどうでしょう

<html>
<head><title>select_test</title>
<script type="text/javascript">
function jikoku_chk(){
//到着時刻
var arrive_hour = document.getElementById("HH1");
var arrive_minutes = document.getElementById("MM1");
var arrive_time = (parseInt(arrive_hour.options[arrive_hour.selectedIndex].text) * 60)
+ parseInt(arrive_minutes.options[arrive_minutes.selectedIndex].text);

//出発時刻
var depart_hour = document.getElementById("HH2");
var depart_minutes = document.getElementById("MM2");
var depart_time = (parseInt(depart_hour.options[depart_hour.selectedIndex].text) * 60)
+ parseInt(depart_minutes.options[depart_minutes.selectedIndex].text);
alert(arrive_time);
alert(depart_time);
if (arrive_time > depart_time){
alert("出発時刻は到着時刻以降でなければなりません");
return false;
}else{
alert("入力内容は適切です");
return true;
}
}
</script>
</head>
<body>
<form name="s_box" action="./select_test.html">
到着時間
<select id="HH1">
<option>00</option>
<option>01</option>
<option>02</option>
</select>
:
<select id="MM1">
<option>00</option>
<option>01</option>
<option>02</option>
</select>
<br><br>
出発時間
<select id="HH2">
<option>00</option>
<option>01</option>
<option>02</option>
</select>
:
<select id="MM2">
<option>00</option>
<option>01</option>
<option>02</option>
</select>
<br>

<input type="submit" value="登録" onclick="javascript:return jikoku_chk();">
</form>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2009/11/26 11:21

取得値をさかのぼってチェックしていってみるとわかると思いますが、ご提示のコードだと値を取れていません。

document.getElementsByName（）で得られるのは単一要素ではなく配列ですので、直接配列のプロパティなどを取得しようとしても…

selectedindex → selectedIndex
ご提示の場合はindexと実際の値が一致するのでindex値で計算してもＯＫのようですが、通常は一致しないので、index値からvalueを参照することが多いと思います。

あと、スクリプトのfunctionの全体の閉じ「}」が抜けているみたい。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうござました。
下記のとおり、作成しましたところ、正常動作が確認できました。
--------------------
function jikoku_chk(){
//到着時刻
arrive_time=eval(document.s_box.HH1.selectedIndex)*60+eval(document.s_box.MM1.selectedIndex);
alert(arrive_time);

//出発時刻
depart_time=eval(document.s_box.HH2.selectedIndex)*60+eval(document.s_box.MM2.selectedIndex);
alert(depart_time);

if (arrive_time > depart_time){
alert("出発時刻は到着時刻以降でなければなりません");
}else{
alert("入力内容は適切です");
}
}
--------------------

追加で質問で恐縮ですが、SelectのnameをHH[1],MM[1],HH[2],MM[2]等とし、javascriptの部分を、以下のようにしたら、動かなくなりました。

function jikoku_chk(){
//到着時刻
arrive_time=eval(document.s_box.HH[1].selectedIndex)*60+eval(document.s_box.MM[1].selectedIndex);
alert(arrive_time);

//出発時刻
depart_time=eval(document.s_box.HH[2].selectedIndex)*60+eval(document.s_box.MM[2].selectedIndex);
alert(depart_time);

if (arrive_time > depart_time){
alert("出発時刻は到着時刻以降でなければなりません");
}else{
alert("入力内容は適切です");
}
}

------------------
本番環境では、チェックする行が多いので、Select文を上記のように配列風にPHPで自動生成し、javascriptの中でfor文でまわして、一行ずつ処理を行いたいのですが、このような方法は難しいのでしょうか？