Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Help with Radio Button and if statement

    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

    Code:
    <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:
    Code:
    $(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

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    if that's the only thing you need to check, you can just do this:
    Code:
    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 }

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    not functioning now :(

    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 :/

    Code:
    <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>
    Last edited by deidra; 09-26-2012 at 10:06 PM. Reason: Maybe the rest of the form code will help

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile It works!

    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

    Code:
    $(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!

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Then you made a cockpit error in your if...else.

    It should have worked.

    That code you have now is ugly and overly complex.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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...
    Code:
    $(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:
    Code:
    $(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]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    deidra (09-28-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thanks

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •