質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

89.96%

JavaScriptでのValueセット

受付中

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 1,912
nh1223

nh1223

score 33

お世話になります。
つたないコードで申し訳ありませんが、
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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5 件

link

0

getValue() が少々おかしいですね。。。
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/
＞ １、ひとつだけ選択できるselectボックスの場合

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/22 16:18

    誤字失礼です。。。

    ×　ただ、setValue ないの for 分はいらないです。
    ○　ただ、setValue 内の for 文はいらないです。

    キャンセル

  • 2015/04/22 16:23

    度々すいません。分かりずらいと思うので、別途回答を下に記載します。

    キャンセル

  • 2016/04/23 02:12

    > あと、select 要素に対し、getElementById('user').value を行った場合、Internet Explorer は取得できても FireFox などでは取れません。
    Firefox 45.0.2, Google Chrome 50.0.2661.87 m では期待通りに動作しました。
    https://jsfiddle.net/5y79p1zg/
    MDNでもサポートしていない記述は読み取れませんでしたｇ、差し支えなければ未対応となるブラウザ名とバージョンを教えて頂けると有難いです。
    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

    キャンセル

link

0

投稿されている箇所の id="user2[]" ですが、HTML上では、この input 要素は【id プロパティに "user2[]" という文字列で定義されている】と解釈されています。
つまり、"user2" という配列ではなく、"user2[]" という１つの要素なのです。

なので、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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

-1

selectにonchangeイベントを設定してみてはどうでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/22 13:15

    すみません。間違えました。

    キャンセル

  • 2015/04/22 13:17

    各ボタンにonclickイベントを設定してみてはどうでしょうか?

    キャンセル

  • 2015/04/22 16:56

    私も勘違いしましたが、イベント発火のタイミングではなく、値をセットしているところが問題です。
    なので、onClick イベントを設定しても、問題解決にはならないでしょう。

    キャンセル

link

-5

jQuery使うと楽ですよ。

セレクトしたらってのも有りますしね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 89.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る