Radio buttons values and alert if not selected

JavaScript
1

so basically this is what I have its 2 sets of radio buttons named budget, premier and superior which values are $2,$3 and $5 respectively. a checkbox that if checked the value would make the the first group of radios multiplied by 2 if not it will remain the same
the second group would be weekly, monthly and annually which the values will be multiplied to 1,x\(52/12) and 52 respectively to everything above. the total would be displayed as an alert message
if the none of the first group is selected an alert would be issued when calculate is pressed and that would be please select level of cover and if none of the second group is selected it would display please select frequency of payment but if none is selected at all both alerts would be displayed on a single dialogue box, i cant make a script to make it function properly

thanks in advance for the help i didnt include the script because i suck it doesnt work

<form name=“InsuranceCalc”>
<p><h2>calutaling insurance</h2></p>
<p> Please complete the form.</p>
<p>Level of Cover:<br />
<input type=“radio” name=“levels” value=“x” id=“budget”><label for=“budget”> Budget</label><br />
<input type=“radio” name=“levels” value=“y” id=“Premier”><label for “Premier”> Premier</label><br />
<input type=“radio” name=“levels” value=“z” id=“Superior”> <label for=“Superior”> Superior</label><br /></p>

Click here if you want this policy to cover your spouse and children <input type=“checkbox” id=“includeFamily”>
<p>Frequency of premium payments:<br />
<input type=“radio” name=“payment” value=“a” id=“Weekly”> <label for=“Weekly”> Weekly</label><br />
<input type=“radio” name=“payment” value=“b” id=“Monthly”><label for=“Monthly”> Monthly</label><br />
<input type=“radio” name=“payment” value=“c” id=“Yearly”><label for=“yearly”> Yearly</label><br /></p>
<input type=“button” name=“Calculate” value=“Calculate” onclick=“”/>
<input type=“button” name=“reset_form” value=“Reset Form” onclick=“this.form.reset();”>
</form>

2

Welcome to the SP forums.

i didnt include the script because […] it doesnt work

Of course it doesn’t work, otherwise you wouldn’t be here to ask for help :wink:

Post it anyway, so we can see where you’re going wrong and point you in the right direction.

3

yeah here


function checklevels() {
	var level==0;
	if (document.getElementById(budget).checked) {
		level+=2;		
	}
	if (document.getElementById(Premier).checked) {
		level+=3;		
	}
	if (document.getElementById(Superior).checked) {
		level+=5;		
	}
	if (document.getElementById(levels).null) {
		alert('Plese select the level of cover');		
	}
}//end of checklevels
function checkfamily() {
	var family=1;
	if (document.getElementById(includeFamily).checked) {
		level+=2;	
	}
}//end of checklevels

function checkpayment() {
	var pay==0;return false;
	if (document.getElementById(Weekly).checked) {
		level+=1;return true;		
	}
	if (document.getElementById(Monthly).checked) {
		level+=52 / 12;	return true;
	}
	if (document.getElementById(Yearly).checked) {
		level+=52; return true;		
	}
	if (document.getElementById(payment).null) {
		alert('Plese select the frequency of payment');		
	}
}//end of checkpayment

function getTotal() {
	alert (level * family * pay;)
	
}//end get total
</script>
4

Ok, a question:

a checkbox that if checked the value would make the the first group of radios multiplied by 2 if not it will remain the same

You want to double the rate in the final calculation, or do you want to change the rates displayed in the first set of radio buttons every time the user checks/unchecks the includeFamily checkbox?

And you want to display the final result or an error when calculate is pressed, so you’re going to have to add a onclick action to that button.

5

Just a tip, your html needs some work:

