|
Answer» I am writing an html code using radio buttons. The program is a unit conversion program, where first you select a radio button to convert either length, weight, or volume. after the user selects length, weight or volume, it should then display another set of radio buttons for the user to select the conversion direction. for example, if the user selected to convert length, the second set of radio button options should be pounds to kilograms, or kilograms to pounds. After this occurs, the user then enters in the number they would like to convert and then hit the convert button to perform the conversion. For me, I am having difficulties displaying the second set of radio buttons. I am thinking of using the onClick property, and then call a function, but I can't seem to be able to do that. any suggestions?jQuery.
Use named divs:
Code: [Select]<div id="div1">Extra form controls here</div>
Then use onClick events to show or hide elements as required.
Code: [Select]$("#div1").hide();
i haven't LEARNED about JQuery. I have created the set up and layout of the program. But problems right now, lie in the calculate function and the result text box. I'm not sure if i'm writing my calculate function properly. and also, when the user clicks the calculate button, the result is displayed in the results text box below the calculate button. here is my code
Code: [Select]
<!DOCTYPE html>
<html>
<HEAD>
<title> Conversions of Weight and Length</title>
<script type = "text/javascript">
function showSecond() {
if (document.getElementsByTagName("input")[0].checked){
div1.style.display = "block";
div.style.display = "none";
div2.style.display = "none";
}
else if (document.getElementsByTagName("input")[1].checked){
div1.style.display = "none";
div.style.display = "block";
div2.style.display = "none";
}
else {
div1.style.display = "none";
div.style.display = "none";
div2.style.display = "block";
}
}
function Calc()
{
A = document.getElementByID(amount);
res = document.getElementByID(fin);
if (rad2[0].checked)
{
res.value = A / 2.2
}
else
res.value = A* 2.2;
}
</script>
</head>
<BODY>
Select Conversion Type:
<br />
<input type = "radio" name = "rad1" onclick= "showSecond()" />Length
<br />
<input type = "radio" name = "rad1" onclick = "showSecond()" />Weight
<br />
<input type = "radio" name = "rad1" onclick = "showSecond()" />Volume
<br />
<div id = "div" style="display:none">
Select Direction:
<br />
<input type = "radio" name = "rad2" value="PG" />Pounds to Kgs
<br />
<input type = "radio" name = "rad2" value="KP" />Kgs to Pounds
<br />
Number to be converted: <input type = "text" name = "amount" />
<br />
<input type = "button" value = "calculate" onclick = "Calc()" />
<br />
<input type ="text" name ="fin" value="" readonly="readonly"/>
</div>
<div id = "div1" style="display:none">
Select Direction:
<br />
<input type = "radio" name = "rad3" value="FM" />Feet to meters
<br />
<input type = "radio" name = "rad3" value="MF" />Meters to Feet
<br />
Number to be converted: <input type = "text" name = "amount" value=""/>
<br />
<input type = "button" value = "calculate" onclick = "Calc()" />
<br />
Result: <br />
<input type="text" name ="fin" value ="" readonly="readonly"/>
</div>
<div id = "div2" style="display:none">
Select Direction:
<br />
<input type = "radio" name = "rad4" value="GL" />Gallons to Liters
<br />
<input type = "radio" name = "rad4" value="LG" />Liters to Gallons
<br />
Number to be converted: <input type = "text" name = "amount" />
<br />
<input type = "button" value = "calculate" onclick = "Calc()">
<br />
Result: <br />
<input type ="text" name = "fin" value="" readonly="readonly"/>
</div>
<br />
<br />
<br />
<br />
</body>
</html>
Couple of syntax errors straight off:
document.GetElementById, not document.GetElementByID (yep, javascript is case sensitive on function names).
document.GetElementById('divname'), not document.GetElementById(divname) (search is for a string, not an object).
QUOTE from: Rob POMEROY on March 14, 2012, 05:54:20 AM Couple of syntax errors straight off:
document.GetElementById, not document.GetElementByID (yep, javascript is case sensitive on function names).
document.GetElementById('divname'), not document.GetElementById(divname) (search is for a string, not an object).
Actually, the "G" has to be lowercase as well.
Code: [Select]document.getElementById();Oops. Yes, well spotted. *blush*I'm not sure if i'm writing my calculate function properly. and also, when the user clicks the calculate button, the result is displayed in the results text box below the calculate button. here is my code
Quote from: yuanhaojuress0303 on April 13, 2012, 08:57:52 PMI'm not sure if i'm writing my calculate function properly. and also, when the user clicks the calculate button, the result is displayed in the results text box below the calculate button. here is my code
Please start your own thread.
|
