PDA

View Full Version : Radio buttons

chrismiceli
09-14-2002, 10:52 PM
the onclick funtion isn't working

<html>
<head>
<title>Converter</title>
<script language="javascript">
function ans1(in, out) {
out.value = in.value * .95;
}
function ans2(in, out) {
out.value = in.value * .305;
}
function ans3(in, out) {
out.value = in.value * 2.2;
}
</script>
</head>
<body>
<form name="converter">
Number to be converted:<br>
<input type="text" name="number" value=""><br>
<input type="radio" name="con" value=".95"
onClick="ans1(document.converter.number, document.converter.result)">Quart to Liter<br>
<input type="radio" name="con" value=".305"
onClick="ans2(document.converter.number, document.converter.result)">Feet to Meters<br>
<input type="radio" name="con" value="2.2"
onClick="ans3(document.converter.number, document.converter.result)">Pounds to Kilograms<br>
Answer:
<input type="text" name="result" value="">
</form>
</body>
</html>
adios
09-14-2002, 11:23 PM
in is a very, very reserved word in JS (and many languages). Try from and to, for example. And, until you've got your feet (pretty) wet, avoid basic identifiers like 'number', 'form', 'string', etc. Namespace clashes can drive you up the wall for hours...:(
umm
09-15-2002, 05:57 AM
Here are some different ways to use your functions.


<html>
<head>
<title>Converter</title>
<script language="javascript">

function ans1() {
var inputValue=document.converter.number.value;
var outputAnswer=document.converter.result
outputAnswer.value = (inputValue * .95)
}

function ans2(){
var inputValue=document.converter.number.value;
var outputAnswer=document.converter.result
outputAnswer.value = (inputValue * document.converter.con[1].value)
}

function ans3(myBigHairyToe){
var inputValue=document.converter.number.value;
var outputAnswer=document.converter.result
outputAnswer.value = (inputValue * myBigHairyToe)
}


</script>
</head>
<body>
<form name="converter">
Number to be converted:<br>
<input type="text" name="number" value=""><br>
<input type="radio" name="con" onClick="ans1()">Quart to Liter<br>
<input type="radio" name="con" value=".305" onclick="ans2()">Feet to Meters<br>
<input type="radio" name="con" onclick="ans3(2.2)">Pounds to Kilograms<br>
Answer:
<input type="text" name="result" value="">
</form>
</body>
</html>



Or, you could try it this way. It makes use of the radio button array (since they all have the same name - "con"). This script allows you to add as many conversions to the form as you want whithout having to write a function for each conversion.


<html>
<head>
<title>Converter</title>

<script language="javascript" type="text/javascript">
<!--
function getAnswer(){
var frm=document.converter;
for(var i=0; i<frm.con.length;i++){
if(frm.con[i].checked){
if(isNaN(frm.inputNumber.value) || frm.inputNumber.value==""){
alert("Please Enter a Number");
frm.inputNumber.focus();
return false;
}else{
//do the the conversion;
frm.answer.value=(frm.inputNumber.value* frm.con[i].value);
}
}
}
return true;
}
//-->
</script>
</head>
<body>
<form name="converter">
Number to be converted:<br>
<input type="text" name="inputNumber" value=""><br>
<input type="radio" name="con" value=".95" onclick="getAnswer(this)">Quart to Liter<br>
<input type="radio" name="con" value=".305" onclick="getAnswer(this)">Feet to Meters<br>
<input type="radio" name="con" value="2.2" onclick="getAnswer(this)">Pounds to Kilograms<br>
Answer: <br>
<input type="text" name="answer" value="">
</form>
</body>
</html>


The isNaN() function makes sure the value entered in the textbox is in fact a number. That line of script also ensures that the etxtbox can't be empty. Try it out and see how it goes.
chrismiceli
09-15-2002, 09:36 PM
soon as I changed the variable name in to put it works, thanx for the isNaN function, I love it.

<html>
<head>
<title>Converter</title>
<script language="javascript">
function ans1(put, out) {
out.value = put.value * .95;
if (isNaN(put.value))
alert("Put a number down");
}
function ans2(put, out) {
out.value = put.value * .305;
if (isNaN(put.value))
alert("Put a number down");
}
function ans3(put, out) {
out.value = put.value * 2.2;
if (isNaN(put.value))
alert("Put a number down");
}
</script>
</head>
<body>
<form name="converter">
Number to be converted:<br>
<input type="text" name="number" value=""><br>
<input type="radio" name="con" value=".95"
onClick="ans1(document.converter.number, document.converter.result)">Quart to Liter<br>
<input type="radio" name="con" value=".305"
onClick="ans2(document.converter.number, document.converter.result)">Feet to Meters<br>
<input type="radio" name="con" value="2.2"
onClick="ans3(document.converter.number, document.converter.result)">Pounds to Kilograms<br>
Answer:
<input type="text" name="result" value="">
</form>
</body>
</html>
umm
09-15-2002, 09:57 PM
No prob. You only need one function to perform the conversions. Have a look at ans3(myBigHairyToe) function in my previous post.

In javascript, when you find you are repeating lines of code, it generally means you can write less script to do the job.
chrismiceli
09-15-2002, 10:55 PM
didn't think of making the script less, here is a newer one that uses the ans() function to a better use.

<html>
<head>
<title>Converter</title>
<script language="javascript">
function ans(put, out, mult) {
out.value = put.value * mult;
if (isNaN(put.value))
alert("Please put a number to be converted!");
}
</script>
</head>
<body>
<form name="converter">
Number to be converted:<br>
<input type="text" name="number" value=""><br>
<input type="radio" name="con" value=".95"
onClick="ans(document.converter.number, document.converter.result, .95)">Quart to Liter<br>
<input type="radio" name="con" value=".305"
onClick="ans(document.converter.number, document.converter.result, .305)">Feet to Meters<br>
<input type="radio" name="con" value="2.2"
onClick="ans(document.converter.number, document.converter.result, 2.2)">Pounds to Kilograms<br>
Answer:
<input type="text" name="result" value="">
</form>
</body>
</html>
adios
09-16-2002, 01:37 AM
<input type="radio" name="con" value=".95"
onClick="ans(number, result, this.value)">Quart to Liter
chrismiceli
09-16-2002, 01:44 AM
now I think this script is perfect, lol. thanx for the help