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

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

ただいまの
回答率

89.10%

MariaDBから取得した情報を一つ選択し、フォームに自動で挿入するソースコード

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,398

AY6M_

score 14

以前請求書処理の質問をさせていただいたものです。

結果形は纏まったのですが、他にも似たような処理をするページもあり、色々と調べて実行してみたのですが、知識不足が故にわからない点がいくつかあり、質問させていただきます。

処理の流れとして、

・モーダルウィンドウを開き、MySQLから取得した顧客データを一覧表示
・選択した顧客データを各[会社名][郵便番号][住所]フォームに出力
(選択ボタンを押すとモーダルウインドウは閉じる)

という動作をさせたいです。

モーダルウインドウを開き顧客情報一覧を表示させるところまではできたのですが、

選択ボタンを押してからモーダルウインドウを閉じ情報をフォームに出力する、スクリプトの記述の仕方がわかりません。

以前の質問で教えて頂いたあるサイトを参照し、

$(function() {

$("#sentaku").click(function(){

$.ajax({
type: "POST",
url: "ajax.php",
data: {
"output": 
},
success: function(j_data){

// 処理を記述

}
});

});

});

http://raining.bear-life.com/jquery/ajax%e3%82%92%e4%bd%bf%e7%94%a8...

とありますが、顧客情報一覧はwhile文で1行ごとに出力しているため、選択のリンクもhref="ajax.php?id='$row=['顧客ID']'" となるかと思いますが、この記述の仕方がどうしていいかわからないのと、フォームに出力するやり方(以前教えて頂いたサイトを参照したり、調べてみたりしたのですが、上手くいかず...)を教えて頂きたいのです。

フォームデータとモーダルウインドウ部分のソースコードを記載しておきます。

フォーム部

<form  action = "kakunin.php" method="post">

<table><tr><th>会社名:</th><td><input type="text" name="coltd" size="45"></td><th>担当者様名:</th><td><input type="text" name="name" size="30"></td><th>郵便番号:</th><td><input type="text" name="znum" size="10"></td></tr>
<tr><th>住所:</th><td colspan="5"><input type="text" name="zyuusyo" size="100%"></td></tr></table>
<input type=submit name=send value="登録">

</form>

モーダルウインドウ部分

<div id="modal-content-02" class="modal-content">
<!-- モーダルウィンドウのコンテンツ開始 -->
<p><h2>顧客情報を選択してください</p>
<p>

<table>
<tr><th>ID</th><th>会社名</th><th>担当者様名</th><th>住所</th><th>電話番号</th><td>選択</td></tr>

<?php
$con = mysql_connect('localhost', 'root', 'パスワード') or die('error(connect)');

mysql_select_db('testdb', $con) or die('error(select_db)');

mysql_set_charset('utf8');

$sql = 'select * from kokyaku';
$result = mysql_query($sql, $con);

while ($row = mysql_fetch_array($result)) {
echo  '<tr><td>' .$row['顧客ID'] . '</td><td>' .$row['coltd'] . '</td><td> ' .$row['担当者様名'].'</td><td>' .$row['住所']. '</td><td>' .$row['電話番号']. '</td><td><button type="button" class="btn">選択</button></td></tr>' ;

}

mysql_close($con);
?>
</table>

</p>
<p><a id="modal-close" class="button-link">閉じる</a></p>

このような場合、どういった記述になるのか教えて頂ければ幸いです。
拙さ全開で申し訳ございませんが、よろしくお願いします。

余談ですが...

phpのmysql系の関数は脆弱性があり、削除されたという情報をお聞きしました。
現状他の機能もこの状態で実装されており、書き換えればならないと思うのですが、小耳にはさむ程度でもよいので効率よく置き換える方法等ご存じであれば教えて頂ければと思います。

追記

改めて見返すとわかりにくかったので、
メイン部分のソースコードそのまま貼ります

<div class="contents">
<!-- 1つ目のコンテンツ [開始] -->
<div id="modal-content-01" class="modal-content">
    <!-- モーダルウィンドウのコンテンツ開始 -->
    <p>1</p>
    <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
    <p><a id="modal-close" class="button-link">閉じる</a></p>
    <!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 1つ目のコンテンツ [終了] -->

<!-- 2つ目のコンテンツ [開始] -->
<div id="modal-content-02" class="modal-content">
    <!-- モーダルウィンドウのコンテンツ開始 -->
    <p><h2>顧客情報を選択してください</p>
    <p><table> 
 <tr><th>ID</th><th>会社名</th><th>担当者様名</th><th>住所</th><th>電話番号</th><td>選択</td></tr> 

<?php 
 $con = mysql_connect('localhost', 'root', 'パスワード') or die('error(connect)'); 

mysql_select_db('testdb', $con) or die('error(select_db)'); 

mysql_set_charset('utf8'); 

$sql = 'select * from kokyaku'; 
 $result = mysql_query($sql, $con); 

while ($row = mysql_fetch_array($result)) { 
 echo  '<tr><td>' .$row['顧客ID'] . '</td><td>' .$row['coltd'] . '</td><td> ' .$row['担当者様名'].'</td><td>' .$row['住所']. '</td><td>' .$row['電話番号']. '</td><td><button type="button" class="btn">選択</button></td></tr>' ; 

} 

mysql_close($con); 
 ?> 
 </table> 

</p> 
 <p><a id="modal-close" class="button-link">閉じる</a></p> 


</p>
    <p><a id="modal-close" class="button-link">閉じる</a></p>
    <!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 2つ目のコンテンツ [終了] -->

<!-- 3つ目のコンテンツ [開始] -->
<div id="modal-content-03" class="modal-content">
    <!-- モーダルウィンドウのコンテンツ開始 -->
    <p>2つ目のモーダルウィンドウです。全体を囲むdiv要素に[id="modal-content-03"]が設定されています。</p>
    <p>「閉じる」か「背景」をクリックするとモーダルウィンドウを終了します。</p>
    <p><a id="modal-close" class="button-link">閉じる</a></p>
    <!-- モーダルウィンドウのコンテンツ終了 -->
</div>
<!-- 3つ目のコンテンツ [終了] -->


      <!-- 右カラム -->
<div id="main">

<h1>請求書作成</h1>


<!--テスト-->

            <form action="" method="post">
                <p>
                    <label for="">会社名</label>
                    <input type="text" name="company_name" />
                </p>
                <p>
                    <button type='submit'>更新</button>
                </p>
            </form>

<!--テストここまで-->

<p><a class="modal-syncer button-link" data-target="modal-content-01">見積もり書のデータを参照する</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-02">顧客情報を自動入力する</a></p>
<p><a class="modal-syncer button-link" data-target="modal-content-03">商品情報を自動入力する</a></p>

<p><button type="button" class="modal-syncer button-lin" data-target="modal-content-02">顧客情報を一覧から入力する</button>&nbsp;<button type="button" class="modal-syncer button-lin" data-target="modal-content-01">見積書データを入力する</button>

<form  action = "kakunin.php" method="post">

<table><tr><th>会社名:</th><td><input type="text" name="coltd" size="45"></td><th>担当者様名:</th><td><input type="text" name="name" size="30"></td><th>郵便番号:</th><td><input type="text" name="znum" size="10"></td></tr>
<tr><th>住所:</th><td colspan="5"><input type="text" name="zyuusyo" size="100%"></td></tr></table>

<table>
<tr><td>*</td><td>商品名</td><td>数量</td><td>単価</td><td>金額</td><td>備考</td></tr>
<tr><td><button type="button" class="modal-syncer button-lin" data-target="modal-content-03">選択</button></td><td><input type="text" name="nm" size="40"></td><td><input type="text" size="2" name="kosuu" value="1"></td><td><input type="text" name="nm" size="7"></td><td><input type="text" name="nm" size="10"></td><td><input type="text" name="nm"></td></tr>


<tr><td><p>プレビュー</p></td>
<td><p><input type=submit name=send value="登録"><br></p></td></tr>

</table>
</form>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • Mr_Roboto

    2016/07/17 09:55

    おはようございます、HTMLはそのまま貼ると見づらいのでコードタグで囲んでくださいね、編集画面の上にある</>というボタンです。

    キャンセル

  • Mr_Roboto

    2016/07/17 09:55

    あ、PHPでしたね、失礼 ^_^;

    キャンセル

回答 1

+1

common.php

<?php

/**
 * common.php
 *
 * @since 2016/07/17
 */
ini_set('display_errors', 1);
error_reporting(E_ALL);

function h($string)
{
    return htmlspecialchars($string, ENT_QUOTES, 'utf-8');
}

function getConnection()
{
    try {
        $host = 'localhost';
        $dbname = 'test';
        $dsn = sprintf('mysql:dbname=%s;host=%s;charset=utf8'
            , $dbname
            , $host
        );
        $user = 'root';
        $password = 'password';
        $options = [
            PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
        ];
        $pdo = new PDO($dsn, $user, $password, $options);
        return $pdo;
    } catch (PDOException $e) {
        throw new Exception($e);
    }
}

