使用AJAX，PHP和Javascript自动填充输入文本框(auto fill input text boxes using AJAX and PHP and Javascript)

 我有一个选择框，其中包含使用数据库（phpmyadmin）中的数据生成的选项，数据库如下所示： 
 
Columns: locationID - address - postalcode - place
 
 在选择框之后我有一些输入字段，首先是标准的一些占位符。 
 
 我的想法是，如果我选择一个选项，将从数据库中生成并填充字段（ contactperson字段除外，这将保持手动）。 
 
 为此，我尝试使用AJAX。 
 
 我已经做了这个： 
 
 test.php ： 
 
<?php
    //Query the database for the results we want
    $query1 = $conn->query("SELECT * FROM deliveryaddress");

    //Create an array of objects for each returned row
    while($locationArray[] = $query1->fetch_object());

    //Remove the blank entry at end of array
    array_pop($locationArray);
?>

<script>
    $(document).on("change","#select-box").function(){
        var id = $(this).val();
        $.ajax({
            url      : "locationAjax.php",
            data     : {"id":id},
            type     : "POST",
            dataType : "HTML",
            success  : function(data){
                // here you can write code to asign the values to text boxes.
                $(".wrapperDiv").html(data); 
            }
        });
    });
</script>

<div class="wrapperDiv">
    <label for="locationLabel">Locatie</label>
    <select name="locations" id="locationSelectBox" >
        <option>Locatie</option>
        <?php foreach ($locationArray as $option) : ?>
            <option value="<?php echo $option->locationID; ?>"><?php echo $option->locationID; ?></option>
        <?php endforeach; ?>
    </select>

    <label for="address" style="float:left;">Straat/No</label>
    <input type="text" name="address" id="address" placeholder="Straatnaam en nummer" />

    <label for="postalCode">Postcode</label>
    <input type="text" name="postalCode" id="postalCode" placeholder="Postcode" />

    <label for="place">Plaats</label>
    <input type="text" name="place" id="place" placeholder="Plaats" />

    <label for="contactPerson">Contact</label>
    <input type="text" name="contactPerson" id="contactPerson" placeholder="Contactpersoon" />
</div>
 
 locationAjax.php ： 
 
<?php
    require_once('dbconnection.php'); 
    $locationID = $_POST['id']; 
    $sql = "SELECT * FROM deliveryaddress where id = $locationID"; 
    $result = mysqli_query($conn, $sql); 
?> 
<?php while ($row = mysqli_fetch_assoc($result)) { ?> 
    <input type="text" name="name" value="<?= $row['address'] ?>" /> 
    <input type="text" name="name" value="<?= $row['postalcode'] ?>" /> 
    <input type="text" name="name" value="<?= $row['place'] ?>" /> 
} 
?>
 
 不幸的是，它不起作用。 

I have a selectbox with options generated with data from a database(phpmyadmin) the database looks like this:
 
Columns: locationID - address - postalcode - place
 
After the select box I have some input fields, at first standard with some placeholders. 
 
The idea is that if I select an option that the fields will be generated and filled from the database (except the contactperson field, this will stay manual)..
 
For this I try to use AJAX.
 
I have already made this:
 
test.php:
 
<?php
    //Query the database for the results we want
    $query1 = $conn->query("SELECT * FROM deliveryaddress");

    //Create an array of objects for each returned row
    while($locationArray[] = $query1->fetch_object());

    //Remove the blank entry at end of array
    array_pop($locationArray);
?>

<script>
    $(document).on("change","#select-box").function(){
        var id = $(this).val();
        $.ajax({
            url      : "locationAjax.php",
            data     : {"id":id},
            type     : "POST",
            dataType : "HTML",
            success  : function(data){
                // here you can write code to asign the values to text boxes.
                $(".wrapperDiv").html(data); 
            }
        });
    });
</script>

<div class="wrapperDiv">
    <label for="locationLabel">Locatie</label>
    <select name="locations" id="locationSelectBox" >
        <option>Locatie</option>
        <?php foreach ($locationArray as $option) : ?>
            <option value="<?php echo $option->locationID; ?>"><?php echo $option->locationID; ?></option>
        <?php endforeach; ?>
    </select>

    <label for="address" style="float:left;">Straat/No</label>
    <input type="text" name="address" id="address" placeholder="Straatnaam en nummer" />

    <label for="postalCode">Postcode</label>
    <input type="text" name="postalCode" id="postalCode" placeholder="Postcode" />

    <label for="place">Plaats</label>
    <input type="text" name="place" id="place" placeholder="Plaats" />

    <label for="contactPerson">Contact</label>
    <input type="text" name="contactPerson" id="contactPerson" placeholder="Contactpersoon" />
</div>
 
locationAjax.php:
 
<?php
    require_once('dbconnection.php'); 
    $locationID = $_POST['id']; 
    $sql = "SELECT * FROM deliveryaddress where id = $locationID"; 
    $result = mysqli_query($conn, $sql); 
?> 
<?php while ($row = mysqli_fetch_assoc($result)) { ?> 
    <input type="text" name="name" value="<?= $row['address'] ?>" /> 
    <input type="text" name="name" value="<?= $row['postalcode'] ?>" /> 
    <input type="text" name="name" value="<?= $row['place'] ?>" /> 
} 
?>
 
unfortunatly, it doesn't work.

原文：https://stackoverflow.com/questions/32121152