How to fetch row values from mysql database and fill into text boxes by clicking radio button without refreshing page in php?

Question

I want to fetch database values and fill into html text boxes by clicking radio button without refreshing page in php. How can I do this.

Example-

database values-

Emp_Id - 1

Name - Mike

Industry - IT

Country - UK

HTML display is like this-

 <input type='radio'> | 1 | Mike | IT | UK | 

Now if I click radio button then it must fill all text boxes in my html page HTML Text boxes-

 Employee ID : <input type='text' value='1'> <br> <br> Name : <input type='text' value='Mike'> <br> <br> Working Industry : <input type='text' value='IT'> <br> <br> Country : <input type='text' value='UK'> 

Hope you understand my requirements and help me at the earliest.

Answer 1

You can send an AJAX request to the php script and make it either give back a json string containing the data that you then parse in JavaScript or just return the html structure you want to display.

jQuery has a very easy to use AJAX function.

Answer 2

You can do this with help of "parseJSON" method of jQuery. all you need to do is create a Json string and keep it as radio buttons value.

$json = json_encode(array("id" => "1", "name" => "Mike", "dept" => "IT", 
"country" => "UK"));
echo '<input type="radio" name="employee" value="' . $json . '">";

And then you can get this value in jQuery. Like this:

var radioValue = $("input[name='employee']:checked").val();

And then parse the json data, like this:

var obj = jQuery.parseJSON( radioValue );

And assign the values to the text boxes like:

//HTML
Employee ID : <input type='text' id='id' value=''>
Name : <input type='text' id='name' value=''>

// jQuery
$('#id').val(obj.id);
$('#name').val(obj.name);

This way you can get your desired result. Hope this helps.