从数据库中获取值,如果下拉值更改,则填充所有文本框

时间:2018-01-30 04:29:49

标签: javascript php sql

我正在尝试填充所有文本框值取决于下拉值选择。而且我还通过sql查询填充下拉值。这是HTML代码:

<select name="name" ID="name" class="form-control">
<option value="Select">Select</option>
<?php
$qu="Select DISTINCT Cname from Client_table";
$res=mysqli_query($con,$qu);
while($r=mysqli_fetch_row($res))
{ 
    echo "<option value='$r[0]'> $r[0] </option>";

}
?> 
</select>
<label>Address</label><input type="text" name="add"/>
<label>Contact</label><input type="text" name="con"/>

数据库:

  Client_table
   C_no             Cname           Caddress          Ccontact
    1               Mohit             xyz             0123645789
    2               Ramesh            abc             7485962110

我很困惑,如何根据下拉选择查找客户的地址和联系人,并使用此值填充文本框

5 个答案:

答案 0 :(得分:2)

将查询更改为

Select DISTINCT Cname,Caddress,Ccontact from Client_table

并更改以下声明

echo "<option value='$r[0]'> $r[0] </option>";

echo '<option data-add="'.$r[1].'" data-con="'.$r[2].'" value='.$r[0].'> '.$r[0].' </option>';

将选择修改为

<select name="name" ID="name" class="form-control" onchange="myFunction()"> 

添加以下javascript

function myFunction(){
 var index = document.getElementById("name").selectedIndex;
    var add = document.getElementById("name").options[index].getAttribute("data-add");
var con = document.getElementById("con").options[index].getAttribute("data-con");
document.getElementsByName("add")[0].value = add;
document.getElementsByName("con")[0].value = con;
}

JsFiddle Code

答案 1 :(得分:2)

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname="stack";
// Create connection
try {
    $conn = new mysqli($servername, $username, $password, $dbname);
    // set the PDO error mode to exception

    echo "Connected successfully";
}
catch(PDOException $e)
{
    echo "Connection failed: " . $e->getMessage();
}
?>
<select name="name" ID="name" onchange="myFunction()" class="form-control">
<option value="Select">Select</option>
<?php
$qu="Select DISTINCT Cname,Caddress,Ccontact from Client_table";
$res=$conn->query($qu);

while($r=mysqli_fetch_row($res))
{ 
    echo "<option data-add='$r[1]'  data-con='$r[2]'  value='$r[0]'> $r[0] </option>";
}
?> 
</select>
<label>Address</label><input type="text" name="add" id="add"/>
<label>Contact</label><input type="text" name="con" id="con"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>


    function myFunction(){
        var address = $('#name').find(':selected').data('add');
        var contact = $('#name').find(':selected').data('con');
        $('#add').val(address);
        $('#con').val(contact);
    }
</script>

希望它能够解决.. 如果您发现任何问题,请通知我。祝您好运。

答案 2 :(得分:1)

一点说明:第一次访问页面(index.php)时,数据会加载到组合框中。每个option代码都会将客户编号作为值(C_no)和其他详细信息接收为文本。

另一方面,当您在组合框中选择一个值时,您需要从数据库中获取其他客户端数据。为此你需要jquery和ajax。有了它,当组合框的值发生变化时,您必须向服务器发出ajax请求(getClient.php)。作为响应,它会向您发送数据库表中的相应数据。然后,您可以将数据放在任何您喜欢的位置 - 在这种情况下输入。

一点建议:我建议你开始使用预准备语句 - 为了避免sql注入 - 并且不要混合php代码从db中使用html代码获取数据。把它们分开。首先,在页面顶部获取数据并将其保存到数组中。然后,在html代码中,仅使用数组迭代获取的数据。

祝你好运。

的index.php

<?php
require 'connection.php';

$sql = 'SELECT C_no, Cname, Caddress FROM Client_table ORDER BY Cname ASC';

// Prepare the statement.
$statement = mysqli_prepare($connection, $sql);

// Execute the statement.
mysqli_stmt_execute($statement);

// Get the result set from the prepared statement.
$result = mysqli_stmt_get_result($statement);

// Fetch the data and save it into an array for later use.
$clients = mysqli_fetch_all($result, MYSQLI_ASSOC);

// Free the memory associated with the result.
mysqli_free_result($result);

