I must have a clear button that reset the value I checked in every checkbox and radio buttons but they're in different forms. Any ideas?
--------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function DisplayPrice(price){
var val1 = 0;
for( i = 0; i < document.form1.price.length; i++ ){
if( document.form1.price[i].checked == true ){
val1 = document.form1.price[i].value;
}
}
var val2 = 0;
for( i = 0; i < document.form2.price2.length; i++ ){
if( document.form2.price2[i].checked == true ){
val2 = document.form2.price2[i].value;
}
}
var val3 = 0;
for (i = 0; i < document.form3.price3.length; i++) {
if (document.form3.price3[i].checked == true) {
val3 += parseInt( document.form3.price3[i].value);
}
}
var sum=parseInt(val1) + parseInt(val2) + parseInt(val3);
document.getElementById('totalSum').value=sum;
}
</script>
</head>
<body>
<fieldset>
<legend><b><i>Group 1:</i></b></legend>
<br>
<form name="form1" id="form1" runat="server">
<br>
<input id="rdo_1" type="radio" value="1000" name="price" onclick="DisplayPrice(this.value);">Choice 1 - € 1.000,00
<br>
<input id="rdo_2" type="radio" value="2000" name="price" onclick="DisplayPrice(this.value);">Choice 2 - € 2.000,00
<br>
<input id="rdo_3" type="radio" value="5000" name="price" onclick="DisplayPrice(this.value);">Choice 3 - € 5.000,00
<p></p>
<input type="reset" name="reset" value="Clear">
<p></p>
</form>
</fieldset>
<p></p>
<fieldset>
<legend><b><i>Group 2:</i></b></legend>
<br>
<form name="form2" id="form2" runat="server">
<br>
<input id="rdo_1" type="radio" value="100" name="price2" onclick="DisplayPrice(this.value);">Choice 1 - € 100,00
<br>
<input id="rdo_2" type="radio" value="200" name="price2" onclick="DisplayPrice(this.value);">Choice 2 - € 200,00
<p></p>
<input type="reset" name="reset1" value="Clear">
<p></p>
</form>
</fieldset>
<p></p>
<fieldset>
<legend><b><i>Group 3:</i></b></legend>
<br>
<form name="form3" id="form3" runat="server">
<br>
<input id="rdo_1" type="checkbox" value="100" name="price3" onclick="DisplayPrice(this.value);">Choice 1 - € 100,00
<br>
<input id="rdo_2" type="checkbox" value="200" name="price3" onclick="DisplayPrice(this.value);">Choice 2 - € 200,00
<br>
<input id="rdo_1" type="checkbox" value="450" name="price3" onclick="DisplayPrice(this.value);">Choice 3 - € 450,00
<br>
<input id="rdo_1" type="checkbox" value="600" name="price3" onclick="DisplayPrice(this.value);">Choice 4 - € 600,00
<br>
<input id="rdo_1" type="checkbox" value="750" name="price3" onclick="DisplayPrice(this.value);">Choice 5 - € 750,00
<p></p>
<input type="reset" name="reset2" value="Clear">
<p></p>
</form>
</fieldset>
<p></p>
<fieldset>
<legend><i><b>TOTAL AMOUNT</b></i></legend>
<form>
€ <input type="text" name="totalSum" id="totalSum" value="" size="3" readonly="readonly">,00
<p></p>
<input type="reset" name="reset3" value="Clear">
</form>
</fieldset>
</body>
</html>
What I have tried:
I've tried to put them all in a single form but it didn't work so...