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

时间:2015-11-10 01:42:31

标签: php mysql combobox textbox

我搜索过,找不到合适的答案。我有一个组合框,你选择一个值,然后我希望它“取”记录的记录并在文本框中显示。

这是我目前的代码。不知道从哪里开始。

<!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字段是表的主键。将只有一个记录对应于该LoadNumber。这两个文本框是表“shippername”和“shipperaddr”中的字段名。

1 个答案:

答案 0 :(得分:0)

注意:

  • 您可以使用javascript和Ajax来完成。
  • 使用mysqli_*代替deprecated mysql_* API。

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

让我们首先为您的选择输入字段指定一个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上,根据表单中选定的加载编号返回相应的数据。

<?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 */

?>