自动填充表单字段基于选择字段

时间:2015-09-27 00:02:41

标签: php mysql forms

使用php和html,我有一个用于将属性数据输入到sql数据库的表单,该属性每个都有一个名为' property_id'只要通过表单添加新属性,就会为它们自动生成。我创建了另一个表单,以便不会插入新的属性数据,而是更新现有的属性数据,下面的代码就是那个表单。

<fieldset>
        Select Property:<br>
        <select required name="id">
        <option value"">Select a property</option>
            <?php
            //Database connection
            (It's there but I've removed it for this question)
            // Create connection
            $conn = new mysqli($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            } 

            $result = $conn->query("select * FROM property");

            while ($row = $result->fetch_assoc()) {
                unset($id, $unit, $street, $suburb);
                $id = $row['id'];
                $unit = $row['unit'];
                $street = $row['street'];
                $suburb = $row['suburb'];
                echo "<option value='$id'>$unit $street $suburb</option>"; 
            }
            echo "</select>"; ?>
        <br />
        Unit:<br>
        <input type="number" name="unit" required value="<?php echo $unit;?>">
        <br />
        Street:<br>
        <input type="text" name="street" required value="<?php echo $street;?>">
        <br />
        Suburb:<br>
        <input type="text" name="suburb" required value="<?php echo $suburb;?>">
        <br />
        Postcode:<br>
        <input type="number" name="postcode" required value="<?php echo $postcode;?>">
        <br />
        State:<br>
        <select required name="state">
        <option value="">Please Select</option>
        <option value="ACT">ACT</option>
        <option value="NSW">NSW</option>
        <option value="NT">NT</option>
        <option value="QLD">QLD</option>
        <option value="SA">SA</option>
        <option value="TAS">TAS</option>
        <option value="VIC">VIC</option>
        <option value="WA">WA</option>
        </select>
        <br />
        Employee ID:<br>
        <input type="number" name="employee" required value="<?php echo $employee;?>">
        <br />
        Owner ID:<br>
        <select required name="property">
        <option value"">Select an owner</option>
            <?php
            //Database connection
            (It's there but I've removed it for this question)
            // Create connection
            $conn = new mysqli($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            } 

            $result = $conn->query("select owner_id, first_name, last_name FROM property_owner");

            while ($row = $result->fetch_assoc()) {
                unset($id, $unit, $street, $suburb);
                $id = $row['owner_id'];
                $fName = $row['first_name'];
                $lName = $row['last_name'];
                echo "<option value='$id'>$fName $lName</option>"; 
            }
            echo "</select>"; ?>
        <br />
        Type of Property:<br>
        <input type="radio" name="type" value="Apartment" required checked>Apartment<br />
        <input type="radio" name="type" value="Town House">Town House<br />
        <input type="radio" name="type" value="House">House<br />
        <br />
        Rent:<br>
        <input type="number" name="rent" value="<?php echo $rent;?>"><br />
        Bedroom:<br>
        <input type="number" name="bedroom" value="<?php echo $bedroom;?>"><br />
        Bathroom:<br>
        <input type="number" name="bathroom" value="<?php echo $bathroom;?>"><br />
        Furnished:<br>
        <input name="furnished" type="radio" value="1" checked>Yes<br>
        <input name="furnished" type="radio" value="0" checked>No<br>
        Property Description:<br>
        <textarea name="description" cols="50" rows="15"></textarea>
        <br />
        <p></p>
        <input type="submit" name="SUBMIT" value="Submit">

我一直在关注W3学校的教程,并从其他stackflow问题中获取点点滴滴。我想知道的是,使用顶部的下拉菜单(选择属性后跟属性的动态属性列表)我如何根据sql数据库中的现有值填充不同的表单字段?

1 个答案:

答案 0 :(得分:1)

如果我理解正确,那么每次选择正确的选项时,您都试图从数据库中获取值?这要求您发出服务器请求,因为您无法在客户端执行此操作。

您需要在选择框中添加一个事件处理程序,然后添加一个返回所需值的ajax调用。

使用Jquery(更具可读性) //将此包含在头部

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

//包含并修改下面的javascript:

<script type="text/javascript">
    $(document).ready(function(){
        $('select[name=id]').on('change', function(){
            var id = $(this).val();
            $.ajax(url: 'getDataFromSQL.php?id=' + id, 
                success: function(data){
                    /*prepop the form from the data returned*/
                    /* e.g. if you are returning json */
                    /* $('input[name=id]').val(data.rent); */
                }
            );
        });
    });
</script>

或者您可以在页面加载时从sql数据库输出所有变量。然后不需要ajax调用,但你的表单不会尽可能实时。

您需要了解的内容:

您必须知道客户端和服务器端之间的区别 https://softwareengineering.stackexchange.com/questions/206254/difference-between-a-server-and-a-client

您可能想要查找ajax http://www.codeproject.com/Articles/14142/AJAX-Explained

您可能想要探索事件侦听器: https://api.jquery.com/category/events/