<form name="InsuranceCalc">
	<h2>Calculatling Insurance</h2>
	<p>Please complete the form.</p>
	<p>Level of Coverage<br />
		<input type="radio" name="levels" value="2.00" id="Budget">
			<label for="budget"> Budget</label><br />
		<input type="radio" name="levels" value="3.00" id="Premier">
			<label for="premier"> Premier</label><br />
		<input type="radio" name="levels" value="5.00" id="Superior">
			<label for="superior"> Superior</label><br />
	</p>
	<p>Click here if you want this policy to cover your spouse and children
		<input type="checkbox" name="includeFamily" id="includeFamily" value="2">
	</p>
	<p>Frequency of payments<br />
		<input type="radio" name="payment" value="1" id="Weekly">
			<label for="weekly"> Weekly</label><br />
		<input type="radio" name="payment" value="4" id="Monthly">
			<label for="monthly"> Monthly</label><br />
		<input type="radio" name="payment" value="52" id="Yearly">
			<label for="yearly"> Yearly</label><br />
	</p>
	<input type="submit" name="Calculate" value="Calculate">
	<input type="reset" value="Reset Form">
</form>
  • h2 doesn’t need to be wrapped in p tags
  • br aren’t translating in the forums - bad tag?
  • The values you require can be put in the value attribute of your functions like above
  • Premier label was missing an ‘=’
  • includeFamily needed a name attribute
  • Calculate & Reset buttons can be done using type=“submit” & type=“reset”
6

Solution below. Should be self explanatory, but ask if you have questions.


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title></title>
	</head>
	<body>
		<form name="InsuranceCalc">
			<h2>Calculatling Insurance</h2>
			<p>Please complete the form.</p>
			<p>Level of Coverage<br />
				<input type="radio" name="levels" value="2" id="Budget">
					<label for="budget"> Budget</label><br />
				<input type="radio" name="levels" value="3" id="Premier">
					<label for="premier"> Premier</label><br />
				<input type="radio" name="levels" value="5" id="Superior">
					<label for="superior"> Superior</label><br />
			</p>
			<p>Click here if you want this policy to cover your spouse and children
				<input type="checkbox" name="includeFamily" id="includeFamily" value="2">
			</p>
			<p>Frequency of payments<br />
				<input type="radio" name="payment" value="1" id="Weekly">
					<label for="weekly"> Weekly</label><br />
				<input type="radio" name="payment" value="4" id="Monthly">
					<label for="monthly"> Monthly</label><br />
				<input type="radio" name="payment" value="52" id="Yearly">
					<label for="yearly"> Yearly</label><br />
			</p>
			<input type="submit" name="Calculate" value="Calculate">
			<input type="reset" value="Reset Form">
		</form>
		<script>
			var insurCalcForm = document.InsuranceCalc;
		
			function getRadioInfo(radioName, errMssg) {
				var error = false,
					el = insurCalcForm[radioName],
					val = null,
					id = null,
					i = 0;
		
				for(i; i < el.length; i++) {
					if(el[i].checked) {
						id = el[i].id;
						val = el[i].value;
					}
				}
			
				if( val === null ){
					error = true;
				}
				return {
					id : id,
					value : val,
					error : error,
					messg : errMssg
				};
			}	
			
			insurCalcForm.onsubmit = function(e) {
				e.preventDefault();
				var levels 		= getRadioInfo('levels', 'Please select level of coverage. '),
					incFamily 	= insurCalcForm['includeFamily'],
					payment 	= getRadioInfo('payment', 'Please select frequency of payment. '),
					radios 		= [levels,payment],
					errors 		= false,
					errorAlert 	= '',
					calcAlert 	= '',
					i = 0;
					
				// Process errors
				for(i; i<radios.length; i++) {
					if(radios[i].error === true) {
						errors = true;
						errorAlert += radios[i].messg;					
					}
				}

				if( errors === true ) {
					alert(errorAlert);
				} else {
					incFamily = incFamily.checked
						? incFamily.value
						: 1;
					calcAlert = (levels.value * incFamily) * payment.value;
					alert('Total cost: $' + calcAlert + ', ' + payment.id);
				}						
			};		
		</script>
	</body>
</html>
7

wow thank you i didnt know that those codes actually existed

@guido2004 centered effect did actually what i wanted

@centered effect thanks a lot bro, i think i love you hahah and yes my html needs work long way for me to go, to be actually completely honest to myself now my task is to learn what you actually did thanks again cheers

8

Yes it does :wink:
Even more I think than what centered effect already pointed out in his post. When you’ve digested all of centered effect’s code, do post your form in the HTML forum to get some other expert’s advice. HTML and CSS are the basis of websites. Javascript is the topping :wink:

9

yeah you know since im not a pro about this i appreciate everyhting