...

View Full Version : JavaScript Array



j4v3d
03-12-2009, 02:56 PM
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


<!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;

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

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

jmrker
03-12-2009, 07:37 PM
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?

j4v3d
03-12-2009, 08:08 PM
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.

jmrker
03-12-2009, 08:16 PM
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!

j4v3d
03-13-2009, 11:36 AM
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;


<!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

Henley
03-13-2009, 02:20 PM
<!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>

j4v3d
03-13-2009, 03:30 PM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum