Question

I need to create a form for the field:

id

After entering the value for the id, the id needs to be matched in Database and the values obtained from the Database should be filled in the other forms.

i.e., the value of the title from the database should be filled in title form(input type=”text”) of the html.

this title field will also be present on the same page of the id field.

i.e., there will be a id field followed by a submit button after submitting the id the associated values of the id will be fetched and will be filled in the other form structures on the same page.

Can you suggest me how to do this.

Help appreciated and thanks for u r time.

Answer 1

Use jQuery.ajax to perfrom ajax request, than render the response as you need. Here is an example:

<form>
<input type='hidden' id='id'>
<input type='button' id='fetchData'>
<div id='content_placeholder'></div>
</form>

<script type='text/javascript'>
$(document).ready(function(){ 
    $("#fetchData").click(function(){
        var id = $('#id').val();
        $.ajax({
            type:'post',
            dataType:'json',
            url: '*backend url here*'
            success: function(data, textStatus){
                renderData(data);
                //This will remove this button, so user will not be able 
                //press it two times
                $("#fetchData").remove(); 
            }
        });
    });
});

function renderData(data){
    var placeholder = $('#content_placeholder');
    //...perform operations on data....//
    createInput('name_input','name',data.name).appendTo(placeholder);
    createInput('description_input','description',data.name).appendTo(placeholder);
}

function createInput(id, name, value){
    var result = $("<input>").attr({id:id, name:name}).val(value);
    return result;
}
</script>

In your backend you’ll have to use json_encode to have data encoded in json-compatible way. Here is an example:

<?php
$result = array('name'=>'John Smith', 'description'=>'Unknown buddy');
echo json_encode($result);
?>

See jQuery.ajax, PHP json_encode for details.