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

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

ただいまの
回答率

90.00%

HTMLのラジオボタンを押してMySQLのデータを取得して入力フォームに表示したい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,506

tako1119

score 5

まだ初めて二週間のプログラム初心者です。
xamppを使用してPHPとMySQLの勉強をしています。
ネットを見ながら見よう見まねでやっています。

とりあえず練習として、htmlとPHPでユーザーインターフェース
のようなものをつくってみました。
画面上部の各入力フォームにデータを入力すると
DBにデータが登録されるようになっています。
修正と削除ができるように、画面下部の表の左端に設置した
ラジオボタンを選択すると、入力フォームに、DBに登録したデータが
表示されるようにしたいと思っています。
入力フォームの<input>タグのvalueにDBから配列でデータをとって変数に
入れてみたりしたのですが、上手くいきません。
何か良い方法はないでしょうか。ご教授お願い致します。

また、最終的には出力ボタンを押すと、エクセルの指定のフォーマットに
データが流れ、精算表みたいなものを紙で出力できるようにしたいのですが、そういうことは可能なのでしょうか。
よろしくお願い致します。

<!DOCUTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<style type="text/css">
<!--
body {line-height : 180% ; }
-->
</style> 
<title>交通費精算</title>
</head>

<body>
<h1>交通費精算システム</h1>

<form method="post" action="add.php" autocomplete="on">


起票者<select name="name" style="font-size: 16px;"  >

  <option value="">佐藤</option>
  <option value="">鈴木</option>

  </select>

<!-- コメント 間を開ける -->
<span style="margin-right: 5em;"></span>

<input type = "submit" value = "選択データを精算ずみにする">
<br>

起票日
<input type = "date" name = "kihyobi" 
value = "<?php echo date("Y/m/d");?>">
<br>

利用日
<select type = "day"  name = "riyobi" value = "<?php
echo "<select name=\"riyobi\">";

for ($i = 0; $i >-30 ; $i--) {
    echo "<option>".date("Y/m/d",strtotime("+$i day"));
}
echo "</select>";

?> 

~
<!--検索用フォーム利用日2 -->
<select type = "date"  value = "<?php
echo "<select name=\"riyobi2\">";

for ($i = 0; $i >-60 ; $i--) {
    echo "<option>".date("Y/m/d",strtotime("+$i day"));
}
echo "</select>";

?> 

<!-- コメント 間を開ける -->
<span style="margin-right: 3em;"></span>

<input type = "submit" value = "データ検索">

<input type = "submit" 
" onclick="window.open('http://www.jorudan.co.jp/')" value = "路線検索" >
<br>

路線名
<select name="rosen" style="font-size: 16px;" required>

  <option value="地下鉄">地下鉄</option>
  <option value="JR">JR</option>
  <option value="阪急">阪急</option>
  <option value="阪神">阪神</option>
  <option value="南海">南海</option>
  <option value="近鉄">近鉄</option>
  <option value="京阪">京阪</option>
  <option value="阪堺">阪堺</option>
  <option value="泉北高速">泉北高速</option>
  <option value="ニュートラム">ニュートラム</option>
  <option value="大阪モノレール">大阪モノレール</option>



 </select>

<!-- コメント 間を開ける -->
<span style="margin-right: 2em;"></span>

区間
<input type = "text" name = "kukan1" value = "" required >

~

<input type = "text" name = "kukan2" value = "" required >
<br>


<input type="radio" name="teki" value=""checked>往復
<input type="radio" name="teki" value="" >片道

<!-- コメント 間を開ける -->
<span style="margin-right: 2em;"></span>

小計
<input type = "number" name = "syokei" value = ""required >

<!-- コメント 間を開ける -->
<span style="margin-right: 2em;"></span>

未精算額 合計
<input type = "number" name = "gokei" value = "">
<br>


訪問先
<input type = "text" name = "homon" value = "" required>

<!-- コメント 間を開ける -->
<span style="margin-right: 2em;"></span>

<input type = "submit" value = "保存">

<!-- コメント 間を開ける -->
<span style="margin-right: 2em;"></span>

<input type = "submit" value = "削除">

<input type = "submit" value = "出力">

<!-- コメント 間を開ける -->
<p style="margin-top:1em;">

</form>


