前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/13 08:12
退会済みユーザー
2018/11/13 08:21
2018/11/13 10:48