...

View Full Version : radio buttons



needhelp101
02-26-2012, 07:18 AM
I'm creating a unit converter program using radio buttons and i can't seem to get one aspect working. i can't seem to get another set of radio buttons to display. the way the program is supposed to work is there will be 3 radio buttons saying to convert length, weight, and volume. if the user selects to convert weight, another set of radio buttons will appear with 2 options, to convert from pounds to kilograms, or kilograms to pounds. then the user enters the number in a text box and clicks to convert button. my problem is getting the second set of radio buttons to display. I have no clue how to get this to work. to get a better understanding of whats going on, here is the program without the radio buttons that i created. i'm trying to use radio buttons in place of the prompting message.




<!DOCTYPE html>
<html>
<head>
<title> Conversions of Weight and Length</title>

<script type="text/javascript">

function clearMe()
{
var _s=top;
var _d=_s.document;
_d.open();
_d.write("");
_d.close();
}
function main()
{


var repeat = confirm("Do you want to perform another conversion ? \r" + "<p><b>Note:</b> Pressing OK allows for another conversion, and pressing CANCEL exits</p>");

if(repeat==true)
{
convert();
}
else
{
alert("Your program has been terminated!");
self.close();
}
}



function convert()
{
var unit, direction, value, result, original_units, new_units;
document.write("<br/><br/>")
document.write("Weight and Length conversion menu" + "<br/><br/>");
document.write("1. convert length" + "<br />");
document.write("2. convert weight" + "<br />");
document.write("3. convert volume" + "<br />");

unit = window.prompt("select conversion type: ");

if ((unit<0) || (unit>3))
{
alert("Select Menu option 1, 2, or 3!");
unit = window.prompt("Select conversion type: ");
}
switch (unit)
{
case '1':
direction = choose_direction("<br /><br />1. Feet to meters<br />" , "2. Meters to feet <br />");
if (direction =='1')
{
original_units = "meters"; new_units = "meters";

}
else {
new_units = "feet"; original_units = "meters";
}
break;
case '2':
direction = choose_direction("<br /><br />1. Pounds to kilograms <br />", "2. Kilograms to pounds <br /> <br />");
if (direction =='1')
{
original_units = "pounds"; new_units = "kilograms";

}
else {
new_units = "pounds"; original_units = "kilograms";
}
break;
case '3':
direction = choose_direction("<br /><br />1. Gallons to liters<br />", "2. Liters to gallons <br /><br />");
if (direction =='1')
{
original_units = "gallons"; new_units = "liters";

}
else {
new_units = "gallons"; original_units = "liters";
}
break;



}
value = window.prompt("Enter value to be converted:")


switch(unit)
{
case '1':
result = feet_meters(value, direction);
break;
case '2':
result = pounds_kilograms(value, direction);
break;
case '3':
result = gallons_liters(value, direction);
break;
}
document.write(value + original_units + " = " + result + new_units);

}
function choose_direction(option1, option2)
{
var direction;
document.write(option1);
document.write(option2);
do
{
window.prompt("Select a conversion direction");
return direction;
}
while ((direction!='1') || (direction !='2'));

}
function pounds_kilograms(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(2.2046);

else
return parseFloat(value)*parseFloat(2.2046);
}
function gallons_liters(value, direction)
{
if (direction == '1')
return parseFloat(value)*parseFloat(3.7854);
else
return parseFloat(value)/parseFloat(3.7854);
}
function feet_meters(value, direction)
{
if (direction == '1')
return parseFloat(value)/parseFloat(3.2808);
else
return parseFloat(value)*parseFloat(3.2808);
}

</script>
</head>
<body>
<h1> weight and length conversion </h1>
<script type="text/javascript">
convert();
main();
</script>

</body>
</html>

Philip M
02-26-2012, 09:34 AM
Homework? Hide the second group of buttons with <div id = "mydiv" style="display:none"> and then when the "weight" selection is made from the first group show the div containing the second group with document.getElementById("mydiv").style.display="block";



<form name = "myform">
Length <input type = "radio" name = "rad1">
Weight <input type = "radio" name = "rad1" onclick = "showSecond()">
Volume <input type = "radio" name = "rad1" >

<div id = "mydiv" style="display:none">
Pounds to Kgs <input type = "radio" name = "rad2">
Kgs to Pounds <input type = "radio" name = "rad2">
Amount <input type = "text" name = "amount">
</div>
</form>

<script type = "text/javascript">

function showSecond() {
document.getElementById("mydiv").style.display = "none";
if (document.myform.rad1[1].checked) {
document.getElementById("mydiv").style.display = "block";
}

}

</script>

Study this and learn from it, please.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

needhelp101
02-26-2012, 10:03 AM
ok, thanks. i really appreciate it. i never encountered using forms, and thats something i havent learned. thanks for your help, thats really put me on the right track

Philip M
02-26-2012, 10:06 AM
ok, thanks. i really appreciate it. i never encountered using forms, and thats something i havent learned. thanks for your help, thats really put me on the right track

So how is it that your teacher is setting you assignments before you have the necessary knowledge of the subject to actually do them? I have to say that your code (posted after my response) is absurdly convoluted. KISS! Where are the radio buttons you talked of?

document.write statements must be run before the page finishes loading. Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page (including the Javascript which called it). So document.write is at best really only useful to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

