CODEWITHSUNDEEP
javascriptphpjqueryajax
Naresh
Naresh

Reputation: 872

Filling form values from database based on the selected value from dropdown

I've a form like this and if the user selected any value from the dropdown then I want to fetch the details from the database based on that value. Suppose say if the user selected Name 2 from the dropdown then I should automatically fill the fields address & phone that are relevant to Name 2. Also I'm unable to get the value $_POST['name']. I've tried but no luck. Here is my code. Please suggest me if is there any other way to achieve it. Thank you.

HTML

<select id="name" name="name">
    <option value="1">Name 1</option>
    <option value="2">Name 2</option>
    <option value="3">Name 3</option>
    <option value="4">Name 4</option>
    <option value="5">Name 5</option>
</select>

<input type="text" name="address" id="address" />
<input type="text" name="phone" id="phone" />

jQuery

$(document).ready(function () {
    $('#name').change(function(){
        var name = $(this).val();
        var dataString = "name=" + name;
        alert (dataString);
        $.ajax ({
            type: "POST",
            url: "test.php",
            data: dataString,
            dataType: json,
            success: function(data) {
                $('#address').val(data.address);
                $('#phone').val(data.phone);
            }
        });
    });
});

PHP

<?php

ini_set('display_errors',1); // enable php error display for easy trouble shooting
error_reporting(E_ALL); // set error display to all

include "connect.php";

if (ISSET($_POST['name'])) {

    $ref = $_POST['name'];

    $query = $con->query("SELECT * FROM test WHERE id = '$ref' LIMIT 1");
    $row = $query->fetch_assoc();

    $address = $row['address'];
    $phone = $row['phone'];

    $json = array('address' => $address, 'phone' => $phone);
    echo json_encode($json);
}

$con->close();
?>

Upvotes: 1

Views: 4844

Answers (4)

Naresh
Naresh

Reputation: 872

HTML

<form>
<select id="name" name="name">
    <option value="1">Name 1</option>
    <option value="2">Name 2</option>
    <option value="3">Name 3</option>
    <option value="4">Name 4</option>
    <option value="5">Name 5</option>
</select>
</form>

<input type="text" name="address" id="address" />
<input type="text" name="phone" id="phone" />

jQuery

$('#account_head').change(function(){
    var name = $(this).val();
    var dataString = "name=" + name;
    $.ajax ({
        type: "POST",
        url: "get_results.php",
        data: dataString,
        dataType: 'json',
        success: function(data) {
            // console.debug(data);
            $('#agent').val(data.agent);
            $('#tin').val(data.tin);
            $('#address').val(data.address);
        }
    });
});

PHP

<?php
if (ISSET($_POST)) {
    $ref = $_POST['name'];

    $query = $con->query("SELECT * FROM test WHERE id = '$ref' LIMIT 1");
    $row = $query->fetch_assoc();

    $address = $row['address'];
    $phone = $row['phone'];
    $json = array('address' => $address, 'phone' => $phone);
    echo json_encode($json);
}
?>

Upvotes: 4

user5734311
user5734311

Reputation:

dataType: json, needs to be dataType: "json",

Showing the retrieved data using val() will work perfectly fine; I'll just question whether an <input> is suitable for output.

Upvotes: 0

Gopi Nathan
Gopi Nathan

Reputation: 123

Change this 

dataType: json,
  $('#address').val(data.address);
   $('#phone').val(data.phone);

to

dataType: 'json',
  $('#address').html(data.address);
            $('#phone').html(data.phone);

Upvotes: 0

west efan
west efan

Reputation: 609

You should use another method to display the values, .val(value) just sets a value in the element's tag. You could use .text(value), .html(value) instead.

Upvotes: 1

Related Questions