SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    radio buttons values and alert if not selected

    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 Coverbr />
    <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 paymentsbr />
    <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. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    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

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

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah here
    Code:
    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>
    Last edited by guido2004; Sep 22, 2011 at 04:41. Reason: added code tags

  4. #4
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    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. #5
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just a tip, your html needs some work:
    HTML Code:
    <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. #6
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    336
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Solution below. Should be self explanatory, but ask if you have questions.
    HTML Code:
    <!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. #7
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kelvin0gs08 View Post
    my html needs work
    Yes it does
    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

  9. #9
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah you know since im not a pro about this i appreciate everyhting


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •