时间戳

首页 > 解决方案 > 使用 php 使用动态选择标记填充的文本框字段

javascript - 使用 php 使用动态选择标记填充的文本框字段

问题描述

您好，我对 php 和 javascript 非常陌生（非常），我有一个问题，我正在尝试使用来自我的数据库（phpmyadmin）的数据填充 2 个基于动态选择标记（功能性）的文本框. 我的问题出现在 ajax 上（对此非常新）。我不断收到错误“未捕获的 ReferenceError：$ 未定义”。这是我正在使用的代码。

<?php

$pdo = new PDO("mysql:host=localhost;dbname=test1;charset=utf8", "root", "");
?>
<html>
<head>
        <link type="text/css" rel="stylesheet" href="style.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- You will need jQuery (or anyother javascript framework) to accomplish your goal cause you need ajax -->

        <title>Training</title>
    </head>

    <body>
        <div id="content">
            <h1 align ="center">Add Training</h1>

            <form action="inserttraining.php" method="post">
                <div>
  
                    <p>
                        Employee ID:
                        <select id="id">
                            <option value="">Select one</option>
                            <?php
                            $st = $pdo->prepare("SELECT id FROM testinput");
                            $st->execute();
                            $rows = $st->fetchAll(PDO::FETCH_ASSOC);
                            foreach ($rows as $row) {
                                ?><option value="<?php echo $row ['id']; ?>"><?php echo $row ['id']; ?></option><?php
                            }
                        ?>
                        </select>
                    <p>
                        First name:
                        <input type="text" name="fname" id="fname">
                    </p>
                    <p>
                        Last name:
                        <input type="text" name="lname" id="lname">
                    </p>
                    <p>
                        Training required?
                        <select name="Training">
                            <option value="">Select...</option>
                            <option value="Customer Service">Customer Service</option>
                            <option value="Bailer">Bailer</option>
                            <option value="Reception">Reception</option>
                            <option value="Fish & meat counters">Fish & meat counters</option>
                            <option value="Cheese counters">Cheese counters</option>
                        </select>
                    </p>
                    <input type="submit">
            </form>
        </div>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#id').change(function() { 
                var $self = $(this);
                $.post("getDetails.php", { id : $self.val()}, function(json) {
                    if (json && json.status) {
                        $('#fname').val(json.fname);
                        $('#lname').val(json.lname);
                    }
                })
            });
        })
        
    </script>
    </body>
</html>

<?php
$pdo = new PDO("mysql:host=localhost;dbname=test1;charset=utf8", "root", "");

header("Content-Type:application/json; Charset=utf-8");


$st = $pdo->prepare("SELECT fname, lname FROM testinput WHERE id = :id");
$st->execute(array ('id' => $_POST['id']));
$data = $st->fetch(PDO::FETCH_ASSOC);

echo json_encode(array ('status' => true, 'fname' => $data ['fname'], 'lname' => $data ['lname']));

标签： javascriptphpmysqlajax

解决方案

推荐阅读