This function is intended to an Edit form, so therefore the radio buttons are initialized with the value stored in the database. Upon clicking on the radio buttons, 2 different function has to be invoked. What the function basically does is, it populates a dropdown list. E.g.: If the first radio button is selected the dropdown list must populate only the gents items.
HTML CODE
<td>Catalogue Type</td>
<td>
<input type="radio" name="catalogue_type" id="catalogue_type" class="catalogue_type" <?php if($val['gents_ladies']=="Gents"){echo "checked";} ?> value="Gents" onclick="getCategoriesGents()"/>GENTS
<input type="radio" name="catalogue_type" id="catalogue_type" class="catalogue_type" <?php if($val['gents_ladies']=="Ladies"){echo "checked";} ?> value="Ladies" onclick="getCategoriesLadies()"/>LADIES
</td>
SCRIPT
<script type="text/javascript">
function getCategoriesGents(){
var request = $.ajax({
url: "../controller/sale.php",
type: "POST",
data: {action:'get_gents_categories'},
dataType: "html"
});
request.done(function(msg){
$('#category_details').html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
return false;
});
}
function getCategoriesLadies(){
var request = $.ajax({
url: "../controller/sale.php",
type: "POST",
data: {action:'get_ladies_categories'},
dataType: "html"
});
request.done(function(msg){
$('#category_details').html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
return false;
});
}
</script>
If I put $(document).ready(function() {
on the top of the script, this doesn't work. So i have taken that out.
That is perfectly working when I click/focus on the dropdown. But what I want is when the page gets loaded itself with the PHP/Database value, I need the function to get started and populate the drop down. Any suggestions would be very grateful...