前提・実現したいこと

PHP,JavaScript,html,cssを使用してスケジュール表に似たようなWEBアプリを作っています。
月表示は無く、1日～31日までのものです。
日の数字が表示されているボタンを押すと、押したボタンの数字に対応した予定を表示させる予定です。

日の数字が表示されているボタン（id名date_scheduled_open）を押した時だけ画面遷移を行わずにPOST通信を行い、押したボタンのvalue値でPHPファイルに記述しているMySQLのクエリ(SELECT * FROM shihuto WHERE day = '.$_POST['date_scheduled_open'])を実行したいです。
実行環境はWindows7でXAMPPを使っています。

発生している問題

ajaxを使用してみましたが、ボタンをクリックしても、ブラウザでボタンに表示されている値が入っておらず、上手く動作しませんでした。

該当のソースコード

php
1<?php
2$connect = true;
3$message = '';
4error_reporting(E_ALL & ~E_NOTICE);
5try {
6    $dsn='mysql:dbname=schedule;host=localhost;charset=utf8';
7    $user='root';
8    $password='';
9    $dbh=new PDO($dsn,$user,$password);
10    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
11}catch(PDOException $e){
12      $connect = false;
13      exit('Database connection failure ' .$e->getMessage());
14      $message .= 'Database connection failure ' .$e->getMessage() .'';
15}//try-catch
16if ($connect) {
17  $message = 'Database connection success!';
18}//if
19
20function h($s) {
21  return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
22}
23
24  $nums = [];
25  for ($i = 0; $i < 5; $i++) {
26  $col = range($i * 7 + 1, $i * 15 + 11);
27  $nums[$i] = array_slice($col, 0, 7);
28}
29$nums[4][3] = "";
30$nums[4][4] = "";
31$nums[4][5] = "";
32$nums[4][6] = "";
33?>
34
35<!DOCTYPE html>
36<html lang="ja">
37<head>
38  <meta charset="utf-8">
39  <title>Calendar</title>
40  <link rel="stylesheet" href="css.css">
41</head>
42<body>
43 
44  <form method="post" action="" name="Sample1_form" id="Sample1_form" enctype="multipart/form-data">
45  <p><?php echo $message; ?></p>
46  <table>
47      <tr>
48        <th>日</th>
49        <th>月</th>
50        <th>火</th>
51        <th>水</th>
52        <th>木</th>
53        <th>金</th>
54        <th>土</th>
55      </tr>
56      <?php for ($i = 0; $i < 5; $i++) : ?>
57      <tr class="js">
58        <?php for ($j = 0; $j < 7; $j++) : ?>
59        <td>
60            <input type="button" class="date_scheduled_open" id="date_scheduled_open" name="date_scheduled_open"  value="<?php echo $nums[$i][$j];?>">
61            <div id="mask" class="hidden"></div>
62        </td>
63        <?php endfor; ?>
64      </tr>
65      <?php endfor; ?>
66    </table>
67     <div id="date_schesuled_show" name="date_schesuled_show" class="hidden">
68        <table>
69            <tr>
70                <th>
71                  <input type ="text" id="inputdate" name="inputdate" readonly value ="">
72                <th>
73            </tr>
74            <!--DBに格納されている予定を出力する。-->
75            <tr>
76                <td>
77<?php
78
79try{
80  $st = $dbh->query('SELECT * FROM shihuto WHERE day = '.$_POST['date_scheduled_open']);
81  While(true){
82  　$value = $st->fetch(PDO::FETCH_ASSOC);
83  　if($value==false){
84	break;
85  　}
86  　print '<div id="schedule" name="schedule">';
87  　print '<input type="hidden" id="hiddenid" value="'.$value['id'].'">';
88  　print $value['title'];
89  　print '</div>';
90  }//while
91}catch(PDOException $e){
92  echo "error";
93}
94
95　  </td>
96   </tr>
97  </table>
98 </form>
99 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
100 <script src="js.js">
101 </script>
102</body>
103</html>

javaScript
1(function() {
2    'use strict';
3    var dateScheduledOpen = new Array();
4    var dateSchesuledShow = document.getElementById('date_schesuled_show');
5    for (var i = 0; i < 31; i++) {
6         dateScheduledOpen.push(document.getElementsByName('date_scheduled_open')[i]);  
7        　dateScheduledOpen[i].addEventListener('click', function() {
8          　console.log(document.getElementById("date_scheduled_open").value);
9          　dateSchesuledShow.className ='';
10          　mask.className = '';
11          　var hostUrl = 'http://localhost/sihuto/youbi.php';
12          　$.ajax('youbi.php',{
13            　type:'POST',
14            　dataType: 'json',
15            　url : hostUrl,
16            　data:
17              {
18              　'date_scheduled_open': $('#date_scheduled_open').val()
19              }//data
20          });//$.ajax
21          
22        });//addEventLisner
23    }//for
24  })()//function;
25

試したこと

jsのconsole.logでボタンのvalue値を確認したところ、全てのボタンに1が入っていました。

補足情報（FW/ツールのバージョンなど）

使用OS：Windows7
開発環境:XAMPP
PHP version:7.2.9
Jquery : https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js

行動規範の内容に同意します

回答2件

id = date_scheduled_openがfor文で複数作られてませんか？
そのためvalueをうまく取得できていないと思われます。

投稿2018/11/13 07:49

退会済みユーザー

総合スコア0

HaNa96821

2018/11/13 08:12

仰るとおりです。やはり別々のid名にするしか方法は無いでしょうか・・・

退会済みユーザー

2018/11/13 08:21

idはそもそも重複してはいけません。クリックされたボタンのvalueを取得というのはjQueryで実装できるので、調べてみてはいかがでしょうか

HaNa96821

2018/11/13 10:48

承知しました。 idを重複させず、クリックされたボタンのvalueを取得してみます。

行動規範の内容に同意します

ベストアンサー

とりあえず細かくみてませんが、ぱっと見で
jQueryなのに

(function() {

即時関数で始めています

javascript
1$(function(){
2

から始めてみてください

調整版

date_scheduled_openクラスのついたボタンを押すとyoubi.phpにpostで自分のvalueを送る

javascript
1<script>
2$(function(){
3  $('.date_scheduled_open').on('click',function(){
4    $.ajax({
5    type:'POST',
6    dataType: 'json',
7    url : 'youbi.php',
8    data:{'date_scheduled_open':$(this).val()},
9    }).done(function(data){
10      console.log(data);
11    }).fail(function(xhr,err){
12      console.log(err);
13    });
14  });
15});
16</script>
17<form method="post">
18<p>Database connection success!</p>
19<table>
20<tr>
21<th>日</th>
22<th>月</th>
23<th>火</th>
24<th>水</th>
25<th>木</th>
26<th>金</th>
27<th>土</th>
28</tr>
29<tr class="js">
30<td><input type="button" class="date_scheduled_open" value="1"></td>
31<td><input type="button" class="date_scheduled_open" value="2"></td>
32<td><input type="button" class="date_scheduled_open" value="3"></td>
33<td><input type="button" class="date_scheduled_open" value="4"></td>
34<td><input type="button" class="date_scheduled_open" value="5"></td>
35<td><input type="button" class="date_scheduled_open" value="6"></td>
36<td><input type="button" class="date_scheduled_open" value="7"></td>
37</tr>
38<tr class="js">
39<td><input type="button" class="date_scheduled_open" value="8"></td>
40<td><input type="button" class="date_scheduled_open" value="9"></td>
41<td><input type="button" class="date_scheduled_open" value="10"></td>
42<td><input type="button" class="date_scheduled_open" value="11"></td>
43<td><input type="button" class="date_scheduled_open" value="12"></td>
44<td><input type="button" class="date_scheduled_open" value="13"></td>
45<td><input type="button" class="date_scheduled_open" value="14"></td>
46</tr>
47</table>
48
49<div id="date_schesuled_show" name="date_schesuled_show" class="hidden">
50<input type ="text" id="inputdate" name="inputdate" readonly value ="">
51<div id="date_scheduled_close" class="date_scheduled_close">
52閉じる
53</div>
54</form>

投稿2018/11/13 07:15

編集2018/11/14 00:55

yambejp

総合スコア114839

yambejp

2018/11/13 07:19

オブジェクトのつかみかたも、トリガーもなんだかjQueryライクじゃないですね $.ajax()もdoneやfailで戻りを受け取っていないので、成功したのか失敗したのかもよくわからなそうです

HaNa96821

2018/11/13 07:38

$(function(){　から始め、修正いたしました。　再度console.logで確認してみたのですが、value値がどのボタンも１のままになっています。ブラウザ上でhmtlのvalue値を確認してみたのですが、日付ごとのvalueになっていて、JQueryと異なったvalue値を出しています。

yambejp

2018/11/13 07:40

ご提示のHTMLが動的な処理で書いているので再現性がわるいです。全部でなくてもよいので静的なHTMLを提示されるとよいでしょう

HaNa96821

2018/11/13 08:09

PHPファイルとHTMLファイルを、出来るだけ分けるということでしょうか？

yambejp

2018/11/13 08:34

最終的にはPHPに戻るとして、質問に必要な条件がPHPからでは読み取れないので HTMLとしてソースを表示してほしいということです。ちなみにidに問題があるのはすでに別解がありますが classはカスタムdataで処理してもよいでしょう

HaNa96821

2018/11/13 10:55

承知しました。今表示しているHTMLを確認・修正した後、HTMLのソースを掲示します。

HaNa96821

2018/11/13 15:19

本文を修正しようとした結果、文字数制限に引っかかってしまったのでここで掲示させていただきます。 html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Calendar</title> <link rel="stylesheet" href="css.css"> </head> <body> <form method="post" action="" name="Sample1_form" id="Sample1_form" enctype="multipart/form-data"> <p>Database connection success!</p> <table> <tr> <th>日</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> </tr> <tr class="js"> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open1 " name="date_scheduled_open" value="1"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open2 " name="date_scheduled_open" value="2"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open3 " name="date_scheduled_open" value="3"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open4 " name="date_scheduled_open" value="4"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open5 " name="date_scheduled_open" value="5"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open6 " name="date_scheduled_open" value="6"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open7 " name="date_scheduled_open" value="7"> <div id="mask" class="hidden"></div> </td> </tr> <tr class="js"> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open8 " name="date_scheduled_open" value="8"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open9 " name="date_scheduled_open" value="9"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open10 " name="date_scheduled_open" value="10"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open11 " name="date_scheduled_open" value="11"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open12 " name="date_scheduled_open" value="12"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open13 " name="date_scheduled_open" value="13"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open14 " name="date_scheduled_open" value="14"> <div id="mask" class="hidden"></div> </td> </tr> <tr class="js"> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open15 " name="date_scheduled_open" value="15"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open16 " name="date_scheduled_open" value="16"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open17 " name="date_scheduled_open" value="17"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open18 " name="date_scheduled_open" value="18"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open19 " name="date_scheduled_open" value="19"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open20 " name="date_scheduled_open" value="20"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open21 " name="date_scheduled_open" value="21"> <div id="mask" class="hidden"></div> </td> </tr> <tr class="js"> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open22 " name="date_scheduled_open" value="22"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open23 " name="date_scheduled_open" value="23"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open24 " name="date_scheduled_open" value="24"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open25 " name="date_scheduled_open" value="25"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open26 " name="date_scheduled_open" value="26"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open27 " name="date_scheduled_open" value="27"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open28 " name="date_scheduled_open" value="28"> <div id="mask" class="hidden"></div> </td> </tr> <tr class="js"> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open29 " name="date_scheduled_open" value="29"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open30 " name="date_scheduled_open" value="30"> <div id="mask" class="hidden"></div> </td> <td> <input type="button" class="date_scheduled_open" id="date_scheduled_open31 " name="date_scheduled_open" value="31"> <div id="mask" class="hidden"></div> </td> </tr> </table> <div id="date_schesuled_show" name="date_schesuled_show" class="hidden"> <table> <tr> <th> <input type ="text" id="inputdate" name="inputdate" readonly value =""> <th> </tr>  <tr> <td> error </td> </tr> </table> <div id="date_scheduled_close" class="date_scheduled_close"> 閉じる </div> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js.js"> //$(function(){ //}); </script> <script id="script" type="text/javascript" src="js.js" data-param='[]'> </script> </body> </html>

yambejp

2018/11/14 00:56

例示のソースを元に調整版を挙げておきました受け取ったdataを所定の場所に表示させればよいでしょう

HaNa96821

2018/11/14 02:34

調整版を掲示いただき、ありがとうございます。無事、dataを取得できました。

行動規範の内容に同意します

あなたの回答