needhelp101
02-26-2012, 10:26 AM
I'm not sure. we did look at div elements, but never went over forms. when i posted my code, i was unaware of your response. The radio buttons were not in the code i posted. That was the code without any radio buttons. i had mentioned that i wanted to replace the prompting box with radio buttons.

document.write statements, i used in coincidence with the prompting box. it was basically the menu of options for the prompting box

needhelp101
02-26-2012, 06:12 PM
is there any way to write a code that says that 2 radio buttons are checked, get the amount that is in the amount box, and calculate the result. for example, the user selects to convert weight, to go from Pounds to Kgs, and enter the number 10. i'm trying to create a calculate function, and call that function when the user clicks the calculate button, but i'm not sure how i would implement all of the conditions in it.

Philip M
02-26-2012, 06:50 PM
We cannot do all your homework for you! Show the code you have written, and if you have made a reasonable effort then doubtless someone will help you correct and/or improve it.

Hint:


if (rad2[0].checked) { // user has selected Pounds to Kgs
result = valueEntered * 0.45359237; // conversion factor
}
if (rad2[1].checked) { // user has selected Kgs to Pounds
result = valueEntered * 2.20462262; // conversion factor
}



It is not really in your best interests that others do your all or most homework for you. Your teacher may gain a false and exaggerated idea of your programming capabilities and so not offer you the support you need. Also, if you hand in other people's work which you do not completely understand, then you will start to fall behind and your difficulties will increase. Finally, there is a limit to the number of times that you can take your pitcher to this well!

needhelp101
02-26-2012, 09:31 PM
i'm not trying to have u all do my homework. all i was asking was to be pointed in the right direction. just to get an idea. but anyways, sorry for not putting up any coding. got too many things going on, that i forget a lot of things. this is the coding i have so far, of course its not completely finished. but this will be my last problem. after i click the calculate button, i want to have the result displayed in the textbox i created below the calculate button. i've been trying different ways, but can't seem to get it to display on there.




<!DOCTYPE html>
<html>
<head>
<title> Conversions of Weight and Length</title>
<body>
<form name = "conversion">
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()" />
</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" />
<input type = "button" value = "calculate" onclick = "Calc()" />
<br />
</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 />
<input type ="text" name = "result" id = "result"/>
</div>

<br />
<br />
<br />
<br />

</form>

<script type = "text/javascript">

function showSecond() {
document.getElementById("div").style.display = "none";
if (document.conversion.rad1[1].checked) {
document.getElementById("div").style.display = "block";}
else if (document.conversion.rad1[0].checked) {
document.getElementById("div1").style.display = "block";}
else if (document.conversion.rad1[2].checked) {
document.getElementById("div2").style.display = "block";
}

}
function Calc()
{
if (rad2[0].checked) result = amount / 2.20462262;
else result = amount * 2.20462262; // conversion factor

}


</script>


</body>
</html>

Philip M
02-27-2012, 08:43 AM
Do not use the same name "result" for an HTML element and a Javascript variable.

Surely you can place the result of the calculation into the text box? If not I would point you in the right direction by saying that you should seriously consider giving up Javascript!

function Calc()
{
if (rad2[0].checked) result = amount / 2.20462262;
else result = amount * 2.20462262; // conversion factor

See anything wrong here? Also just one / as a comment will cause an error. And you need to get the value of the amount box using document.conversion.amount.value; And it is unwise (sloppy) to leave out the braces { } following an if or else statement.

Also if you use an else clause rather than the code I gave you the calculation will (or might!) take place if rad2[0] is not checked - but that is bound to be the case if you are doing a different conversion. It is always depressing when beginners think they can disregard the advice/code they have been given.

One more time - So how is it that your teacher is setting you assignments before you have the necessary knowledge of the subject to actually do them?

needhelp101
02-27-2012, 09:27 PM
we don't have the necessary knowledge because we never went over that in class. come to find out, my teacher does not want me to use forms. so i have to take the form out, and redo the whole thing.

Philip M
02-27-2012, 10:35 PM
Well, it looks as though we have been wasting each others' time. But you must use a form if you are using radio buttons. I would get a new teacher!

needhelp101
02-27-2012, 11:02 PM
i guess so. sorry for wasting your time, but i appreciate you taking the time to help me out.

needhelp101
02-27-2012, 11:28 PM
even though I'm not using forms, i was wondering if you could still help me out. I am still having trouble with the calculate function and pointing the answer to display in the results text box. this is my code so far.




<!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()
{


if (document.getElementByName("rad2")[0].checked)
{
result = amount*2.2; // conversion factor
}


else result = amount/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 />
<input type ="text" name = "fin" value="" readonly="readonly"/>
</div>

<br />
<br />
<br />
<br />






</body>
</html>

Philip M
02-28-2012, 08:41 AM
if (document.getElementByName("rad2")[0].checked)

No such thing as document.getElementByName.

I am sorry, but I have had enough of this. If you (or your teacher) insist on trying to do it in a silly and incorrect way and ignoring what you have been told, then I have lost interest.

I'll say it just one more time. You address a radio button with document.formname.radiobuttongroupname[index].
Example: document.formname.rad1[2] - the third button in the rad1 group.

And you address a form field with document.formname.fieldname.value or document.getElementById("fieldid").value.
But as I say, there is no point or advantage in assigning an id to a form field.

Can we finish with this now, please. Your teacher clearly wonks best.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum