Autocompleting textboxes with AJAX using variables from a PHP file

Question

I am doing a project where I need to make sure that my form instantly autofills 2 textboxes based on input from the first textbox. Right now I am just testing. I can't use database entries to populate my form, only PHP variables. My logic needs to be like this: user types in a specific 10 digit number into a textbox on my form (specified in a PHP file), then the other two textboxes get autofilled with specific entries after an AJAX call to that PHP file. This is definitely one of the more complex tasks that I've encountered so far (noob). My code doesn't work, so I would really appreciate any help with getting it to function properly.

HTML is like this:

<!--load scripts, libraries, etc.-->
<form method="GET">
Number: <input type="text" name="num" id="num">
First Name: <input type="text" name="first" id="first">
Last Name: <input tupe="text" name"last" id="last">
</form>

PHP:

<?php

$num=$_GET["num"];
$first=$_GET["first"];
$last=$_GET["last"];

if ($num=="0123456789")
{
        $fill = array(
        'firstname' => $first["John"],
        'lastname' => $last["Smith"],
         );
    echo json_encode($fill);
}
else
{
    echo "Bad input.";
}

?>

jQuery:

$(document).ready(function () {
  $("#num").keyup(function () {
    var el = $(this);

     if (el.val().length === 10) {
        $.ajax({
            url: "http://localhost/test.php",
            cache: false,
            dataType: "json",
            type: "GET",
            data: "npi=" + el.val(),
            success: function (result) {
                $("#first").val(result.firstname);
                $("#last").val(result.lastname);
            }
        });
      }
   });
});

why $first=$_GET["first"]; $last=$_GET["last"]; you are not sending these values to php right? — ɹɐqʞɐ zoɹǝɟ
– ɹɐqʞɐ zoɹǝɟ, Commented Mar 28, 2014 at 15:54
and try this data: "npi=" + el.val(), as data: {npi: el.val()} — ɹɐqʞɐ zoɹǝɟ
– ɹɐqʞɐ zoɹǝɟ, Commented Mar 28, 2014 at 15:56
@ferozakbar Tried to no avail, unfortunately. What do you mean? I am passing the form values to PHP using GET method. — user3361043
– user3361043, Commented Mar 28, 2014 at 16:18
you said that then the other two textboxes get autofilled with specific entries so you are not passing these??? you have to get these values from php right?? — ɹɐqʞɐ zoɹǝɟ
– ɹɐqʞɐ zoɹǝɟ, Commented Mar 28, 2014 at 16:53
@ferozakbar That's right, I need to get first and last names from the JSON object in PHP. If user types in 0123456789 in the num textbox, the name and last textboxes get populated with John and Smith respectively. — user3361043
– user3361043, Commented Mar 28, 2014 at 16:59

ɹɐqʞɐ zoɹǝɟ · Accepted Answer · 2014-03-28 17:47:54Z

1

in ajax change like this it'll be easy to understand

        type: "GET",
        data:{num: el.val()},//if multiple then like this->data:{attr:val1,attr2:val2,...},

in php

<?php

$first["John"]="john";//i hope you have these two values defined
$last["Smith"]="smith";

$num=$_GET["num"];

if ($num=="0123456789")
{
        $fill = array(
        'firstname' => $first["John"],
        'lastname' => $last["Smith"],
         );
    echo json_encode($fill);
}
else
{
    echo "Bad input.";
}

?>

explanation

see the process is like

first the number will go to php with the help of ajax(through the ajax request)

type: "GET",, data: {num: el.val()},

so as we are sending the number as GET request to php, in php we get this number with $_GET['num'] so now this value will have 0123456789 value in it.

now we are checking with if condition in php

if ($num=="0123456789") { //here we need to send the firstname and lastname values BACK TO THE AJAX REQUEST so we need to have these first and last names here in php defined somewhere manually or get it from database(if you have these first,last names in DB) echo json_encode($fill); }

edited Mar 28, 2014 at 17:47

answered Mar 28, 2014 at 17:06

ɹɐqʞɐ zoɹǝɟ

4,3703 gold badges25 silver badges36 bronze badges

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

6 Comments

user3361043 Over a year ago

You mean define values above your PHP code like $first=$_GET["first"] right?

ɹɐqʞɐ zoɹǝɟ Over a year ago

no brother,where you have these firstname and lastname values?

user3361043 Over a year ago

I see, they just come out of nowehere. Would it make sense to do 'first' => $first["John"], 'last' => $last["Smith"],? I don't have a good understand of AJAX and JSON yet.

user3361043 Over a year ago

I do appreciate the explanation, but I am still not getting where I need to with this. My PHP works ok now after I made some changes (it returns a JSON string {John Smith} basically if you just try to access the .php file). Problem now seems to be with my jquery.

ɹɐqʞɐ zoɹǝɟ Over a year ago

what happened?? as now your are getting the values in the ajax you can simply do what you want to

|

Collectives™ on Stack Overflow

Autocompleting textboxes with AJAX using variables from a PHP file

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related