根据选择标签的选择自动填充表单中的字段（下拉菜单）答案

【问题标题】：Autofill of fields in a form depending on the selection from a select tag (drop down menu)根据选择标签的选择自动填充表单中的字段（下拉菜单）
【发布时间】：2012-10-25 08:07:02
【问题描述】：

我有一个带有选择标签的表单；从下拉列表中选择一个项目时，表单字段的其余部分应相应填写。请注意，所有表单数据均来自 mysql 数据库。以下是我的代码：

    <script language="javascript" type="text/javascript">
            function populateData($id)
            {
                alert('in populateData');
                y = document.getElementById("selectCard");
                document.getElementById("to_address").value = to_address[y.selectedIndex];
                document.getElementById("subject").value = subject[y.selectedIndex];
                document.getElementById("email_content").value = email_content[y.selectedIndex];
            }
    </script>
    <body>
        <?php
            mysql_connect("localhost", "someUser", "password") or die("Connection Failed");
            mysql_select_db("mns")or die("Connection Failed");
            $query = "SELECT * FROM table";
            $result = mysql_query($query);
        ?>              
        <select id="selectCard" class="dropdown" onchange="populateData($id)">
            <?php
                while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
            ?>  
            <option value="<?php echo $line['source_name'];?>"> <?php echo $line['source_name'];?>
            <?php
                $id = $line['source_id'];           
                $source_name = $line['source_name'];
                $source_email = $line['source_email'];
                $phone_no = $line['source_id'];
                $disteller_function = $line['disteller_function'];
                }
            ?>
        </select>               
        <P><INPUT ID="to_address" TYPE="TEXT" NAME="to_address" SIZE="25"></P>    
        <P><INPUT ID="subject" TYPE="TEXT" NAME="subject" SIZE="25"></P>         
        <P><INPUT ID="email_content" TYPE="TEXT" NAME="email_content" SIZE="500"></P>         
        <P><INPUT TYPE="SUBMIT" VALUE="Submit" NAME="B1"></P>                       
    </body>

当我将 '$id' 作为参数传递时，'populateData($id)' 函数不会被调用。当我删除参数时，代码可以工作，但我在其余的表单字段中得到 'undefined'。

非常感谢任何帮助。

七无

【问题讨论】：

标签： php javascript html mysql parameter-passing

【解决方案1】：

@elcodedocle，首先感谢您的调查。虽然上述解决方案对我不起作用，但我通过以下方式完成了它，

function populateData(id){
...
}
...
<select id="selectCard" class="dropdown" onchange="populateData(this.value)">

将所有参数附加到值标签。你是对的，不能将 php 变量传递给 javascript 函数。

再次感谢，

七无

【讨论】：

【解决方案2】：

首先，您将参数 $id 传递给populateData() 似乎很奇怪，因为您没有在该函数内的任何地方使用它。也许你应该重新检查你的代码，看看它是否符合你的设计，你真正想要做什么以及应该如何去做。

您的调用不起作用的原因是 PHP 变量必须以 $ 开头，但 Javascript 变量不能，最重要的是：您不能只在客户端 Javascript 代码上引用服务器端 PHP 脚本变量.您需要让 PHP 服务器端脚本回显（输出）您的 PHP 脚本变量 $id 的值作为参数 id 在用户浏览器将接收并运行客户端的 HTML+Javascript 代码的函数调用中（如果$id 是一个数字并且您想将其作为数值传递给populateData()，则可以不使用单引号完成。

只需从函数声明中的参数$id 中删除 $，并将其设置在 PHP 标记之间的单引号内，以将其作为字符串参数回显给在 HTML 输出上调用的函数：

function populateData(id){
...
}
...
<select id="selectCard" class="dropdown" onchange="populateData('<?php echo $id; ?>')">

另外我建议您使用在浏览器中打开的 Javascript 控制台进行测试（即 Web 开发人员 -> Web 控制台或 Firefox 中的 CTRL+SHIFT+K），这可以帮助您实时跟踪未来的此类错误。

【讨论】：

很抱歉最近接受了这个答案。当我问这个问题时，我不知道如何接受答案。