How to debug using firebug and show the value of radio button - php

Question

I have radio buttons as shown below.
<div id="lensType">
<input type="radio" name="design" style="vertical-align: middle" value="1"/>
<label for="design">Single Vision</label><br/>
<input type="radio" name="design" style="vertical-align: middle" value="2" />
<label for="material" >Accommodative Support</label><br/>
<input type="radio" name="design" style="vertical-align: middle" value="3"/>
<label for="design">Bifocal</label> <br/>
<input type="radio" name="design" style="vertical-align: middle" value="4" />
<label for="material" >Varifocal (Intermediate/Near)</label><br/>
<input type="radio" name="design" style="vertical-align: middle" value="5"/>
<label for="material" >Varifocal (Distance/Near)</label>
</div>
I am making a dynamic select. I have my javascript code that post the value . It seems the supplier value is now posted. Below is the code for my script.
$(document).ready(function(){
function populate() {
fetch.doPost('getSupplier.php');
}
$('#lensType').change(populate);
var fetch = function() {
var counties = $('#county');
return {
doPost: function(src) {
$('#loading_county_drop_down').show(); // Show the Loading...
$('#county_drop_down').hide(); // Hide the drop down
$('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case)
if (src) $.post(src, { supplier: $('#lensType').val() }, this.getSupplier);
else throw new Error('No source was passed !');
},
getSupplier: function(results) {
if (!results) return;
counties.html(results);
$('#loading_county_drop_down').hide(); // Hide the Loading...
$('#county_drop_down').show(); // Show the drop down
}
}
}();
populate();
});
Php code :
<?php
if(isSet($_POST['supplier'])) {
include 'db.php';
$stmt = $mysql->prepare("SELECT DISTINCT SupplierBrand FROM plastic WHERE HeadingNo='".$_POST['supplier']."'");
$stmt->execute();
$stmt->bind_result($supplierBrand);
while ($row = $stmt->fetch()) : ?>
<option value="<?php echo $supplierBrand; ?>" width="100px"><?php echo $supplierBrand; ?></option>
My problem is when I debug I notice there is no value passed to the php script and this makes the select empty. I have tried to trace or debug by having firebug output the console.log and failed in this regard.
Please assist with this code which is meant to show a dynamic list from a radio button selection.

Answer 1

for debugging:
$('input[name="design"]').change(function(){
console.log($('#lensType').find("input:radio[name ='design']:checked").val());
});
else:
$('#lensType').find("input:radio[name ='design']:checked").val();
instead of
$('#lensType').val()
and you probably want to wrap it witg a changed function, since onload no design is selected:
$(document).ready(function(){
$('input[name="design"]').change(function(){
var design = $('input[name="design"]:checked').val();
function populate() {
fetch.doPost('getSupplier.php');
}
$('#lensType').change(populate);
var fetch = function() {
var counties = $('#county');
return {
doPost: function(src) {
$('#loading_county_drop_down').show(); // Show the Loading...
$('#county_drop_down').hide(); // Hide the drop down
$('#no_county_drop_down').hide(); // Hide the "no counties" message (if it's the case)
if (src) $.post(src, { supplier: design }, this.getSupplier);
else throw new Error('No source was passed !');
},
getSupplier: function(results) {
if (!results) return;
counties.html(results);
$('#loading_county_drop_down').hide(); // Hide the Loading...
$('#county_drop_down').show(); // Show the drop down
}
}
}();
populate();
});
});

Answer 2

In your javascript you are getting the value of the div, not the radio button:
$('#lensType').val() <--- change that
To something like this:
$("#lensType input:radio[name='design']:checked").val()