auto fill input text boxes using AJAX and PHP and Javascript

Question

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.

you are not returning anything from your locationAjax.php? so you can either save the html in string and return it or return the results from your query. — mdamia
– mdamia, Commented Aug 20, 2015 at 14:45

Nuri Ensing · Accepted Answer · 2015-08-21 09:18:24Z

1

try this

echo json_encode(mysqli_fetch_assoc($result));

in your script loop, console log data to view the result for troubleshooting
change your script to

$(document).on("change", "#locationSelectBox").function() {
  var id = $(this).val();
  $.ajax({
    url : "locationAjax.php",
    data : {
     "id" : id
    },
    type : "POST",
    dataType : "json",
    success : function(data) {
      console.log(data);
      //
      for (var x in data) {
        $('.address').val(data.address);
        $('.postalcode').val(data.postalcode);
        $('.place').val(data.place);
      }
    }
  });
});

check your console log for errors

edited Aug 21, 2015 at 9:18

Nuri Ensing

2,0503 gold badges24 silver badges48 bronze badges

answered Aug 20, 2015 at 14:49

mdamia

4,5571 gold badge27 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

mdamia Over a year ago

insert $row = json_encode(mysqli_fetch_assoc($result)); return $row; in your locationajax.php file right after result = .... ;

Nuri Ensing Over a year ago

yes i have done that if ($result = mysqli_query($conn, $sql)) { $row = json_encode(mysqli_fetch_assoc($result)); return $row; }

Nuri Ensing Over a year ago

i also have: success: function(data){ if(!data) { alert('empty'); return; } but it gives me the alert that data = empty: how to check my php array if it got results then

mdamia Over a year ago

point to your file locationajax.php from your url and vardump($result); what do you get?

Nuri Ensing Over a year ago

Notice: Undefined index: id in C:**\locationAjax.php on line 4 --> $locationID = $_POST['id'];

|

meksof · Accepted Answer · 2015-08-20 14:46:24Z

1

Instead of this line: $(document).on("change","#select-box").function(){

Try this: $(document).on("change","#locationSelectBox").function(){

Then console.log the data on the ajax "success" function And tell me what you get

answered Aug 20, 2015 at 14:46

meksof

216 bronze badges

Collectives™ on Stack Overflow

auto fill input text boxes using AJAX and PHP and Javascript

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related