JavaScriptでのValueセット
受付中
回答 5
投稿
- 評価
- クリップ 0
- VIEW 1,912
つたないコードで申し訳ありませんが、
JavaScriptの処理がうまくいかず悩んでおります。
どこをどう直せば良いのか、アドバイス頂けると幸いです。
●何がしたいか:
カレンダーの各ボタンを押下すると、JavaScriptの処理で
セレクトボックスで選んだユーザーの番号が、
<input type="hidden" name="user" id="user1" />
<input type="hidden" name="user2\[\]" id="user2\[\]" />
<input type="hidden" name="user3\[\]" id="user3\[\]" />
のvalueにセットされるようにしたい
<\?php
\$year = isset\(\$_POST\['year'\]\) \? intval\(\$_POST\['year'\]\) : date\('Y'\);
\$month = isset\(\$_POST\['month'\]\) \? intval\(\$_POST\['month'\]\) : date\('m'\);
\$day = mktime\(0, 0, 0, \$month, 1, \$year\);
\$first = date\('w', \$day\);
\$total = date\('t', \$day\);
\$week = ceil\(\$total / 7\);
if \(\(\$total % 7 > 7 - \$first\) || \(\$total % 7 == 0 && \$first != 0\)\) {
\$week\+\+;
}
\?>
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<title>master\.php</title>
<link rel="stylesheet" type="text/css" href="http://maxcdn\.bootstrapcdn\.com/font-awesome/4\.3\.0/css/font-awesome\.min\.css" />
<link rel="stylesheet" type="text/css" href="http://maxcdn\.bootstrapcdn\.com/bootstrap/3\.3\.2/css/bootstrap\.min\.css" />
<link rel="stylesheet" type="text/css" href="http://maxcdn\.bootstrapcdn\.com/bootstrap/3\.3\.2/css/bootstrap-theme\.min\.css" />
<script type="text/javascript" charset="UTF-8" src="http://ajax\.googleapis\.com/ajax/libs/jquery/1\.11\.2/jquery\.min\.js"></script>
<!--\[if lt IE 9\]>
<script type="text/javascript" charset="UTF-8" src="https://oss\.maxcdn\.com/html5shiv/3\.7\.2/html5shiv\.min\.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://oss\.maxcdn\.com/respond/1\.4\.2/respond\.min\.js"></script>
<!\[endif\]-->
<script type="text/javascript" charset="UTF-8" src="https://maxcdn\.bootstrapcdn\.com/bootstrap/3\.3\.2/js/bootstrap\.min\.js"></script>
<script>
//<!\[CDATA\[
function getValue\(\)
{
var selectValue = document\.forms\["user_select"\]\.elements\["user"\]\.value;
return selectValue;
}
function setValue\(\)
{
var val = getValue\(\);
document\.getElementById\('user1'\)\.value = val;
}
function setValue2\(\)
{
var val = getValue\(\);
for\(var count = 0; count < document\.form2\["user2\[\]"\]\.length; count\+\+\) {
document\.form2\["user2\[\]"\]\[count\]\.value = val;
}
}
function setValue3\(\)
{
var val = getValue\(\);
for\(var count = 0; count < document\.form3\["user3\[\]"\]\.length; count\+\+\) {
document\.form3\["user3\[\]"\]\[count\]\.value = val;
}
}
//\]\]>
</script>
</head>
<body>
<table>
<tr>
<td><label>ユーザー:</label></td>
<td>
<form name="user_select">
<select id="user" name="user">
<option value="1">佐藤</option>
<option value="2">鈴木</option>
<option value="3">高橋</option>
</select>
</form>
</td>
</tr>
</table>
<table class="table">
<thead>
<tr>
<th rowspan="<\?= \(\$week \+ 2\) \?>" class="prev">
<form action="master\.php" method="post">
<\?php
if \(\$month == 1\) {
echo "<input type='hidden' name='year' value='" \. \(\$year - 1\) \."' />";
echo "<input type='hidden' name='month' value='12' />";
} else {
echo "<input type='hidden' name='year' value='" \. \$year \."' />";
echo "<input type='hidden' name='month' value='" \. \(\$month - 1\) \."' />";
}
\?>
<button type="submit"><i class="fa fa-angle-double-left"></i>前月</button>
</form>
</th>
<th colspan="6">
<form action="detail\.php" method="post" name="form" onSubmit="setValue\(\)">
<input type="hidden" name="selectflg" value="1" />
<input type="hidden" name="user" id="user1" />
<input type="hidden" name="year" value="<\?= \$year \?>" />
<input type="hidden" name="month" value="<\?= \$month \?>" />
<input type="hidden" name="start_day" value="1" />
<input type="hidden" name="end_day" value="<\?= \$total \?>" />
<input type="submit" value="<\?= \$year \?>年<\?= \$month \?>月" />
</form>
</th>
<th rowspan="<\?= \(\$week \+ 2\) \?>" class="next">
<form action="master\.php" method="post">
<\?php
if \(\$month == 12\) {
echo "<input type='hidden' name='year' value='" \. \(\$year \+ 1\) \."' />";
echo "<input type='hidden' name='month' value='1' />";
} else {
echo "<input type='hidden' name='year' value='" \. \$year \."' />";
echo "<input type='hidden' name='month' value='" \. \(\$month \+ 1\) \."' />";
}
\?>
<button type="submit">次月<i class="fa fa-angle-double-right"></i></button>
</form>
</th>
</tr>
</thead>
<tbody>
<tr>
<th class="week">週</th>
<th class="sunday">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th class="saturday">土</th>
</tr>
<tr>
<\?php
for \(\$i = 1; \$i <= \$week \* 7; \$i\+\+\) {
if \(\$i % 7 == 1\) {
\?>
<tr>
<td class="week">
<form action="detail\.php" method="post" name="form2" onSubmit="setValue2\(\)">
<input type="hidden" name="selectflg" value="2" />
<input type="hidden" name="user2\[\]" value="user2\[\]" />
<input type="hidden" name="year" value="<\?= \$year \?>" />
<input type="hidden" name="month" value="<\?= \$month \?>" />
<\?php
if \(\$i - \$first >= 0\) {
if \(\$i - \$first \+ 6 >= \$total\) {
echo "<input type='hidden' name='start_day' value='" \. \(\$i - \$first\) \. "' />";
echo "<input type='hidden' name='end_day' value='" \. \$total \. "' />";
} else {
echo "<input type='hidden' name='start_day' value='" \. \(\$i - \$first\) \. "' />";
echo "<input type='hidden' name='end_day' value='" \. \(\$i - \$first \+ 6\) \. "' />";
}
} else {
echo "<input type='hidden' name='start_day' value='1' />";
echo "<input type='hidden' name='end_day' value='" \. \(\$i - \$first \+ 6\) \. "' />";
}
\?>
<button type="submit"><i class="fa fa-caret-right"></i></button>
</form>
</td>
<\?php
}
if \(\(\$i -1 < \$first\) || \(\$i > \$total \+ \$first\)\) {
echo "<td><font color=#c0c0c0>・</font></td>";
} else {
if \(\$i % 7 == 1\) {
\?>
<td class="sunday">
<form action="detail\.php" method="post" name="form3" onSubmit="setValue3\(\)">
<input type="hidden" name="selectflg" value="3" />
<input type="hidden" name="user3\[\]" id="user3\[\]" />
<input type="hidden" name="year" value="<\?= \$year \?>" />
<input type="hidden" name="month" value="<\?= \$month \?>" />
<input type="hidden" name="day" value="<\?= \(\$i - \$first\) \?>" />
<input type="submit" value="<\?= \(\$i - \$first\) \?>" />
</form>
</td>
<\?php
} elseif \(\$i % 7 == 0\) {
\?>
<td class="saturday">
<form action="detail\.php" method="post" name="form3" onSubmit="setValue3\(\)">
<input type="hidden" name="selectflg" value="3" />
<input type="hidden" name="user3\[\]" id="user3\[\]" />
<input type="hidden" name="year" value="<\?= \$year \?>" />
<input type="hidden" name="month" value="<\?= \$month \?>" />
<input type="hidden" name="day" value="<\?= \(\$i - \$first\) \?>" />
<input type="submit" value="<\?= \(\$i - \$first\) \?>" />
</form>
</td>
<\?php
} else {
\?>
<td>
<form action="detail\.php" method="post" name="form3"" onSubmit="setValue3\(\)">
<input type="hidden" name="selectflg" value="3" />
<input type="hidden" name="user3\[\]" id="user3\[\]" />
<input type="hidden" name="year" value="<\?= \$year \?>" />
<input type="hidden" name="month" value="<\?= \$month \?>" />
<input type="hidden" name="day" value="<\?= \(\$i - \$first\) \?>" />
<input type="submit" value="<\?= \(\$i - \$first\) \?>" />
</form>
</td>
<\?php
}
}
}
if \(\$i % 7 == 0\) {
echo "</tr>";
}
}
\?>
</tr>
</tbody>
</table>
</body>
</html>
どうぞよろしくお願い致します。-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
select にて選択されている値を取得したい場合は、ちょと面倒です。
function getValue() {
var select = document.getElementById('user1');
alert(select.selectedIndex);
alert(select.options[selElement1.selectedIndex].value);
alert(select.options[selElement1.selectedIndex].text);
return select.options[selElement1.selectedIndex].value;
}
参考:
http://blog.quall.net/program/225/
> 1、ひとつだけ選択できるselectボックスの場合
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
つまり、"user2" という配列ではなく、"user2[]" という1つの要素なのです。
なので、setValue 内でfor 文でぐるぐる回す必要はございません。
<input type="hidden" name="user2[]" value="user2[]" />
<!-- getElementById("user2[]") にて当要素を取得できる -->
<script>
function setValue2()
{
var val = getValue();
// for(var count = 0; count < document.form2["user2[]"].length; count++) {
// document.form2["user2[]"][count].value = val;
// }
// これで OK なはず。
document.form2["user2[]"].value = val; // 又は document.getElementById('user2[]').value = val;
}
</script>
あと、冗長ですが、下記にサンプルを記載しておきます。(動作確認済)
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<script>
function exec() {
setValue();
setValue2();
setValue3();
}
function getValue()
{
var selectValue = document.forms["user_select"].elements["user"].value;
return selectValue;
}
function setValue()
{
var val = getValue();
document.getElementById('user1').value = val;
}
function setValue2()
{
var val = getValue();
document.getElementById("user2[]").value = val;
}
function setValue3()
{
var val = getValue();
document.user_select["user3[]"].value = val
}
</script>
</head>
<body>
<form name="user_select">
<select id="user" name="user">
<option value="1">佐藤</option>
<option value="2">鈴木</option>
<option value="3">高橋</option>
</select>
<input type="text" id="user1" size=10 value="" />
<input type="text" id="user2[]" size=10 value="" />
<input type="text" id="user3[]" size=10 value="" />
<input type="button" onClick="exec()" value="Run!" />
</form>
</body>
</html>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
以下のコードで動作しました。
ありがとうございました。
function getValue()
{
var selectValue = document.forms["user_select"].elements["user"].value;
return selectValue;
}
function setValue()
{
var val = getValue();
document.getElementById('user1').value = val;
}
function setValue2()
{
var val = getValue();
for (var i = 0; i < document.getElementsByClassName('user2').length; i++) {
document.getElementsByClassName('user2')[i].value = val;
}
}
function setValue3()
{
var val = getValue();
for (var i = 0; i < document.getElementsByClassName('user3').length; i++) {
document.getElementsByClassName('user3')[i].value = val;
}
}
<input type="hidden" name="user1" id="user1" />
<input type="hidden" name="user2" class="user2" />
<input type="hidden" name="user3" class="user3" />
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
-1
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
-5
jQuery使うと楽ですよ。
セレクトしたらってのも有りますしね。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.96%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/04/22 12:55
2015/04/22 16:17
getValue() は問題ないみたいです。
ただ、setValue ないの for 分はいらないです。
for (var count = 0; count < document.form2["user2[]"].length; count++) {
document.form2["user2[]"][count].value = val;
}
→
document.getElementById('user2[]').value = getValue();
です。
名称、ID に記載されている大括弧は、配列ではなくあくまで文字列として扱われます。
あと、ちなみに、ちょいとフォローを。。。
select 要素の id 属性は 'user1' ではなく、'user' でしたね。
あと、select 要素に対し、getElementById('user').value を行った場合、Internet Explorer は取得できても FireFox などでは取れません。
2015/04/22 16:18
× ただ、setValue ないの for 分はいらないです。
○ ただ、setValue 内の for 文はいらないです。
2015/04/22 16:23
2016/04/23 02:12
Firefox 45.0.2, Google Chrome 50.0.2661.87 m では期待通りに動作しました。
https://jsfiddle.net/5y79p1zg/
MDNでもサポートしていない記述は読み取れませんでしたg、差し支えなければ未対応となるブラウザ名とバージョンを教えて頂けると有難いです。
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement#Browser_compatibility
http://www2u.biglobe.ne.jp/~oz-07ams/2003/HTML/HTMLSelectElement.html#HTMLSelectElement-value