CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Dennis
Dennis

Reputation: 23

Populate a form after submit with jQuery and ajax from

I have a basic HTML form and want to preform a lookup with Ajax via a PHP file after filling in the first field, looking in an external feed for the values of the two second fields. 

<form method="post" action="#"> 
 <input name="number" type="text" id="number" value="" />
 <input name="name" type="text" id="name" value="" />
 <input name="email" type="text" id="email" value="" />
 <button type"submit">
</form>

After filling in the first field (number), I want to do an Ajax call to a PHP file (submitting the filled in value) and look for the values of the two other fields (name and email). After the lookup fill in the found values in this form, user can edit if wanted and then submit.

The PHP file looks like this: 

<?php 
  $number = $_GET["number"];
  $url = "http://api.domain.com/lookup/$number";
  $response = json_decode(file_get_contents($url), true);
?>

And will give a json response like this

{
    "name": "jacob",
    "email": "[email protected]"
}

Now I need jQuery to complete this task (call the PHP script and populate the other form fields) and that's where I got stuck. Ideas?

Upvotes: 2

Views: 16795

Answers (4)

Tom Yates
Tom Yates

Reputation: 921

Dennis, this event will be triggered when the number field loses focus, for example when the user clicks on another form element. You could use a different event like form submit or change.

Check out this jsfiddle for a demo.

AJAX

$('#number').focusout(function() {

    var url = "http://api.domain.com/lookup/" + this.value;

    $.get( url, function( data ) {

        console.log(data);

        $("#name").val( data.name );
        $("#email").val( data.email );

    });
})

Upvotes: 0

Rifai
Rifai

Reputation: 194

try this :

$.post('localhost/your_url.php',{number:$("#number").val()}, function(data,status) {
    if(status=='success'){
        var  obj = jQuery.parseJSON(data);
        $("#name").val(obj.name);
        $("#email").val(obj.email);
    }else{
        //fail
    }
});

cause the script above is use post please change php script to _POST or do you have any need why using _get ?

Upvotes: 0

Maverick
Maverick

Reputation: 945

AJAX

Put this code between <head> and </head> tags of your form page and remember to call jquery framework.

<script type="text/javascript">
$( "#number" ).keyup(function() {
    numberval = $('#number').val();

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "PHP-FILE.php", // replace 'PHP-FILE.php with your php file
        data: {number: numberval},
        success: function(data) {
           $('#name').val(data["name"]);
           $("#email").val(data["email"]);
        },
        error : function(){
           alert('Some error occurred!');
        }
    });
});
</script>

FORM

<form method="post" action="#"> 
 <input name="number" type="text" id="number" value="" />
 <input name="name" type="text" id="name" value="" />
 <input name="email" type="text" id="email" value="" />
 <button type"submit">
</form>

Upvotes: 8

Julo0sS
Julo0sS

Reputation: 2102

Ok, need some more information. What do you mean with "after filling in the first field"?

The 2 next fields are disabled until a "number" is written in the 1st field? the 2 next fields are available and have to work like the 1st one? (doing a data check on value change?)

Sounds like you have to use an event handler anyway, like this with jquery : 

$(document).on('change keyup keypress','#number',function(){
    //Do whatever you want with $(this).val() is the field current value;
});

check this example : http://jsfiddle.net/w12bbzmh/5/

About your $ajax, it's easy to do it with jquery, you can do it the way Rifai told, or like this (which is, to me, clearer)

$.ajax({
    type : 'POST',//OR GET
    url : '..',
    data : {'name':'value','name1':'value1',...},
    async : true or false,
    cache : false,
    success : function(response){
        //handle your response (success)
        //here you get your result, do whatever you need to do here
    },
    error : function(response){
        //handle your response error
    }
});

Hope it helps!

Upvotes: 0

Related Questions