Radio button changing a text box value help

[Jc_Hoop]

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?

[jmrker]

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?

[Jc_Hoop]

Originally Posted by jmrker

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

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.

[xelawho]

I remember somebody else had the same homework assignment not so long ago. Maybe a search of the forum would turn up some ideas?

[Jc_Hoop]

Originally Posted by xelawho

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?

[xelawho]

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:

var rads=document.forms[0].units

when they are not in a form you would do something like this:

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:

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.

[Jc_Hoop]

Originally Posted by xelawho

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:

var rads=document.forms[0].units

when they are not in a form you would do something like this:

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:

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:

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.

[jmrker]

Have you tried here?

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

[Jc_Hoop]

Originally Posted by jmrker

Have you tried here?

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

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

[xelawho]

I can see a little problem:

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

[Jc_Hoop]

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.

[xelawho]

I guess it's time you discovered the error console, then.

[jmrker]

Originally Posted by Jc_Hoop

Still no luck i'm afraid. This is my html if thats any help.

...

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

[Jc_Hoop]

Originally Posted by jmrker

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