// Close the prepared statement. It also deallocates the statement handle.
mysqli_stmt_close($statement);
?>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#name').change(function (event) {
                    var cNo = $(this).val();

                    if (cNo === 'Select') {
                        $('#address').val('');
                        $('#contact').val('');
                    } else {
                        $.ajax({
                            method: 'post',
                            dataType: 'json',
                            url: 'getClient.php',
                            data: {
                                'cNo': cNo
                            },
                            success: function (response, textStatus, jqXHR) {
                                if (!response) {
                                    alert('No client data found.');
                                } else {
                                    $('#address').val(response.address);
                                    $('#contact').val(response.contact);
                                }
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert('An error occurred. Please try again.');
                            },
                            cmplete: function (jqXHR, textStatus) {
                                //...
                            }
                        });
                    }
                });
            });
        </script>

        <style type="text/css">
            body {
                padding: 30px;
            }

            input, select {
                display: block;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <select name="name" id="name" class="form-control">
                <option value="Select">- Select -</option>
                <?php
                foreach ($clients as $client) {
                    ?>
                    <option value="<?php echo $client['C_no']; ?>">
                        <?php echo $client['Cname'] . ' (' . $client['Caddress'] . ')'; ?>
                    </option>
                    <?php
                }
                ?> 
            </select>

            <label>Address</label>
            <input type="text" id="address" name="address"/>

            <label>Contact</label>
            <input type="text" id="contact" name="contact"/>
        </div>

    </body>
</html>

getClient.php

<?php

require 'connection.php';

// Validate posted value.
if (!isset($_POST['cNo']) || empty($_POST['cNo'])) {
    echo json_encode(FALSE);
    exit();
}

$cNo = $_POST['cNo'];

$sql = 'SELECT 
            Caddress AS address,
            Ccontact AS contact
        FROM Client_table 
        WHERE C_no = ? 
        LIMIT 1';

// Prepare the statement.
$statement = mysqli_prepare($connection, $sql);

/*
 * Bind variables for the parameter markers (?) in the 
 * SQL statement that was passed to prepare(). The first 
 * argument of bind_param() is a string that contains one 
 * or more characters which specify the types for the 
 * corresponding bind variables.
 * 
 * @link http://php.net/manual/en/mysqli-stmt.bind-param.php
 */
mysqli_stmt_bind_param($statement, 'i', $cNo);

// Execute the statement.
mysqli_stmt_execute($statement);

// Get the result set from the prepared statement.
$result = mysqli_stmt_get_result($statement);

// Fetch the data and save it into an array for later use.
$clientDetails = mysqli_fetch_array($result, MYSQLI_ASSOC);

// Free the memory associated with the result.
mysqli_free_result($result);

// Close the prepared statement. It also deallocates the statement handle.
mysqli_stmt_close($statement);

if (!isset($clientDetails) || !$clientDetails) {
    echo json_encode(FALSE);
} else {
    echo json_encode($clientDetails);
}

exit();

connection.php

<?php 

// Db configs.
define('HOST', 'localhost');
define('PORT', 3306);
define('DATABASE', 'your-db');
define('USERNAME', 'your-user');
define('PASSWORD', 'your-pass');

// Display eventual errors.
error_reporting(E_ALL);
ini_set('display_errors', 1); /* SET IT TO 0 ON A LIVE SERVER! */

// Enable internal report functions.
$mysqliDriver = new mysqli_driver();
$mysqliDriver->report_mode = (MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);

// Create db connection.
$connection = mysqli_connect(HOST, USERNAME, PASSWORD, DATABASE, PORT);

创建表格语法

DROP TABLE IF EXISTS `Client_table`;

CREATE TABLE `Client_table` (
  `C_no` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `Cname` varchar(100) DEFAULT NULL,
  `Caddress` varchar(100) DEFAULT NULL,
  `Ccontact` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`C_no`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `Client_table` (`C_no`, `Cname`, `Caddress`, `Ccontact`)
VALUES
    (1,'Mohit','xyz','0123645789'),
    (2,'Ramesh','abc','7485962110'),
    (5,'Tanja','def','1232347589'),
    (6,'Paul','pqr','0797565454'),
    (7,'Mohit','klm','0123645789');

答案 3 :(得分:1)

JavaScript文件:

 function getdata(str) {

 if (str == "")

 {

     document.getElementById("no_of_sms").value = "";
     document.getElementById("no_of_days").value = "";
     document.getElementById("descr").value = "";
     document.getElementById("state-pkg").value = "";
     document.getElementById("price-pkg").value = "";

     return;

}

if (window.XMLHttpRequest) 

{ 

    xmlhttp = new XMLHttpRequest();

} 
else
{

    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
        var data = xmlhttp.responseText.split("#");
        var db_no_of_sms = decodeURIComponent(data[0]);
        var db_no_of_days = decodeURIComponent(data[1]);
        var db_f_state = decodeURIComponent(data[2]);
        var db_f_price = decodeURIComponent(data[3]);
        var db_f_desc = decodeURIComponent(data[4]);
        document.getElementById("no_of_sms").value=db_no_of_sms;
        document.getElementById("no_of_days").value = db_no_of_days;
        document.getElementById("descr").value = db_f_desc;
        document.getElementById("state-pkg").value = db_f_state;
        document.getElementById("price-pkg").value = db_f_price;
}


  }

xmlhttp.open("GET","functions/getdata.php?q="+str,true);

xmlhttp.send();

}

PHP文件:

<?php
        $q = $_GET['q'];
         $host="localhost";
          $db_username="root";
          $db_password=""; 

          $con = mysqli_connect("$host", "$db_username", "$db_password"); 
           if (!$con)
             {
            die('Could not connect: ' . mysqli_error($con));
              }
             mysqli_select_db($con,"business_details");
             $sql="SELECT * FROM packages where p_name = '$q'";
            $result = mysqli_query($con,$sql);
             $row=mysqli_fetch_assoc($result);
           $db_no_of_sms = $row['no_of_sms'];
          $db_no_of_days = $row['days'];
         $db_f_state = $row['state'];
          $db_f_price = $row['price'];
        $db_f_desc = $row['description'];
         echo 
     $db_no_of_sms."#".$db_no_of_days."#".$db_f_state."#".$db_f_price."#".$db_f_desc;

    ?>

答案 4 :(得分:-1)

  type: "GET",
  dataType: "json",                      
  success: function(data) {
      console.log(data[0]['qty']);

      $.each(data, function(key, value) {
          $('#qty').val(data[0]['qty']);
      });
  }
});