Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    calcCost function not displaying correct amount

    Hi

    I have a JS file and 2 HTML files. The conf.html file is a form that when submitted, should generate a confirmation page which is summary.html. Everything seems to be fine except for 2 things.

    1: The conf.html form should not be allowed to submit if required areas are not filled out, but it does.

    &

    2: The cost of the conference detailed on the summary.html page should include a $25.00 discount if you have checked that you are a member. This is not happening.

    Any help would be great. Thanks.

    Conf.html file
    Code:
    <title>Conference Registration Form</title>
       <link href="conf.css" rel="stylesheet" type="text/css" />
       <script type ="text/javascript" src="forms.js"></script>
    </head>
    
    <body>
       <form id="reg" method="get" action="summary.html" onsubmit="return submitForm();">
    
       <div id="links"><img src="links.jpg" alt="" /></div>
       <div id="head"><img src="logo.jpg" alt="CGIP Annual Conference" /></div>
       <div id="edge"><img src="edge.jpg" alt="" /></div>
    
       <div id="main">
          <p id="intro">
             <b>10th Annual Conference of Computer Graphics and Image Processing</b><br />
                University of Colorado, Boulder<br />
                March 3 - March 7<br />
                Conference Fee: $145
          </p>
          <h1>Conference Registration Form</h1>
          <input type="hidden" id="total" name="total" />
    
          <table>
             <tr>
                <td><span>*</span>First Name</td>
                <td><input name="fname" id="fname" /></td>
                <td style="text-align: right"><span>*</span>Last</td>
                <td><input name="lname" id="lname" /></td>
             </tr>
             <tr>
                <td id="add"><span>*</span>Address</td>
                <td colspan="3"><textarea id="address" name="address" rows="" cols=""></textarea></td>
             </tr>
             <tr>
                <td><span>*</span>E-mail</td>
                <td colspan="3"><input name="email" id="email" /></td>
             </tr>
             <tr>
                <td><span>*</span>Phone Number</td>
                <td colspan="3">
                   <input id="phone1" name="phone1" size="3" />
                   <input id="phone2" name="phone2" size="3" /> - 
                   <input id="phone3" name="phone3" size="4" />
                </td>
             </tr>
             <tr>
                <td colspan="3">Number attending banquet (add $30 per person)</td>
                <td>
                   <select id="guests" name="guests" onchange="calcCost();">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                      <option>6</option>
                      <option>7</option>
                      <option>8</option>
                      <option>9</option>
                      <option>10</option>
                   </select>
                </td>
             </tr>
             <tr>
                <td colspan="3"><span>*</span>Member of ACGIP (save $25 on registration fee)</td>
                <td>
                   <input type="radio" name="member" value="yes" /> Yes
                   <input type="radio" name="member" value="no" /> No
                </td>
             </tr>
          </table>
    
          <p><span>* Required Information</span></p>
          <p style="text-align: center"><input id="sbutton" type="submit" value="continue" /></p>
    
    
       </div>
       </form>
    
    </body>
    </html>
    Summary.html file
    Code:
      <title>Conference Summary Page</title>
       <link href="summary.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript">
    		var searchString = window.location.search.slice(1);
    		var formString = searchString.replace(/\+/g, " ");
    		var dataString = unescape(formString);
    		var data = dataString.split(/[&=]/g);
    		
       </script>
    
    </head>
    
    <body>
       <div id="links"><img src="links.jpg" alt="" /></div>
       <div id="head"><img src="logo.jpg" alt="CGIP Annual Conference" /></div>
       <div id="edge"><img src="edge.jpg" alt="" /></div>
    
       <div id="main">
       <p id="intro">
          <b>10th Annual Conference of Computer Graphics and Image Processing</b><br />
             University of Colorado, Boulder<br />
             March 3 - March 7<br />
             Conference Fee: $145
       </p>
    
       <table id="summary">
          <tr><td colspan="2"><h3>Registration Summary</h3></td></tr>
          <tr>
             <td>Total Conference Cost:</td>
             <td>
                <script type="text/javascript">
    				document.write("$" + data[1]);
                </script>
             </td>
          </tr>
          <tr>
             <td>Name:</td>
             <td>
                <script type="text/javascript">
    				document.write(data[3] + " " + data[5]);
                </script>
             </td>
          </tr>
          <tr>
             <td>Address:</td>
             <td>
                <script type="text/javascript">
    				reg = /[\n]/g;
    				var address = data[7].replace(reg,"<br />");
    				document.write(address);
                </script>
             </td>
          </tr>
          <tr>
            <td>E-mail:</td>
            <td>
               <script type="text/javascript">
    				document.write(data[9]);
               </script>
            </td>
          </tr>
          <tr>
             <td>Phone:</td>
             <td>
               <script type="text/javascript">
    				document.write("(" + data[11] + ")" + data[13] + "-" + data[15]);
               </script>
             </td>
         </tr>
         <tr>
            <td>Attending Banquet ($30 per person):</td>
            <td>
               <script type="text/javascript">
    				document.write(data[17]);
               </script>
            </td>
         </tr>
         <tr>
            <td>ACGIP Member (save $25):</td>
            <td>
               <script type="text/javascript">
    				document.write(data[19]);
               </script>
            </td>
         </tr>
      </table>
    
      <p>Print this page and retain it for your records.</p>
    
      </div>
    
    </body>
    </html>
    JS file

    Code:
    window.onload = init;		//runs the init function on page load
    
    function init(){
    	document.forms[0].onsubmit = submitForm;
    }
    
    function calcCost(){
    	var cost =145;
    	var guests = document.forms[0].guests.value;
     cost = cost + (guests * 30);
    
     if (document.forms[0].member.value == 'yes') {
        cost = cost - 25;}
     document.forms[0].total.value = cost;
    }
    
    function testLength(field){
    	if(field.value.length == 0){
    		field.style.backgroundColor="yellow";
    		return false;	
    	}else{
    		field.style.backgroundColor="white";
    		return true;
    	}
    }
    
    function testPattern(field, reg){
    	reg = /\d{3,4}/
    	if(reg.test (field.value) == false){
    		field.style.backgroundColor="yellow";
    		field.style.color="red";
    		return false;	
    	}else{
    		field.style.backgroundColor="white";
    		field.style.color="black";
    		return true;
    	}
    }
    
    function submitForm(){
    	var valid;
    	if (testLength(document.forms[0].fname)==false){
    		valid = false;
    	}
    	if (testLength(document.forms[0].lname)==false){
    		valid = false;
    	}
    	if (testLength(document.forms[0].address)==false){
    		valid = false;
    	}
    	if (testLength(document.forms[0].email)==false){
    		valid = false;
    	}
    	if (testPattern(document.forms[0].phone1)==false){
    		valid = false;
    	}
    	if (testPattern(document.forms[0].phone2)==false){
    		valid = false;
    	}
    	if (testPattern(document.forms[0].phone3)==false){
    		valid = false;
    	}
    	
    	if(document.forms[0].member.checked || document.forms[0].member.checked==false){
    		member.style.backgroundColor="yellow";
    		valid = false;
    	}
    	if(valid == false){
    		alert("Enter all required information in the appropriate format");
    	}else{
    		calcCost();
    		return valid;
    	}
    
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,211
    Thanks
    80
    Thanked 4,571 Times in 4,535 Posts
    You can't get the value from a group of radio buttons by just using name.value.

    You have to write a function to determine which one of the group is checked and then returns its value (or, presumably, return null if none or checked).

    But for your simply yes/no radio buttons, you could do this:
    Code:
    function calcCost()
    {
            var form = document.forms[0];
    	var cost =145;
    	var guests = Number( form.guests.value );
            if ( isNaN(guests) )
            {
                 cost = "Form is incomplete";
            } else {
                 cost = cost + (guests * 30);
                 if ( form.member[0].checked ) cost -= 25;
            }
            form.total.value = cost;
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,211
    Thanks
    80
    Thanked 4,571 Times in 4,535 Posts
    As for the other problem: You aren't returning false from the onsubmit function when valid is false.

    An easy fix: End the function thus:
    Code:
    	if(valid == false){
    		alert("Enter all required information in the appropriate format");
    	}else{
    		calcCost();
    	}
            return valid;
    In other words, ALWAYS return the value of valid.

    I have to say I don't think your form checking is very thorough. As it sits, the user can enter a single space into each form field and you will accept it.

    Oh....and this is wrong:
    Code:
    	if(document.forms[0].member.checked || document.forms[0].member.checked==false){
    		member.style.backgroundColor="yellow";
    		valid = false;
    	}
    It needs to be
    Code:
    	if( ! document.forms[0].member[0].checked && ! document.forms[0].member[1].checked){
    		member.style.backgroundColor="yellow";
    		valid = false;
    	} else {
    		member.style.backgroundColor="white";
            }
    You know, form validation is probably the one most discussed issue in this forum. You would do well to search for some posts on how to do effective validation, which yours simply is not.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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