show data in div on radio button click through ajax - php

Question

I want to show selected data by user on ajax call.
Scenario is that I have two radio buttons, and when user clicks on either one it should show the respective data on the right side, in the response div.
HTML:
<form id="package-call" method="post" accept-charset="utf-8">
<div class='pakges'>
<div class="sub-pakge">
<div class="sub-pakge-content">
<span class="content-title">North America</span><br>
<span class="content-title">Basic</span>
<div class="content-time">150 Minutes</div>
<span class="content-price">Rs.500</span>
<div class="pakges-radio"><input type="radio" name="package" id="package" > </div>
</div>
</div>
<div class="sub-pakges">
<div class="sub-pakges-content">
<span class="content-title">North America</span><br>
<span class="content-title">Max</span>
<div class="content-time">400 Minutes</div>
<span class="content-price">Rs.200</span>
<div class="pakges-radio"><input type="radio" name="package" id="package"> </div>
</div>
</div>
</div>
</form>
AJAX:
$("#package").click(function(e){
$.ajax( {
type: "POST",
url: "package _selection.php",
data: $('#package_call').serialize(),
success: function( response ) {}
});
});
This is the div where i want to show my response:
<div class="form-results">
<div class="rslt-content-main">
<div class="rslt-content">Selected Pakages / Bolts</div>
<div id="package_response"></div>
</div>
</div>
And these are the result div's that i want to get through ajax call from package _selection.php and want to display respectively
<div class="radio_one_rslt">
<div>voice:</div><br />
<div>IDD Asia - Rs 200</div>
</div>
<div class="radio_two_rslt">
<div>voice:</div><br />
<div>IDD Asia - Rs 500</div>
</div>

Answer 1

For listening to a radio button, use the 'change' event
$("#package").on('change', function(e){
Then, assuming your response is the HTML you want to append, append it in your success callback
$.ajax( {
type: "POST",
url: "package _selection.php",
data: $('#package_call').serialize(),
success: function( response ) {
$('#package_response').append(response);
}
});
A blog post for reference: http://blog.stephenborg.com/?p=37