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 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Radio button changing a text box value help

    I would like to be able to change a numerical value in a textbox by choosing between 2 radio buttons.
    Example:
    Selecting Radio button 1 returns 200 in the textbox
    Selecting Radio button 2 takes the 200 and multiplys it by 4

    Can anyone help me with this please?

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts
    What have you attempted thus far?

    What is supposed to happen if Radio button 2 is selected first?
    What is the initial value of the textbox if Radio button 1 is never chosen?

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    What have you attempted thus far?

    Basically its a fuel calculator. User selects fuel from a drop down list then enters the quantity they want into a textbox. This value is then selected as either litres or gallons using the radio buttons. Default value is litres radio button. If user selects gallons I want to multiply the litres value by 4.54.

    User will also use a second set of radio buttons to choose which currency they want their fuel total to be displayed in.
    I have this so far
    Code:
    window.onload = startForm;
    
    function startForm() {
    	document.forms[0].fuel.focus();
    	
    	document.forms[0].fuel.onchange = calcTotals;
    	document.forms[0].litres.onblur = calcTotals;
    	document.forms[0].unit.onclick = calcTotals;
    	document.forms[0].currency.onclick = calcTotals;
    
    function calcTotals() {
    
    	// select fuel(price)
    	var product = document.forms[0].fuel;
    	var pIndex = product.selectedIndex;
    	var productPrice = parseFloat(product.options[pIndex].value);
    	
    	// select quantity(litres)
    	var quantityChosen = parseFloat(document.forms[0].litres.value);
    
    	//var fuelUnit = document.forms[0].litre;
    	
    	finalPrice = productPrice * quantityChosen;
    	
    	// get subtotal(final price - tax)
    	var subVal = finalPrice / 1.23;
    	document.forms[0].sub.value = (subVal).toFixed(2);
    	
    	var taxRate = 0.23; //23%
    	var taxVal =  finalPrice - subVal;
    	document.forms[0].tax.value = (taxVal).toFixed(2);
    	
    	// get total price(subtotal + tax)
    	document.forms[0].tot.value = finalPrice.toFixed(2);
    }
    Any help would be much appreciated and I thank you for your reply.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I remember somebody else had the same homework assignment not so long ago. Maybe a search of the forum would turn up some ideas?

  • #5
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I remember somebody else had the same homework assignment not so long ago. Maybe a search of the forum would turn up some ideas?
    I've searched through the forum and still cant find anything. Maybe instead of having radio buttons have litres and gallons in a listbox the same as the fuel type?

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    hmmm - yeah, they all seem same, same but different. Maybe you should look at the pizza assignment?

    Anyway. To answer your question, there are a few ways that I can think of. One bad and simple, one good and a little more complicated, one simple but inflexible.

    The first would be to set a global variable with the default value and then have onclicks on your radio buttons which would change the value of that variable to the value of the radio. But being that the use of globals is discouraged and it's better not to use them if you don't have to....

    The second way is that in the function that requires that value, to get a collection of your radios. Assuming you have named them "units", this can be done easily when they are in a form like this:
    Code:
    var rads=document.forms[0].units
    when they are not in a form you would do something like this:
    Code:
    var rads=document.getElementsByName("units")
    then you loop through rads, find out which one is checked and set a local variable to its value.

    The third way works if you know that there will only ever be two radios (like in the litres/gallons example). Here you can use the ternery operator. You give your default setting and ID and then just check if it is checked:
    Code:
    var quantity=document.forms[0].litres.value;
    var subtot=document.getElementById("litres").checked?quantity:quantity*4;
    but like I say, that only works for two radios.

  • #7
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    hmmm - yeah, they all seem same, same but different. Maybe you should look at the pizza assignment?

    Anyway. To answer your question, there are a few ways that I can think of. One bad and simple, one good and a little more complicated, one simple but inflexible.

    The first would be to set a global variable with the default value and then have onclicks on your radio buttons which would change the value of that variable to the value of the radio. But being that the use of globals is discouraged and it's better not to use them if you don't have to....

    The second way is that in the function that requires that value, to get a collection of your radios. Assuming you have named them "units", this can be done easily when they are in a form like this:
    Code:
    var rads=document.forms[0].units
    when they are not in a form you would do something like this:
    Code:
    var rads=document.getElementsByName("units")
    then you loop through rads, find out which one is checked and set a local variable to its value.

    The third way works if you know that there will only ever be two radios (like in the litres/gallons example). Here you can use the ternery operator. You give your default setting and ID and then just check if it is checked:
    Code:
    var quantity=document.forms[0].litres.value;
    var subtot=document.getElementById("litres").checked?quantity:quantity*4;
    but like I say, that only works for two radios.
    The last way using the ternery operator seems to be the best option for me as there will only be 2 radio buttons for both litres/gallons and then its euro/sterling.
    I appreciate your reply very much but can you tell me where in my code I would fit in:
    Code:
    var quantity=document.forms[0].litres.value;
    var subtot=document.getElementById("litres").checked?quantity:quantity*4;
    I feel so close to finishing this but its so frustrating getting stuck.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Lightbulb

    Have you tried here?
    Code:
    // select quantity(litres)
    //	var quantityChosen = parseFloat(document.forms[0].litres.value);
    
    var quantity=parseFloat(document.forms[0].litres.value);  // probably mis-labeled as value could be gallons or litres (???)
    var quantityChosen=document.getElementById("litres").checked?quantity:quantity*4.54;

  • #9
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Have you tried here?
    Code:
    // select quantity(litres)
    //	var quantityChosen = parseFloat(document.forms[0].litres.value);
    
    var quantity=parseFloat(document.forms[0].litres.value);  // probably mis-labeled as value could be gallons or litres (???)
    var quantityChosen=document.getElementById("litres").checked?quantity:quantity*4.54;
    Still no luck i'm afraid. This is my html if thats any help.
    Code:
    			<fieldset>
    				<legend>
    					Select a Fuel
    				</legend>
    				
    				<table>
    					<tr>
    						<td colspan="1" class="labelcell">
    							Fuel
    						</td>
    						
    						<td class="inputcell">
    							<select name="fuel" id="fuel" onchange="">
    								<option value="0">Choose your fuel (price per litre)</option>
    								<option value="1.569">White Diesel (@1.569c)</option>									
    								<option value="1.599">Petrol (@1.599c)</option>
    								<option value="0.989">Green Diesel (@0.989c)</option>
    								<option value="0.949">Kerosene (@0.949c)</option>
    							</select>
    							
               					<p>
               						<input type="radio" name="unit" id="Litre" value="1" checked> Litre</input>
     
               						<input type="radio" name="unit" id="Gallon" value="2" />
                  					<label for="sterling">Gallon</label>
               					</p>
    						</td>
    
    					</tr>
    					
    					<tr>
    						<td class="labelcell">
    							Quantity
    						</td>
    						
    				       	<td class="inputcell2">
                     			<input class="num" name="litres" id="litres" size="31" value="0" />
                  			</td>
    					</tr>
    		
    					<tr>
                 			<td class="labelcell">
               					Currency
               				</td>
    
               				<td>
               					<p>
               						<input type="radio" name="currency" id="euro" value="1" checked> Euro(&euro;)</input>
     
               						<input type="radio" name="currency" id="sterling" value="0.8" />
                  					<label for="sterling">Sterling(£)</label>
               					</p>
               				</td>
           				</tr>
    
    					<tr>
    						<td colspan="4" class="labelcell2">
                  				Subtotal
                  			</td>
    
                  			<td class="outcell">
                     			<input class="num" name="sub" id="sub" size="7" value="0.00" readonly="readonly" />
                  			</td>
    					</tr>
    
    					<tr>
    						<td colspan="4" class="labelcell2">
                  				VAT (@ 23%)
                  			</td>
    
                  			<td class="outcell">
                     			<input class="num" name="tax" id="tax" size="7" value="0.00" readonly="readonly" />
                  			</td>
    					</tr>
    					
    					<tr>
    	    				<td colspan="4" class="labelcell2">
               					TOTAL
               				</td>
    
               				<td class="outcell">
                   				<input class="num" name="tot" id="tot" size="7" value="0.00" readonly="readonly" />
               				</td>
    					</tr>					
    				</table>
    			</fieldset>

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I can see a little problem:

    Code:
    <input type="radio" name="unit" id="Litre" value="1" checked> Litre</input>
    ...
    var quantityChosen=document.getElementById("litres").checked?quantity:quantity*4.54;

  • #11
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Still cant get it I'm very inexperienced when it comes to JavaScript as this is the first big piece of code i've had to do. All help is very much appreciated.

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I guess it's time you discovered the error console, then.

  • #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts

    Exclamation

    Quote Originally Posted by Jc_Hoop View Post
    Still no luck i'm afraid. This is my html if thats any help.
    Code:
    ...
    There has to be more than that.
    Provide a link to your code if you cannot provide the entire program;
    ie, show HTML, JS, CSS

  • #14
    New Coder
    Join Date
    Jan 2013
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    There has to be more than that.
    Provide a link to your code if you cannot provide the entire program;
    ie, show HTML, JS, CSS
    Dont worry there was far more code than that But got it working in the end thanks for the help, look forward to using the forum in the future


  •  

    Posting Permissions

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