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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

5回答

4261閲覧

JavaScriptでのValueセット

nh1223

総合スコア33

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/04/22 03:36

お世話になります。
つたないコードで申し訳ありませんが、
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>

どうぞよろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

jQuery使うと楽ですよ。

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

投稿2016/04/21 23:00

KatsukiSugiura

総合スコア335

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

皆様のご意見を参考にし、自分なりに修正してみたところ、
以下のコードで動作しました。

ありがとうございました。

lang

1function getValue() 2{ 3 var selectValue = document.forms["user_select"].elements["user"].value; 4 return selectValue; 5} 6function setValue() 7{ 8 var val = getValue(); 9 document.getElementById('user1').value = val; 10} 11function setValue2() 12{ 13 var val = getValue(); 14 for (var i = 0; i < document.getElementsByClassName('user2').length; i++) { 15 document.getElementsByClassName('user2')[i].value = val; 16 } 17} 18function setValue3() 19{ 20 var val = getValue(); 21 for (var i = 0; i < document.getElementsByClassName('user3').length; i++) { 22 document.getElementsByClassName('user3')[i].value = val; 23 } 24}
<input type="hidden" name="user1" id="user1" /> <input type="hidden" name="user2" class="user2" /> <input type="hidden" name="user3" class="user3" />

投稿2015/04/23 03:17

nh1223

総合スコア33

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

なので、setValue 内にて for 文で回す必要はございません。

lang

1<input type="hidden" name="user2[]" value="user2[]" /> 2<!-- getElementById("user2[]") にて当要素を取得できる --> 3<script> 4function setValue2() 5{ 6 var val = getValue(); 7 8// for(var count = 0; count < document.form2["user2[]"].length; count++) { 9// document.form2["user2[]"][count].value = val; 10// } 11 12 // これで OK なはず。 13 document.form2["user2[]"].value = val; // 又は document.getElementById('user2[]').value = val; 14} 15</script>

あと、冗長ですが、下記にサンプルを記載しておきます。(動作確認済)

lang

1<!DOCTYPE html> 2<html lang="ja-JP"> 3<head> 4<script> 5 function exec() { 6 setValue(); 7 setValue2(); 8 setValue3(); 9 } 10 function getValue() 11 { 12 var selectValue = document.forms["user_select"].elements["user"].value; 13 return selectValue; 14 } 15 function setValue() 16 { 17 var val = getValue(); 18 document.getElementById('user1').value = val; 19 } 20 function setValue2() 21 { 22 var val = getValue(); 23 document.getElementById("user2[]").value = val; 24 } 25 function setValue3() 26 { 27 var val = getValue(); 28 document.user_select["user3[]"].value = val 29 } 30</script> 31</head> 32<body> 33<form name="user_select"> 34 <select id="user" name="user"> 35 <option value="1">佐藤</option> 36 <option value="2">鈴木</option> 37 <option value="3">高橋</option> 38 </select> 39 <input type="text" id="user1" size=10 value="" /> 40 <input type="text" id="user2[]" size=10 value="" /> 41 <input type="text" id="user3[]" size=10 value="" /> 42 <input type="button" onClick="exec()" value="Run!" /> 43</form> 44</body> 45</html>

投稿2015/04/22 07:32

編集2015/04/22 07:44
usk

総合スコア397

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2015/04/22 04:13

orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orange0190

2015/04/22 04:15

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

2015/04/22 04:17

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

2015/04/22 07:56

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

0

getValue() が少々おかしいですね。。。
select にて選択されている値を取得したい場合は、ちょと面倒です。

下記コードは試していないので、間違っていたらごめんなさい。

lang

1function getValue() { 2 var select = document.getElementById('user1'); 3 alert(select.selectedIndex); 4 alert(select.options[selElement1.selectedIndex].value); 5 alert(select.options[selElement1.selectedIndex].text); 6 return select.options[selElement1.selectedIndex].value; 7}

下記サイトが分かりやすいと思いますので、参考してください。

参考:
http://blog.quall.net/program/225/
> 1、ひとつだけ選択できるselectボックスの場合

投稿2015/04/22 03:52

usk

総合スコア397

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orange0190

2015/04/22 03:55

document.getElementById('user1').valueでも可能ですよ。
usk

2015/04/22 07: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 などでは取れません。
usk

2015/04/22 07:18

誤字失礼です。。。 × ただ、setValue ないの for 分はいらないです。 ○ ただ、setValue 内の for 文はいらないです。
usk

2015/04/22 07:23

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

2016/04/22 17:12

> あと、select 要素に対し、getElementById('user').value を行った場合、Internet Explorer は取得できても FireFox などでは取れません。 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
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問