<?php

//データベースの接続とSQLの操作

$user = "root";
$pass = "1234";

try {
$dbh = new PDO('mysql:host=localhost;dbname=AAA;charset=utf8', $user,$pass);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "select * from kotuhi";
$stmt = $dbh->query($sql);
$result = $stmt->fetchALL(PDO::FETCH_ASSOC);

///////画面下部テーブル////////////////////////////////////
echo "<TABLE  border='1' bordercolor = 'orange'>";
echo "<TR>";

echo "<TD>選択";
echo "</TD>";
echo "<TD>精算";
echo "</TD>";
echo "<TD>出力";
echo "</TD>";
echo "<TD>起票者";
echo "</TD>";
echo "<TD>利用日";
echo "</TD>";
echo "<TD>路線";
echo "</TD>";
echo "<TD>区間";
echo "</TD>";
echo "<TD>適用";
echo "</TD>";
echo "<TD>金額";
echo "</TD>";
echo "<TD>訪問先";
echo "</TD>";

echo "</TR>";

//1ループで1行データ $resultテーブルデータ $rowDBのレコード

foreach ($result as $row) {

        echo "<TR>" ;

        //選択ラジオボタン////////
        echo "<TD>" . "<input type='radio' name='sentaku' 
        value='sentaku'>";
        echo "</TD>";
        //////////////////////////

        //列1 精算を出力//////////////
        echo "<TD>" .htmlspecialchars($row['seisan'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列2 出力を出力//////////////
        echo "<TD>" . htmlspecialchars($row['syutu'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列3 起票者を出力//////////////
        echo "<TD>" . htmlspecialchars($row['name'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列4 利用日を出力//////////////
        echo "<TD>" . htmlspecialchars($row['riyobi'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列5 路線を出力//////////////
        echo "<TD>" . htmlspecialchars($row['rosen'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列6 区間を出力//////////////
        echo "<TD>" . htmlspecialchars($row['kukan'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列7 適用を出力//////////////
        echo "<TD>" . htmlspecialchars($row['teki'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列8 金額を出力//////////////
        echo "<TD>" . htmlspecialchars($row['syokei'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

        //列9 訪問先を出力//////////////
        echo "<TD>" . htmlspecialchars($row['homon'],ENT_QUOTES,'UTF-8');
        echo "</TD>";
        //////////////////////////

}
    echo "</table>\n";
$dbh = null;


} catch (PDOException $e) {
    echo "エラー発生: " . htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8') . "<br>";
    die();
    }

?>

</body>

</html>
<?php
header("Content-Type: text/html; charset=UTF-8");

//変数の設定
$user = "root";
$pass = "1234";
$name     = $_POST['name'];
$kihyobi  = $_POST['kihyobi'];
$riyobi   = $_POST['riyobi'];
$rosen    = $_POST['rosen'];
$kukan1   = $_POST['kukan1'];
$kukan2   = $_POST['kukan2'];
$teki     = $_POST['teki'];
$syokei   = $_POST['syokei'];
$homon    = $_POST['homon'];

$kukan  = $_POST['kukan1'].' ~ '.$_POST['kukan2'];


try {
    $dbh = new PDO('mysql:host=localhost;dbname=bbb', $user,$pass);
    $dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//PDO プリペアードステイトメント プレースホルダの設定
$sql = "insert into kotuhi (name,kihyobi,riyobi,rosen,kukan1,kukan2,teki,syokei,homon,kukan) values (?,?,?,?,?,?,?,?,?,?)";
$stmt = $dbh->prepare($sql);

//値のバインド
$stmt->bindValue(1, $name,PDO::PARAM_STR);
$stmt->bindValue(2, $kihyobi,PDO::PARAM_STR);
$stmt->bindValue(3, $riyobi,PDO::PARAM_STR);
$stmt->bindValue(4, $rosen,PDO::PARAM_STR);
$stmt->bindValue(5, $kukan1,PDO::PARAM_STR);
$stmt->bindValue(6, $kukan2,PDO::PARAM_STR);
$stmt->bindValue(7, $teki,PDO::PARAM_STR);
$stmt->bindValue(8, $syokei,PDO::PARAM_INT);
$stmt->bindValue(9, $homon,PDO::PARAM_STR);

$stmt->bindValue(10, $kukan,PDO::PARAM_STR);

$stmt->execute();
    $dbh = null;
    echo "登録が完了しました<br><br>";
    echo "<a href = 'kotuhi.html'>登録画面へ戻る</a>";

} catch (PDOException $e) {
echo "エラー発生: " . htmlspecialchars($e->getMessage(),ENT_QUOTES) . "<br>";
die();
}

UI

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+1

うまくいかない場合は、ご自身が作成したプログラム(抜粋でも可)を明記したほうが良いかと思います。

入力フォームの<input>タグのvalueにDBから配列でデータをとって変数に 
入れてみたりしたのですが、上手くいきません。 

DB操作に利用しているモジュールなどによって変わってきますが。。。
PDOを利用しているなら、下記サイトが参考になるのではないでしょうか。

http://ponk.jp/php/basic/php_mysql#page_index2

エクセルの指定のフォーマットに 
データが流れ、精算表みたいなものを紙で出力できるようにしたいのですが、そういうことは可能なのでしょうか。 

外部モジュールなどを利用すれば、Excel の xls (or xlsx) 形式でも出力が可能です。
http://mizyupon-rpg.com/posts/719.html

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/01/21 12:17

    ありがとうございます。紹介して頂いたサイトでPDOについてとても分かりやすく説明してあり、勉強になりました。

    キャンセル

checkベストアンサー

0

今回はどういった手法で行うかという観点で回答しております。
具体的なコードは記載しておりません。


該当のプログラムには、下記が必要になります。

A. ラジオボタンが選択されたタイミングで処理を行うJavascript
B. 選択された値からデータを取り出すJavascript
C. Bの結果をフォームに設定するJavascript


A. ラジオボタンが選択されたタイミングで処理を行う Javascript について

 i. ラジオボタンのアクションを検知するイベントハンドラ (onClick, onChange, onSelect 等) を設置する
 ii. ラジオボタンが選択された際に呼び出す関数を作成

例: ラジオボタンが選択された際に呼び出す例

<script>
// ラジオボタンが選択された際に呼び出される関数
function onRadioChanged(selectedValue) {
  alert(selectedValue);
}
</script>

<input type="radio" name="selected" value="1" onChange="onRadioChanged('1')" />
<input type="radio" name="selected" value="2" onChange="onRadioChanged('2')" />
<input type="radio" name="selected" value="3" onChange="onRadioChanged('3')" />


※ 今回はわかりやすくするために、あえてこのような書き方をしております。


B. 選択された値からデータを取り出すJavascript

基本的に、下記どちらかの手法が必要になります。

i. フォームにセットするデータを予め画面内(Javascriptの配列等)に格納しておき、ラジオボタンが選択されたタイミングでフォームに値をセットする
ii. ラジオボタンが選択されたタイミングでサーバーに問い合わせを行い、フォームに値をセットする。

どちらの手法でデータを扱うかは要件によりけりです。
ただ、近年は、(Ajax を用いて)ラジオボタンが選択されたタイミングでサーバーに問い合わせを行い、その結果をフォームにセットするという手法(ii)が一般的です。


C. Bの結果をフォームに設定するJavascript

Bの選択した方法によって変わってくるので、今回は明記しません。
基本的に、Javascript を用いて、input 領域に値をセットするか、form そのものをごそっと入れ替えてしまうかになるでしょう。

○ 参考URL
http://www.ajaxtower.jp/js/event/index3.html
http://uguisu.skr.jp/html/ajax.html

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

修正以前に、上部のフォームからの登録は可能でしょうか?
もし登録ができるのであれば、DBとの接続は問題ないと思います。

データ表示のためには、ラジオボタンをクリックした時、そのデータを特定するデータを処理するPHPに送信しないと該当のデータを取得することはできませんが、そのような処理は行っていますか?

formでsubmitするか、javascriptなどを使ってデータを飛ばしてあげる必要があります。

※PHPの動きとは関係ありませんが、html内にstyleを直書きすると見にくくなってミスも増えるのでCSSで切り分けることをお勧めします。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/01/21 12:20

    ありがとうございます。フォームからDBへの登録はできています。同じページで全部処理できないかと考えてます。CSSも勉強してみます。

    キャンセル

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

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