index.php

<?php
/**
 * index.php
 *
 * @since 2016/07/17
 */
require_once 'common.php';

try {
    $pdo = getConnection();
    $statement = 'select id, company_name, staff_name, address, tel from kokyaku';
    $stmt = $pdo->prepare($statement);
    $stmt->execute();
    $recSet = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $err = $e->getMessage();
}
?>

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #model {
                display:none;
                position: absolute;
                width: 600px;
                top: 0;
                left: 50%;
                margin-left: -300px;
                background-color: #EEE;
                border: 1px solid #666;
            }
            #model p {
                margin: 0.5em;
            }
        </style>
    </head>
    <body>

        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>会社名</th>
                    <th>担当者名</th>
                    <th>住所</th>
                    <th>電話番号</th>
                    <th>選択</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($recSet as $rec) : ?>
                    <tr>
                        <td><?= h($rec['id']); ?></td>
                        <td><?= h($rec['company_name']); ?></td>
                        <td><?= h($rec['staff_name']); ?></td>
                        <td><?= h($rec['address']); ?></td>
                        <td><?= h($rec['tel']); ?></td>
                        <td>
                            <button class="opendialog" type='button' data-id='<?= h($rec['id']); ?>'>
                                選択
                            </button>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <!-- model -->
        <div id="model">
            <form action="" method="post">
                <p>
                    <label for="">会社名</label>
                    <input type="text" name="company_name" />
                </p>
                <p>
                    <button type='submit'>更新</button>
                </p>
            </form>
        </div>

        <script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#model").hide();
                $("#model button:submit").on('click', function () {
                    $("#model").hide();
                });

                $(".opendialog").on('click', function () {
                    var url = 'ajax.php';
                    var params = {
                        id: $(this).attr('data-id')
                    };
                    $.getJSON(url, params, function (json) {
                        $("#model").show(function () {
                            $(this).find('input[name=company_name]').val(json.company_name);
                        });
                    });
                });
            });
        </script>
    </body>
</html>

ajax.php

<?php

/**
 * ajax.php
 *
 * @since 2016/07/17
 */
require_once 'common.php';

try {
    $id = filter_input(INPUT_GET, 'id');

    $pdo = getConnection();
    $statement = 'select id, company_name, staff_name, address, tel from kokyaku where id=?';
    $stmt = $pdo->prepare($statement);
    $arr = [];
    $arr[] = $id;
    $stmt->execute($arr);
    $recSet = $stmt->fetchAll(PDO::FETCH_ASSOC);

    $res = null;
    if (isset($recSet[0])) {
        $res = $recSet[0];
    }
} catch (PDOException $e) {
    $res = $e->getMessage();
} finally {
    echo json_encode($res);
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/07/21 18:15 編集

    さすがに回答者の立場ですから、「開発者ツール」くらいは当たりまえに知っていますよ。
    「ツール」と言っても、プラグインなのか、デフォルト機能の開発者ツールなのか、また、開発者ツールであってもどの機能を使ってみていて、どう判断しているのかというような、具体的な記述がないと判断できないよってことです。単純に使い方間違っている可能性も排除できません。

    「エラーがない」といっても、使うべき機能を間違っているなんてことがよくあるのです。なので、主に回答者として利用している人は、質問者の言っていることが事実なのか、推測なのか、本当に意図した内容を指して言っているのか、その判断のもとになる根拠が示されないと、回答しにくいのです。

    キャンセル

  • 2016/07/21 23:05

    若葉つけて質問している理由を少しは察していただければと思うのですが…

    少なくともなにもしてない訳ではありませんし、拙い知識ながらも自分で出来ることは出来る限りやっての情報を開示してるのに対して、情報を提示してくださいという割には、その具体的な情報の提示の方法は全く記されていないので、具体的な提示のしようがありません。

    具体的に、
    •何を実行するか
    •何を何に追加するのか
    •どういった情報や項目を提示すればいいのか

    を教えて頂ければと思います。

    あまりにも業務多忙な為あまり調べる時間もなく拙い知識丸出しでお見苦しいかとは存じますがお願いします。

    キャンセル

  • 2016/07/21 23:37 編集

    無償でやってもいいと思える範囲内であれば、お手伝いはしますよ。
    ただ、お金を払って仕事をくれるお客さんがいる立場ですから、丸投げされるよりも手間のかかるお手伝いはできません。

    キャンセル

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

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