[RESOLVED] I need help in validating radio buttons and to do math operations in a form...

[ShaolinMonk]

I am trying to write a script where I am going to do some math operations in the form of "add," "subtract," "multiply" and divide. Each operation function is tied to a radio button and I would like to alert the user if no radio button was checked. I am really a newbie at this, so I would appreciate all the assistance I could get. Here is where I am at with the coding. I am looking to first check that buttons are not unchecked...which I am thinking means that I have to tie the check to the button used for the operation??

function operate()
{
var radSel = document.getElementByID("");
var operPlus = document.getElementByID("plus"
var operMinus = document.getElementByID("minus"
var operMultiply = document.getElementByID("asterik"
var operDivide = document.getElementByID("slash"


}



}
</script>

<form action="formhandler.php" method="post">

<input type="radio" name="scale" id="plus" value="plus"> + <br>

<input type="text" id="op1" name="op1" value=""
tabindex="3" size="10" maxlength="40" >

<input type="radio" name="scale" id="minus" value="minus"> -

<input type="text" id="op2" name="op2" value=""
tabindex="3" size="10" maxlength="40" >

<input type="button" name="equal" id="equal" value="="/
onclick = "operate()">

<input type="text" id="result" name="result" value=""
tabindex="3" size="10" maxlength="40" >
<br>


<input type="radio" name="scale" id="asterik" value="asterik"> *<br>

<input type="radio" name="scale" id="slash" value="slash"> /<br>
</form>
</body>
</html>

[Ayşe]

  
<script type="text/javascript">
var el = function (myid) { return document.getElementById(myid); }
function operate()
{
var arr = ["plus","minus","asterik","slash"];
var i = 0, r;
while( r = el(arr[i++])) {
r.checked ? el('result').value = eval(Number(el('op1').value) + r.nextSibling.data +Number(el('op2').value)) : null;
}
}
</script>

<form action="formhandler.php" method="post">

<label><input type="radio" name="scale" id="plus" value="plus" > + </label><br>
<label><input type="radio" name="scale" id="minus" value="minus"> - </label><br>
<label><input type="radio" name="scale" id="asterik" value="asterik"> * </label><br>
<label><input type="radio" name="scale" id="slash" value="slash"> / </label><br>

<input type="text" id="op1" name="op1" value=""
tabindex="3" size="10" maxlength="40" >


<input type="text" id="op2" name="op2" value=""
tabindex="3" size="10" maxlength="40" >

<input type="button" name="equal" id="equal" value="="/
onclick = "operate()">

<input type="text" id="result" name="result" value=""
tabindex="3" size="10" maxlength="40" >
<br>



</form>
</body>
</html>

[ShaolinMonk]

Thanks the operation works like a charm. Question - If I wanted to write out an alert to the user if none of the buttons were checked, how can I do that here?

[blue_masked_man]

Thanks the operation works like a charm. Question - If I wanted to write out an alert to the user if none of the buttons were checked, how can I do that here?

Hello Shaolin Monk, I am a bit of a newbie too...
I think you kinda already answered your own question..
"IF" you wanted to create an alert, you just need to make an if statement that checks whether a button is selected else, the alert.

[ShaolinMonk]

Hello Shaolin Monk, I am a bit of a newbie too...
I think you kinda already answered your own question..
"IF" you wanted to create an alert, you just need to make an if statement that checks whether a button is selected else, the alert.

Thanks for the feedback...

I have tried this, but it is not working. I want to only alert the user if none of the buttons are selected.

if (!document.form.scale[0].checked &&
!document.form.scale[1].checked &&
!document.form.scale[2].checked &&
!document.form.scale[3].checked) {
// no radio button is selected
alert("You must select a radio button.");
return false;
}

[Ayşe]

<form name="form1"

 
<script type="text/javascript">

var el = function (myid) { return document.getElementById(myid); }
function operate()
{
if (!document.form1.scale[0].checked &&
!document.form1.scale[1].checked &&
!document.form1.scale[2].checked &&
!document.form1.scale[3].checked) {
// no radio button is selected
alert("You must select a radio button.");
return false;
}
if( el('op1').value == "" || el('op2').value =="") {
alert('fill in the text boxs!');
return false;
}
var arr = ["plus","minus","asterik","slash"];
var i = 0, r;
while( r = el(arr[i++])) {
r.checked ? el('result').value = eval(el('op1').value + r.nextSibling.data +el('op2').value) : null;
}
}

</script>
<form name="form1" action="formhandler.php" method="post">

<label><input type="radio" name="scale" id="plus" value="plus" > + </label><br>
<label><input type="radio" name="scale" id="minus" value="minus"> - </label><br>
<label><input type="radio" name="scale" id="asterik" value="asterik"> * </label><br>
<label><input type="radio" name="scale" id="slash" value="slash"> / </label><br>

<input type="text" id="op1" name="op1" value=""
tabindex="3" size="10" maxlength="40" onkeyup="this.value = this.value.replace(/\D+/,'')";>


<input type="text" id="op2" name="op2" value=""
tabindex="3" size="10" maxlength="40" onkeyup="this.value = this.value.replace(/\D+/,'')";>

<input type="button" name="equal" id="equal" value="="/
onclick = "operate()">

<input type="text" id="result" name="result" value=""
tabindex="3" size="10" maxlength="40" readonly>
<br>

</form>