Kenneth .J
Reputation: 1433
Function is not responding as intended
I am trying to pull data from my database which will be dynamically added into a form.Depending on the data values in the database, i have a pair of radio buttons("Yes" and "No") that will be checked differently.
To accomplish that, i have a function which accepts the value of the radio button as a parameter and alerts a message based on where "Yes" or "No" is checked. However, currently the function keeps returning the radio button as unchecked even when it has been checked and i do not see what is wrong.
I Would appreciate any assistance i can get.
My jQuery code(Extract):
function checkRadio(radio){
if(radio.checked)
{
alert("button is checked");//$(".BizEdititemDiscountDetails").hide();
}
else
{
alert("button is not checked");//$(".BizEdititemDiscountDetails").show();
}
};
function radioCheck(){
var state=$("#BizEditItemRadioNo").val();
checkRadio(state);
};
<!--Loads item categories-->
$('#BizEditItemCat').load('getitemcategory.php');
<!--Loads item subcategories-->
$('#BizEditItemCat').change(function(){
var category=$('#BizEditItemCat').val();
var encoded= encodeURIComponent(category);
//window.location.href='getbusinesssubcategory.php?category='+encoded;
$('#BizEditItemSubCat').load('getitemsubcategory.php?category='+encoded);
});
<!--Loads items-->
$('#BizEditItemSubCat').change(function(){
var category=$('#BizEditItemCat').val();
var subcategory=$('#BizEditItemSubCat').val();
$('#BizEditItemOld').load("getitems.php",{category:category,subcategory:subcategory});
});
<!--Loads item details-->
$('#BizEditItemOld').change(function(){
var category=$('#BizEditItemCat').val();
var subcategory=$('#BizEditItemSubCat').val();
var item=$('#BizEditItemOld').val();
$('#ItemDetailsContainer').load("getitemdetails.php",{category:category,subcategory:subcategory,item:item},function(){
radioCheck();
});
});
Dynamically added portion(extract):
if($discount=="1")
{
echo"<div class='BizEditItemDetails'>";
echo"<label for='BizEditItemName'>Name:</label>";
echo"<input class='BizEditItemInput' type='text' id='BizEditItemName' name='BizEditItemName' size='30' maxlength='50' value=\"$name\">";
echo"<span></span>";
echo"</div>";
echo"<div class='BizEditItemDetails'>";
echo"<label for='BizEditItemPrice'>Price:</label>";
echo"<input class='BizEditItemInput' type='number' id='BizEditItemPrice' name='BizEditItemPrice' step='any' min=0 value=\"$price\">";
echo"<span></span>";
echo"</div>";
echo"<div class='BizEditItemDetails'>";
echo"<label>Discount:</label>";
echo"<input type='radio' checked='checked' class='BizEditItemInput' value='Yes' id='BizEditItemRadioYes' name='BizEditItemDiscount'>Yes";
echo"<input type='radio' class='BizEditItemInput' value='No' id='BizEditItemRadioNo' name='BizEditItemDiscount' step='any'>No";
echo"</span></span>";
echo"</div>";
echo"<div class='BizEditItemDetails'>";
echo"<div class='BizEdititemDiscountDetails'>";
echo"<label for='BizEditItemPercent'>Discount Percentage</label>";
echo"<input class='BizEditItemInput' type='number' id='BizEditItemPercent' name='BizEditItemPercent' step='any' min=0 value=\"$discountpercent\">%";
echo"<span></span>";
echo"</div>";
echo"</div>";
echo"<div class='BizEditItemDetails'>";
echo"<div class='BizEdititemDiscountDetails'>";
echo"<label for='BizEditItemDiscountPrice'>Discounted Price:</label>";
echo"<input class='BizEditItemInput' type='number' id='BizEditItemDiscountPrice' name='BizEditItemDiscountPrice' step='any' min=0 value=\"$discountprice\" readonly >";
echo"<span></span>";
echo"</div>";
echo"</div>";
echo"<div class='BizEditItemDetails'>";
echo"<label for='BizEditItemQty'>Quantity:</label>";
echo"<input class='BizEditItemInput' type='number' id='BizEditItemQty' name='BizEditItemQty' min=0 value=\"$qty\">";
echo"<span></span>";
echo"</div>";
echo"<div class='BizEditItemDetails'>";
echo"<label for='BizEditItemDesc'>Desc:</label>";
echo"<textarea class='BizEditItemInput' id='BizEditItemDesc' name='BizEditItemDesc' cols='30' rows='5'>$desc</textarea>";
echo"<span></span>";
echo"</div>";
echo"<div class='BizEditItemDetails'>";
echo"<input class='BizEditItemInput' style='margin-left:360px' type='submit' name='BizEditItemSubmit' value='Submit'>";
echo"</div>";
}
As can be seen from the extract of the dynamically added portion, the radio button has already been checked via checked="checked" but i keep getting the alert("button is not checked") without any other errors in my server log(localhost) or in the developer console in Chrome.
EDIT:(rest of the jQuery code)
<!--Manages loaded item details-->
$('#ItemDetailsContainer').on('change','#BizEditItemRadioNo',function(){
radioCheck(this);
<!--Shows the details when yes is clicked-->
$('#BizEditItemRadioYes').click(function(){
$('.BizEdititemDiscountDetails').show();
});
<!--Hides the details when no is clicked-->
$('#BizEditItemRadioNo').click(function(){
$('.BizEdititemDiscountDetails').hide();
});
<!--calculates the discounted price when discount is checked yes-->
$('#BizEditItemRadioYes').change(function(){
if($(this).val() == 'Yes'){
<!--calculates discount price when discount percentage changes-->
$('#BizEditItemPercent').change(function(){
var percent=$('#BizEditItemPercent').val();
var price=$('#BizEditItemPrice').val();
var discountpercent=percent / 100;
var discountprice=price * discountpercent;
$('#BizEditItemDiscountPrice').val(price - discountprice);
});
<!--calculates discount price when discount price changes-->
$('#BizEditItemPrice').change(function(){
var percent=$('#BizEditItemPercent').val();
var price=$('#BizEditItemPrice').val();
var discountpercent=percent / 100;
var discountprice=price * discountpercent;
$('#BizEditItemDiscountPrice').val(price - discountprice);
});
}
});
$('#BizEditItem').validate({
errorElement:"span",
errorPlacement:function(error,element){
$(error).insertAfter(element);
},
rules:{
BizEditItemCat:{
required:true
},
BizEditItemSubCat:{
required:true
},
BizEditItemOld:{
required:true
},
BizEditItemName:{
required:true,
minlength:5
},
BizEditItemPrice:{
required:true,
min:0
},
BizEditItemDiscount:{
required:true
},
BizEditItemPercent:{
required:true
},
BizEditItemDiscountPrice:{
required:true
},
BizEditItemQty:{
required:true,
min:0
},
BizEditItemDesc:{
required:true,
minlength:20
},
messages:{
BizEditItemCat:{
required:"Please select an item category."
},
BizEditItemSubCat:{
required:"Please select an item subcategory."
},
BizEditItemOld:{
required:"Please select an item."
},
BizEditItemName:{
required:"Please enter an item name.",
minlength:"Please enter at least 5 characters."
},
BizEditItemPrice:{
required:"Please enter an item price.",
min:"Please enter a value greater than 0."
},
BizEditItemDiscount:{
required:"Please enter a value."
},
BizEditItemPercent:{
required:"Please enter a value."
},
BizEditItemDiscountPrice:{
required:"Please enter a value."
},
BizEditItemQty:{
required:"Please enter the number of items you have in stock.",
min:"Please enter a value greater than 0."
},
BizEditItemDesc:{
required:"Please enter an item description.",
minlength:"Please enter at least 20 characters."
},
},
},
submitHandler:function(form){
form.submit();
}
});
});
Upvotes: 0
Views: 75
Answers (1)
Marc B
Reputation: 360762
.val() returns the current value of an input element. e.g.
<input type="radio" name="foo" value="bar" id="baz" />
var x = $('#baz').val(); // returns 'bar'
You then do the equivalent of
checkRadio('bar');
if ('bar'.checked) { ... }
A string has no '.checked' attribute. You need to pass around the node representing the radio button itself, e.g.
checkRadio($('#baz'));
Upvotes: 3
Related Questions
- HTML ajax response not executing javascript function
- Function doesn't execute properly inside of JavaScript
- javaScript code within PHP function only work in first call
- JavaScript Function not working on call within php code
- Jquery function not executing properly
- Javascript function not functioning
- Jquery function not work with php echoing code
- This JavaScript Function Works Alone, But Not With Other JavaScript Functions
- javascript function call doesn't work
- Jquery and PHP function