选择组合框值后填充文本框

Question

我已经搜索过，但找不到正确的答案。我有一个组合框，你 select 一个值，然后我希望它 "fetch" 记录的剩余部分并将其显示在文本框中。

这是我当前的代码。不知道从这里去哪里。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Combo</title>
<meta name="generator" content="90 Second Website Builder 10 - http://www.90secondwebsitebuilder.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="combo.css" rel="stylesheet">
<link href="combo.css" rel="stylesheet">
</head>

<body>
<a href="http://www.90secondwebsitebuilder.com" target="_blank"><img src="images/builtwithwwb10.png" alt="90 Second Website Builder" style="position:absolute;left:441px;top:967px;border-width:0;z-index:250"></a>
<?php
    $cn=mysql_connect("localhost","Username","password") or die(mysql_error());
    mysql_select_db("DBname",$cn) or die(mysql_error());
    $sql = "SELECT * FROM tblLoads ORDER BY LoadNumber DESC;";
    $result = mysql_query($sql);
?>
<select name="Loads" size=1 style="position:absolute;left:133px;top:10px;width:81px;height:22px;z-index:1;">

<?php
    while($ri = mysql_fetch_array($result))
    {
        echo "<option value=" .$ri['LoadNumber'] . ">" . $ri['LoadNumber'] . "</option>";
    }
    echo "</select> "
    /* I want to populate these boxes from DB after Combobox Selection
       Data comes from same table as the combobox values */
    <input type="text" id="ShipperName" name="ShipperName" value="" readonly>
    <input type="text" id="ShipperAddr" name="ShipperAddr" value="" readonly>
?>
</body>

</html>

LoadNumber 字段是 table 的主键。只有一个记录对应于该 LoadNumber。这两个文本框是 table "shippername" 和 "shipperaddr" 中的字段名。

Answer 1

注：

您可以使用 javascript 和 Ajax 来完成。
使用mysqli_* instead of the deprecatedmysql_*API.

让我们使用名为 jQuery 的 javascript 库创建一个脚本。下载它 here。

让我们先为您的 select 输入字段分配一个 id 标签。

<select id="loads" .....

然后脚本：

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE THE FILE DEPENDING ON THE JQUERY VERSION YOU HAVE DOWNLOADED -->
<script>

  $(document).ready(function(){ /* PREPARE THE SCRIPT */

    $("#loads").change(function(){ /* TRIGGER THIS WHEN USER HAS SELECTED DATA FROM THE SELECT FIELD */

      var loadnumber = $(this).val(); /* STORE THE SELECTED LOAD NUMBER TO THIS VARIABLE */

      $.ajax({ /* START AJAX */

        type: "POST", /* METHOD TO USE TO PASS THE DATA */
        url: "action.php", /* THE FILE WHERE WE WILL PASS THE DATA */
        data: {"loadnumber": loadnumber}, /* THE DATA WE WILL PASS TO action.php */
        dataType: 'json', /* DATA TYPE THAT WILL BE RETURNED FROM action.php */
        success: function(result){
          /* PUT CORRESPONDING RETURNED DATA FROM action.php TO THESE TWO TEXTBOXES */
          $("#ShipperName").val(result.shippername);
          $("#ShipperAddr").val(result.shipperaddr);
        }

      }); /* END OF AJAX */   

    }); /* END OF CHANGE #loads */

  });

</script>

然后在您的 action.php 上，这将 return 相应的数据，具体取决于 select 从表格中加载的数量。

<?php

  if(!empty($_POST["loadnumber"])){

    /* RE-ESTABLISH YOUR CONNECTION */
    $con = new mysqli("localhost", "Username", "password", "DBname");

    /* CHECK CONNECTION */
    if (mysqli_connect_errno()) {
      printf("Connect failed: %s\n", mysqli_connect_error());
      exit();
    }

    /* PREPARE YOUR QUERY */
    $stmt = $con->prepare("SELECT shippername, shipperaddress FROM tblLoads WHERE LoadNumber = ?");
    $stmt->bind_param("i", $_POST["loadnumber"]); /* PARAMETIZE THIS VARIABLE TO YOUR QUERY */
    $stmt->execute(); /* EXECUTE QUERY */
    $stmt->bind_result($shippername, $shipperaddress); /* BIND THE RESULTS TO THESE VARIABLES */
    $stmt->fetch(); /* FETCH THE RESULTS */
    $stmt->close(); /* CLOSE THE PREPARED STATEMENT */

    /* RETURN THIS DATA TO THE MAIN FILE */
    echo json_encode(array("shippername" => $shippername, "shipperaddr" => $shipperaddress));

  } /* END OF IF NOT EMPTY loadnumber */

?>

选择组合框值后填充文本框

populate textboxes after selecting combobox value

php

mysql

combobox

textbox

注：