www.webdeveloper.com
Results 1 to 2 of 2

Thread: If else statements in forms to calculate score in javascript or HTML

  1. #1
    Join Date
    Dec 2008
    Posts
    42

    If else statements in forms to calculate score in javascript or HTML

    Hi all!

    So im trying to create a simple web form to calculate a score from raw data.

    For example field A (numeric) : if number less than 100 return number 1, if 100-150 return number 2 and if more than 100 return number 3.

    Same idea for fields B and C

    Then on submit the form adds up all the returned numbers, and directs the user to a different page depending on the result.

    For example: Field A user enters 100 (so scores 1) Field B user enters 140 (so scores 2) Field C user enters 200 (so scores 3)

    total score is therefore 6 and so user would be directed to webpage for score 6.

    I hope this makes sense? Any help would be really appreciated. Thanks.

    This is what i have so far but it doesn't work :-( nothing happens when i click submit.

    HTML

    HTML Code:
    <input  id="yourfildA" type="text" />
    <input  id="yourfildB" type="text" />
    <input  id="yourfildC" type="text" />
    
    <input  id="formX" type="button" value="test"  />
    JS

    Code:
    $("#FormX").click(function(){
    
    test();
    })
    function test(){
    var A= document.getElementByID('yourfildA').value;
    var B= document.getElementByID('yourfildB').value;
    var C= document.getElementByID('yourfildc').value;
    var sum=calc(A)+calc(B)+calc(C);
    switch (sum){
                    case 3: window.location = "http://www.test.com/3"
                        //get option and change it's attr
                        break;
                    case 4: window.location = "http://www.test.com/4"
                        //get option and change it's attr
                        break;
                    case 5: window.location = "http://www.test.com/5"
                        //get option and change it's attr
                        break;
                    case 6: window.location = "http://www.test.com/6"
                        //get option and change it's attr
    
                        break;
                    case 7: window.location = "http://www.test.com/7"
                        //get option and change it's attr
                        break;
                    case 8: window.location = "http://www.test.com/8"
                        //get option and change it's attr
                        break;
                    case 9: window.location = "http://www.test.com/9"
                        //get option and change it's attr
                        break;
    }
    }
    
    function calc(value){
    if(value<100){
    return 1;
    }else if(value>100 &&value<150){
    return 2;
    }else{
    return 3;
    }
    }
    Thanks for any help!

  2. #2
    Join Date
    Oct 2010
    Location
    UK
    Posts
    17
    Your first bit of jQuery was not being initialised. It needs to be inside the $(function()... bit. I spotted a few spelling mistakes too but that was the main issue. Also, if you're using jQuery here, how come you're still using document.getElementById?

    The code below should work for you.

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script>
    $(function(){
    	$("#formX").click(function(){
    		test();
    	});
    });
    
    function test(){
    	var A= document.getElementById('yourfildA').value;
    	var B= document.getElementById('yourfildB').value;
    	var C= document.getElementById('yourfildC').value;
    	var sum=calc(A)+calc(B)+calc(C);
    	switch (sum){
    	                case 3: window.location = "http://www.test.com/3"
    	                    //get option and change it's attr
    	                    break;
    	                case 4: window.location = "http://www.test.com/4"
    	                    //get option and change it's attr
    	                    break;
    	                case 5: window.location = "http://www.test.com/5"
    	                    //get option and change it's attr
    	                    break;
    	                case 6: window.location = "http://www.test.com/6"
    	                    //get option and change it's attr
    	
    	                    break;
    	                case 7: window.location = "http://www.test.com/7"
    	                    //get option and change it's attr
    	                    break;
    	                case 8: window.location = "http://www.test.com/8"
    	                    //get option and change it's attr
    	                    break;
    	                case 9: window.location = "http://www.test.com/9"
    	                    //get option and change it's attr
    	                    break;
    	}
    	}
    	
    function calc(value){
    	if(value<100){
    		return 1;
    	}
    	else if(value>100 &&value<150){
    		return 2;
    	}
    	else{
    		return 3;
    	}
    }
    
    </script>
    
    <input id="yourfildA" type="text" />
    <input id="yourfildB" type="text" />
    <input id="yourfildC" type="text" />
    
    <input id="formX" type="button" value="test" />

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles