如何根据下拉列表中的选择自动填充其他字段

时间:2016-05-15 03:59:32

标签: javascript php

我创建了这个页面,根据从数据库派生的下拉选择从我的数据库中获取数据。请帮助我,因为我没有运气。这是我的代码:

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

</head>

<body>
<?php
$connection = mysqli_connect("localhost", "root", "rajat123", "callboard");
$data = "select * from customermaster";
$query = mysqli_query($connection, $data);
?>
<form name="sysadd" id="form1" method="post" action="system_reg2.php">
Customer Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select name="custname" id="custname" onchange="updatetext()">
<?php
    while ($row = $query->fetch_assoc()) {
        echo "<option value=\"{$row['custname']}\">";
        echo $row['custname'];
        echo "</option>";
    }
?>
</select><br /><br />
<input type="text" name="type" id="type" />
<input type="text" name="sl_no" id="sl_no" />
<input type="text" name="config" id="service" />
<input type="text" name="date" id="date" />

</form>
<script type="text/javascript">

        function updateText() {
            var custname2 = document.getElementById("custname").value;
            <?php $data2 = mysqli_query($connection, "SELECT * FROM customermaster WHERE custname = 'custname2'") ; ?> 
            <?php $row = mysqli_fetch_array($data2); ?>
          document.getElementById("type").value = <?php echo $row['type'] ?>;
          document.form1.sl_no.value = <?php echo $row['sl_no'] ?>;
          document.form1.config.value = <?php echo $row['config'] ?>;
          document.form1.date.value = <?php echo $row['date'] ?>;

    }
</script>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

您将服务器端脚本与客户端脚本混淆。 PHP和mySQL都是服务器端脚本。页面加载后,您无法使用javascript(客户端脚本)更新页面上的服务器端数据。在用户更改第一个下拉列表后,您必须提交页面,并让PHP读取用户输入的内容并显示下一个项目。我会将表单操作留空,以便表单提交到自己的页面,因此所有代码都在一个页面中。

示例表单代码:

<form action="" method="post">

示例PHP代码:

if (isset($_POST['form_variable']))
{
    // Perform lookup of next drop-down data based on last drop-down data
}

在填充所有下拉菜单后,您可以使用PHP重定向到system_reg2.php,或者只需在页面底部有一个提交按钮即可。

答案 1 :(得分:0)

PHP生成发送给客户端的HTML页面。完成后,请求将关闭,并且用户代理(浏览器)将处理其他所有内容。您必须先在请求中提供所有可能的数据,或者必须将选择发送回服务器,以根据您当前的选择请求包含数据的新响应。您可以通过重新加载漏洞页面或通过javascript通过AJAX请求所需日期更新页面的一部分来实现。 JQuery是一个帮助更容易处理AJAX请求的框架。