...

View Full Version : Help with Radio Button and if statement



deidra
09-26-2012, 09:03 PM
OK I had a perfectly working form to calculate square footage with pricing. But now I want to add 2 radio buttons for color options,
Im extremely new to javascript btw so there is probably an extremely simple answer but I cant seem to find it anywhere.


These are my buttons


<input id="White" name="poBoxRadio" type="radio" class="radio-btn" value="White" /> White
<input id="Clear" name="poBoxRadio" type="radio" class="radio-btn" value="Clear" /> Clear


If the option "White " is chosen then all of the code is true but if "Clear" is chosen I just need to change ONE varible

Here Is the java:

$(document).ready(function() {
$('#calculateTotal').click(function()

if ()
{
var perSqFt = 7.50;
}
else
{
var perSqFt = 6.50;

var inputWidth = $('#width').val();

var inputHeight = $('#height').val();

var inputQuantity = $('#quantity').val();

var totalSqFt = (inputWidth*parseFloat(inputHeight));

var perBannerCost = (totalSqFt*parseFloat(perSqFt));

var totalCost = (perBannerCost*parseFloat(inputQuantity));

if (totalSqFt < 3)
{totalCost = 15.00*(inputQuantity), perBannerCost = 15.00}



The red is what I have attempted but I dont know exactly which name to call, Please let me know if Im at least on the right track .. but I really am stumped

xelawho
09-26-2012, 09:12 PM
if that's the only thing you need to check, you can just do this:


if (document.getElementById("White").checked) {
var perSqFt = 7.50;
}
else {
var perSqFt = 6.50;
}


you may want to put in some sort of fallback for if neither are checked (at the moment it defaults to the 6.5 value). For future reference note that every { needs a matching }

deidra
09-26-2012, 09:55 PM
Thanks, that answers my question on how exactly to call for the button thats checked, BUT i did that and the once working code ( it calculated a total and displayed the answer ) is not working. it works fine if I remove the if else statement... So Im guessing this statement isnt where it should be?

I'll work on adding some kind of required answer verification, but im taking very small steps here (lol)

I appreciate the help!
This is the rest of the form code, to me it seems a little messy but this is what I was given to work with :/


<div id="staticinstiquote"><div id="quote_form">
<div id="iq_title">Instant Quote</div>
<form id="calc" name="calc">
<input id="White" name="poBoxRadio" type="radio" class="radio-btn" value="White" /> White
<input id="Clear" name="poBoxRadio" type="radio" class="radio-btn" value="Clear" /> Clear
<p>
<label for="width">Width</label>
<input id="width" name="width" type="text" size="3">Ft
</p>
<p>
<label for="height"> Height</label>
<input id="height" name="height" type="text" size="3">Ft
</p>
<p>
<input id="quantity" name="quantity" type="text" size="2">
<label for="Quantity">Quantity</label>
</p>
<p>
<input name="calculateTotal" id="calculateTotal" type="button" value="Quote Me!!" /></p>
<div id="result" style="display:none;"><strong>Total:</strong> <span id="total"></span> <br>
<strong>Per Flag:</strong> <span id="perbanner"></span></div>

</div>

</form></div></div> </font>
</div>

deidra
09-26-2012, 10:49 PM
Somehow I finally got the code to work, with just an if statement , im not exactly sure it was trial and error but here is the working code if anyone ever needs it for help


$(document).ready(function() {
$('#calculateTotal').click(function() {
var perSqFt = 6.50;

var inputWidth = $('#width').val();

var inputHeight = $('#height').val();

var inputQuantity = $('#quantity').val();

var totalSqFt = (inputWidth*parseFloat(inputHeight));

var perBannerCost = (totalSqFt*parseFloat(perSqFt));

var totalCost = (perBannerCost*parseFloat(inputQuantity));

if (totalSqFt < 3)
{totalCost = 15.00*(inputQuantity), perBannerCost = 15.00}

if (document.getElementById("Clear").checked) {
var perSqFt = 7.50;
var inputWidth = $('#width').val();

var inputHeight = $('#height').val();

var inputQuantity = $('#quantity').val();

var totalSqFt = (inputWidth*parseFloat(inputHeight));

var perBannerCost = (totalSqFt*parseFloat(perSqFt));

var totalCost = (perBannerCost*parseFloat(inputQuantity));

if (totalSqFt < 3)
{totalCost = 15.00*(inputQuantity), perBannerCost = 15.00}
}

I didnt think i would actually have to repeat everything , but thats what I got to work. No matter where I put the if else it wouldnt work at all.

But If there are any suggestions that may work better Im all ears!

Old Pedant
09-26-2012, 11:53 PM
Then you made a cockpit error in your if...else.

It should have worked.

That code you have now is ugly and overly complex.

Old Pedant
09-27-2012, 12:06 AM
You know, if the only reason you have jQuery on that page is for the 4 places you use it where shown, it's a horrible waste.

But whatever...



$(document).ready(function() {
$('#calculateTotal').click(function()
{
var inputWidth = $('#width').val();
var inputHeight = $('#height').val();
var inputQuantity = $('#quantity').val();
var perSqFt = document.getElementById("Clear").checked ? 7.50 : 6.50;

var totalSqFt = inputWidth * inputHeight;
var perBannerCost = ( totalSqFt < 3 ) ? 15.00 : totalSqFt * perSqFt;

var totalCost = perBannerCost * inputQuantity;

/* code to put the values in place on the page */
}
}

However, that's not logical.

If I enter a height of 1 foot and a width of 2.9 feet, then my total square feet is, of course 2.9.

With your logic, I will then pay $15 per banner.

Whereas, even if I chose the cheaper material at $6.50 per square foot, the proper charge for 2.9 square feet would be $18.85 and if I chose the $7.50 per square foot material the correct charge for 2.9 square feet is $21.75.

I think you are making a big mistake, basing the $15 per banner on less than 3 square feet. Better would be to simply make the minimum charge be $15 per banner.

Thus:



$(document).ready(function() {
$('#calculateTotal').click(function()
{
var inputWidth = $('#width').val();
var inputHeight = $('#height').val();
var inputQuantity = $('#quantity').val();
var perSqFt = document.getElementById("Clear").checked ? 7.50 : 6.50;

var totalSqFt = inputWidth * inputHeight;
var perBannerCost = totalSqFt * perSqFt;
// but minimum is $15 per banner
if ( perBannerCost < 15 ) { perBannerCost = 15; }

var totalCost = perBannerCost * inputQuantity;

/* code to put the values in place on the page */
}
}

[/code]

Old Pedant
09-27-2012, 12:08 AM
Oh, and you didn't need any of those parseFloat( ) calls. When you multiply, JS automatically converts the string to a number for you. You would only need the parseFloat (or equivalent) when adding.

deidra
09-28-2012, 04:28 PM
I knew there was a better way to do it, but at the time I was glad I got it working. I appreciate the suggestions, and thats A really good idea to change the the code for a minimum, honestly none of the pricing is right, I was worried about the entire thing functioning , so yes there is some tweaking to do.

Also I know nothing about parse float,or JavaScript at all, as this code was already made for something different on a website by someone else... I'm pretty much taking a crash course! So I might become a regular here since everyone is sooo helpful :)

But I have studied and studied the codes given and I think I am understanding them... the main problem I have is most tutorials or even w3 schools doesn't really help me understand.. So really thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum