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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts

    JavaScript Array

    hi..... im trying to use arrays to display some data. i have used a form to get basic details in my case its an insurance form.... when clicking submit i want the arrays to produce the data based on the data selected and entered in the form.... i dont know how to start arrays and what to do completely lost..... any help and guidance would be appreciated...... heres my coding

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    		  <title> Car Insurance Form</title>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <script type="text/javascript">
          
              function validate(nForm){
    	
    		var nTitle = nForm['title'];
    		var nFirstName = nForm['firstname'];
    		var nLastName = nForm['lastname'];
    		var nSex = nForm['sex'];
    		var nCol = nForm['col'];
    		var nTitle3 = nForm['title3'];
    		var nTitle4 = nForm['title4'];
    		if (nTitle.selectedIndex == 0)
    			{
    			 alert('Choose your title');
    			 return false;
    			}
    		if (nFirstName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your first name');	
    			 return false;
    			}
    		if (nLastName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your last name');	
    			 return false;
    			}
    		if (nSex[0].checked == false && nSex[1].checked == false)
    			{
    			 alert('Male or Female?');
    			 return false;
    			}
    		if (nCol[0].checked == false && nCol[1].checked == false)
    			{
    			 alert('Choose your age group');
    			 return false;
    			}
    		if (nTitle3.selectedIndex == 0)
    			{
    			 alert('Select the number of previous claims');
    			 return false;
    			}
    		if (nTitle4.selectedIndex == 0)
    			{
    			 alert('Please select your estimated annual mileage');
    			 return false;
    			}
    		alert('Thank you for your submission')
    		return true;
              } 
    </script>
    
         </head>
    
         <body>
         <form action="" method="post" onsubmit="return validate(this)">
         <fieldset>
         <legend>Form</legend>
         <table>
         <tr>
         <td>Title</td>
         <td>
         <select class="select1col" name="title">
             <option>
             Please select
             </option>
             <option value="MR">
                    Mr
             </option>
             <option value="MRS">
                    Mrs
             </option>
             <option value="MISS">
                    Miss
             </option>
             <option value="MS">
                    Ms
             </option>
             <option value="DR">
                    Dr
             </option>
             <option value="REV">
                    Reverend
             </option>
             <option value="SIR">
                    Sir
             </option>
             </select>
             </td>
             </tr>
             <tr>
             <td>First Name</td>
             <td>
             <input type="text" name="firstname">
             </td>
             </tr>
             <tr>
             <td>Last Name</td>
             <td>
             <input type="text" name="lastname">
             </td>
             </tr>
             <tr>
             <td></td>
             </tr>
             <tr>
             <td>Sex</td>
             <td colspan="2" class="center">
             <table border="0" cellspacing="0" cellpadding="0" align="left">
             <tr>
             <td>Male</td>
             <td>
             <input type="radio" name="sex" value="M">&nbsp;
             </td>
             <td>Female</td>
             <td>
             <input type="radio" name="sex" value="F">
             </td>
             </tr>
             </table>
             </td>
             </tr>
             <tr>
             <td>Age</td>
             </tr>
             <tr>
             <td>18-24</td>
             <td>
             <input type="radio" name="col" value="18-24">
             </td>
             </tr>
             <tr>
             <td>25 &amp; Over</td>
             <td>
             <input type="radio" name="col" value="25-34">
             </td>
             </tr>
             </table>
             <hr>
             Car Details
             <hr>
             <table>
             <tr>
             <td>No of No Claims</td>
             <td>
             <select class="select1col" name="title3">
             <option value="">
             Please select
             </option>
             <option>
                1
             </option>
             <option>
                2
             </option>
             <option>
                3
             </option>
             <option>
                4
             </option>
             <option>
                5+
             </option>
             </select>
             </td>
             </tr>
             <tr>
             <td>Estimated Annual Mileage</td>
             <td colspan="2" class="center">
             <select class="select1col" name="title4">
             <option value="">
             Estimated Annual Mileage
             </option>
             <option>
             3000 or less
             </option>
             <option>
             5000 or more
             </option>
             </select>
             </td>
             </tr>
             </table>
    <input type="submit" name="submit" value="Submit" class="submitBtn">
    </fieldset>
    </form>
    
    </body>
    
    </html>
    AND THIS IS THE DATA I AM GIVEN TO PRODUCE BUT DONT KNOW HOW;



    link to image: http://www.imagger.com/view/613314_table.jpg.html

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts
    Well, the input form looks OK, but what do you want to do with the entry information?

    Describe what the output should look like based on the data entered.
    Where is the output to be display? Alert box, <DIV> tags, pop-up, another site?

  • #3
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    Well, the input form looks OK, but what do you want to do with the entry information?

    Describe what the output should look like based on the data entered.
    Where is the output to be display? Alert box, <DIV> tags, pop-up, another site?
    This is the specification of what needs to happen hope it answers your question mate.... av u looked at the image link the information is there as well;

    You are required to write JavaScript program that will gather data from the user and find the
    cheapest available insurance quotation for the user.
    The user should enter their name, age, sex, annual mileage and number of years of ‘no claims’ into
    an XHTML form.
    Using this data, the program will calculate insurance quotations for all the companies listed in table
    1.0. The program will then feed back to the user telling them the cheapest quotation.

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,148
    Thanks
    39
    Thanked 506 Times in 500 Posts

    Question More questions...

    Quote Originally Posted by j4v3d View Post
    Using this data, the program will calculate insurance quotations for all the companies listed in table
    1.0. The program will then feed back to the user telling them the cheapest quotation.
    I see the table, but where is this information coming from?
    A. An array which you have previousely entered the information.
    B. A database of records that contains the required information in fields of the record.
    C. A site that contains the information to be used in the display. If so, where and in what format?
    D. Someplace else?

    Note: You cannot read a .JPG file to gather the information.

    If this is a homework assignment then you need to go back and read the book some more
    or study your notes that the instructor has given up to the point where you can solve this problem!

  • #5
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jmrker View Post
    I see the table, but where is this information coming from?
    A. An array which you have previousely entered the information.
    B. A database of records that contains the required information in fields of the record.
    C. A site that contains the information to be used in the display. If so, where and in what format?
    D. Someplace else?

    Note: You cannot read a .JPG file to gather the information.

    If this is a homework assignment then you need to go back and read the book some more
    or study your notes that the instructor has given up to the point where you can solve this problem!
    i have to use arrays to bring up that information within that XHTML coding... do u get me? the user will fill out the form and based on the details they have entered the arrays will calculate the insurance quotes in the image provided... thats the only way i can explain it i can add some of the arrays to the existing coding if that would help but then it messes the form up so here goes the array coding;

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    		  <title> Car Insurance Form</title>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <script type="text/javascript">
          
              function validate(nForm){
    	
    		var nTitle = nForm['title'];
    		var nFirstName = nForm['firstname'];
    		var nLastName = nForm['lastname'];
    		var nSex = nForm['sex'];
    		var nCol = nForm['col'];
    		var nTitle3 = nForm['title3'];
    		var nTitle4 = nForm['title4'];
    		if (nTitle.selectedIndex == 0)
    			
    		{
    		     
        var age.document.myform.col.value;
    	var sex.document.myform.opt1.value;
    	var companyName = new Array("Kestrel Moon","BB", "Whatever You Drive", "Discount Drivers", 
    	"Indirect Curve", "Swindel", "Captain", "Saintly Drivers","Ipswich Union", "Young Drivers", 
    	"Atlee", "Good Deal", "Nice Price", "Insure For Lees", "Instant Insure");
    	
    	var Basicprice= new Array ("1165","1231","1052","1667","804","1010","510","890","490","803","923","1690","775","1435","1223");
    	
    	var olderdriversDisc = new Array ("475","380","210","310","599","100","0","0","0","200","300","0","0","424");
    	
    	var femaledrivers = new Array ("0","89", "34","291","0","187","0","0","203","107","434","0","998","43");
    	
    	var lowmileage = new Array ("97","43","23","302","45","35","19","0","0","78","81","112","487","49","113");  
    	
    	Var Extradiscount = new Array ("0","180","450","189","0","32","0","0","0","92","493","0","0","68");
    	
    	Var Noclaimsdiscount = new Array("98","85","43","93","0","103","40","155","0","82","70","47","30","59","96"); 
    		      }
    	       	
    			 alert('Choose your title');
    			 return false;
    			}
    		if (nFirstName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your first name');	
    			 return false;
    			}
    		if (nLastName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your last name');	
    			 return false;
    			}
    		if (nSex[0].checked == false && nSex[1].checked == false)
    			{
    			 alert('Male or Female?');
    			 return false;
    			}
    		if (nCol[0].checked == false && nCol[1].checked == false)
    			{
    			 alert('Choose your age group');
    			 return false;
    			}
    		if (nTitle3.selectedIndex == 0)
    			{
    			 alert('Select the number of previous claims');
    			 return false;
    			}
    		if (nTitle4.selectedIndex == 0)
    			{
    			 alert('Please select your estimated annual mileage');
    			 return false;
    			}
    		alert('Thank you for your submission')
    		return true;
              } 
    </script>
    
         </head>
    
         <body>
    
         <form action="" method="post" onsubmit="return validate(this)">
         <fieldset>
         <legend>Form</legend>
         <table>
         <tr>
         <td>Title</td>
         <td>
         <select class="select1col" name="title">
    
             <option>
             Please select
             </option>
             <option value="MR">
                    Mr
             </option>
             <option value="MRS">
                    Mrs
             </option>
             <option value="MISS">
    
                    Miss
             </option>
             <option value="MS">
                    Ms
             </option>
             <option value="DR">
                    Dr
             </option>
             <option value="REV">
                    Reverend
             </option>
    
             <option value="SIR">
                    Sir
             </option>
             </select>
             </td>
             </tr>
             <tr>
             <td>First Name</td>
             <td>
    
             <input type="text" name="firstname">
             </td>
             </tr>
             <tr>
             <td>Last Name</td>
             <td>
             <input type="text" name="lastname">
             </td>
    
             </tr>
             <tr>
             <td></td>
             </tr>
             <tr>
             <td>Sex</td>
             <td colspan="2" class="center">
             <table border="0" cellspacing="0" cellpadding="0" align="left">
    
             <tr>
             <td>Male</td>
             <td>
             <input type="radio" name="sex" value="M">&nbsp;
             </td>
             <td>Female</td>
             <td>
             <input type="radio" name="sex" value="F">
    
             </td>
             </tr>
             </table>
             </td>
             </tr>
             <tr>
             <td>Age</td>
             </tr>
    
             <tr>
             <td>18-24</td>
             <td>
             <input type="radio" name="col" value="18-24">
             </td>
             </tr>
             <tr>
             <td>25 &amp; Over</td>
    
             <td>
             <input type="radio" name="col" value="25-34">
             </td>
             </tr>
             </table>
             <hr>
             Car Details
             <hr>
             <table>
    
             <tr>
             <td>No of No Claims</td>
             <td>
             <select class="select1col" name="title3">
             <option value="">
             Please select
             </option>
             <option>
                1
             </option>
    
             <option>
                2
             </option>
             <option>
                3
             </option>
             <option>
                4
             </option>
             <option>
    
                5+
             </option>
             </select>
             </td>
             </tr>
             <tr>
             <td>Estimated Annual Mileage</td>
             <td colspan="2" class="center">
             <select class="select1col" name="title4">
    
             <option value="">
             Estimated Annual Mileage
             </option>
             <option>
             3000 or less
             </option>
             <option>
             5000 or more
             </option>
             </select>
    
             </td>
             </tr>
             </table>
    <input type="submit" name="submit" value="Submit" class="submitBtn">
    </fieldset>
    </form>
    
    </body>
    
    </html>
    i have highlighted the array coding in red for you to see and try figuring out what i mean thank you

  • #6
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
         <head>
              <title>
                  Auto Insurance Form
              </title>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
              <script type="text/javascript">
    
    	  var companyName = ["Kestrel Moon","BB","Whatever You Drive"]
    	  var basicPrice = [1165,1231,1052];
    	  var experiencedDisc = [475,380,210];
    	  var femaleDisc = [0,89,34];
    	  var lowMilesDisc = [97,43,23];
    	  var extraDisc = [0,180,450];
    	  var noClaimsDisc = [98,85,43];	
    
    	  function toAscending(a,b){
    
    		 return a-b;
    	  }
    
              function validate(nForm){
    
    		var nTitle = nForm['title'];
    		var nFirstName = nForm['firstname'];
    		var nLastName = nForm['lastname'];
    		var nSex = nForm['sex'];
    		var nCol = nForm['col'];
    		var nTitle3 = nForm['title3'];
    		var nTitle4 = nForm['title4'];
    
    		var femaleFactor = 0;
    		var experiencedFactor = 0;
    		var lowMilesFactor = 0;
    		var extraFactor = 0;
    		var noClaimsFactor = 0;
    
    		if (nTitle.selectedIndex == 0)
    			{
    			 alert('Choose your title');
    			 return false;
    			}
    		if (nFirstName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your first name');	
    			 return false;
    			}
    		if (nLastName.value.replace(/\s/g, "").length < 1)
    			{
    			 alert('Enter your last name');	
    			 return false;
    			}
    		if (!nSex[0].checked && !nSex[1].checked)
    			{
    			 alert('Male or Female?');
    			 return false;
    			}
    		if (!nCol[0].checked && !nCol[1].checked)
    			{
    			 alert('Choose your age group');
    			 return false;
    			}
    		if (nTitle3.selectedIndex == 0)
    			{
    			 alert('Select the number of previous claims');
    			 return false;
    			}
    		if (nTitle4.selectedIndex == 0)
    			{
    			 alert('Estimate your annual mileage');
    			 return false;
    			}
    	
    		if (nSex[1].checked)
    			{
    			 femaleFactor = 1;
    			}
    		if (nCol[1].checked)
    			{
    			 experiencedFactor = 1;
    			}
    		if (nTitle4.selectedIndex == 1)
    			{
    			 lowMilesFactor = 1;
    			}
    		noClaimsFactor = (nTitle3.selectedIndex * 1) - 1;
    
    		var resultsSorted = [];
    		var results = [];
    		var computedPrice = "";
    		
    		for (i=0; i<companyName.length; i++)
    			{
    			 computedPrice = basicPrice[i]
    			 - (experiencedDisc[i] * experiencedFactor)
    			 - (femaleDisc[i] * femaleFactor)
    			 - (lowMilesDisc[i] * lowMilesFactor)
    			 - extraDisc[i]	 
    			 - noClaimsDisc[i] * noClaimsFactor;
    
    			 resultsSorted[resultsSorted.length] = computedPrice;
    			 results[results.length] = computedPrice;
    			}
    
    		resultsSorted.sort(toAscending);
    
    		var company = ""		
    
    		for (i=0; i<results.length; i++)
    			{
    			 if (resultsSorted[0] == results[i])
    				{
    				 company = companyName[i];
    				}
    			}
    	
    		alert("Best rate:\n" + company + ": " + resultsSorted[0]) 
    		return false;
    		
              }         
    
              </script>
              <style type="text/css">
    
              body {background-color: #fffacd; margin-top: 60px;}
              form {width: 620px; margin: auto; font-family: 'times new roman'; font-size: 12pt;}
              fieldset {width: 620px; padding-left: 10px; background-color: #eee8aa; border: 1px solid #e6b280;}
              legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px;
              padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
              .submitBtn {background-color: #fff8dc; border: 1px solid #000000; font-family: arial; font-size: 10pt;
              font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; 
              margin-top: 5px; margin-bottom: 5px;}
    
              </style>
         </head>
    
         <body>
              <form action="" method="post" onsubmit="return validate(this)">
                   <fieldset>
                        <legend>Form</legend>
                        <table>
                             <tr>
                                  <td>
                                       Title
                                  </td>
                                  <td>
                                       <select class="select1col" name="title">
                                            <option>
                                                 Please select
                                            </option>
                                            <option value="MR">
                                                 Mr
                                            </option>
                                            <option value="MRS">
                                                 Mrs
                                            </option>
                                            <option value="MIS">
                                                 Miss
                                            </option>
                                            <option value="MS">
                                                 Ms
                                            </option>
                                            <option value="DR">
                                                 Dr
                                            </option>
                                            <option value="REV">
                                                 Reverend
                                            </option>
                                            <option value="SIR">
                                                 Sir
                                            </option>
                                       </select>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       First Name
                                  </td>
                                  <td>
                                       <input type="text" name="firstname">
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       Last Name
                                  </td>
                                  <td>
                                       <input type="text" name="lastname">
                                  </td>
                             </tr>
                             <tr>
                                  <td></td>
                             </tr>
                             <tr>
                                  <td>
                                       Sex
                                  </td>
                                  <td colspan="2" class="center">
                                       <table border="0" cellspacing="0" cellpadding="0" align="left">
                                            <tr>
                                                 <td>
                                                      Male
                                                 </td>
                                                 <td>
                                                      <input type="radio" name="sex" value="M">&nbsp;
                                                 </td>
                                                 <td>
                                                      Female
                                                 </td>
                                                 <td>
                                                      <input type="radio" name="sex" value="F">
                                                 </td>
                                            </tr>
                                       </table>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       Age
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       18-24
                                  </td>
                                  <td>
                                       <input type="radio" name="col" value="18-24">
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       25 &amp; Over
                                  </td>
                                  <td>
                                       <input type="radio" name="col" value="25-34">
                                  </td>
                             </tr>
                        </table>
                        <hr>
                        Car Details
                        <hr>
                        <table>
                             <tr>
                                  <td>
                                       No. of No Claims Years
                                  </td>
                                  <td>
                                       <select class="select1col" name="title3">
                                            <option value="">
                                                 Please select
                                            </option>
    					<option>
                                                 0
                                            </option>
                                            <option>
                                                 1
                                            </option>
                                            <option>
                                                 2
                                            </option>
                                            <option>
                                                 3
                                            </option>
                                            <option>
                                                 4
                                            </option>
                                            <option>
                                                 5+
                                            </option>
                                       </select>
                                  </td>
                             </tr>
                             <tr>
                                  <td>
                                       Estimated Annual Mileage
                                  </td>
                                  <td colspan="2" class="center">
                                       <select class="select1col" name="title4">
                                            <option value="">
                                                 Please select
                                            </option>
                                            <option>
                                                 3000 or less
                                            </option>
                                            <option>
                                                 5000 or more
                                            </option>
                                       </select>
                                  </td>
                             </tr>
                             </table>
    			 <input type="submit" name="submit" value="Submit" class="submitBtn">
                   </fieldset>
              </form>
         </body>
    </html>
    Last edited by Henley; 03-13-2009 at 02:39 PM.

  • #7
    New Coder
    Join Date
    Mar 2009
    Location
    UK
    Posts
    34
    Thanks
    6
    Thanked 0 Times in 0 Posts
    thanks for that.... instead of having it as a popup when the form is completed i want the information to be displayed in a new window or the same one if that is possible with the name of insurance and price listed...... is that possible?


  •  

    Posting Permissions

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