Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

New To Javascript Trying to make a Calculator

Status
Not open for further replies.
NYFashionToGo

NYFashionToGo

Technical User
Jan 16, 2007
76
0
0
US
Please bare with me I am brand new to Javascript, I have done some other coding with VBA.

I am trying to build a shipping calculator to post on a Website. I am little confused on how to do something, Or how to make it happen. I am short on some of the terms.

I eliminated alot of the code Below due to redundancy of it and changed some of the numbers..

First Column to the Left. This is the first 3 digits of a USA zip code. Instead of being a drop down (that would be insane hard for buyer to get) I would Like a text box where they simply type in the 5 digit zip.. I match the first three digits and pull the data accordingly.

The Other columns I do not want to have a drop down Menu at all. Just the result displayed based on the zip code typed..

Im trying to learn this stuff. Please bare with me.

I realize that if I loose the drop down for the zip. I loose everything. Part of my problem.. I not certain how to set it up so it does that.

Any insight whould be helpful and appreciated.

Thank You


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>
<table id=AutoNumber1 style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="0" width="72%" border="1">
<tr>
<td align="center"><font color="#404040" size="2">U.S. Zip Code</font></td>
<td align="center"><font size="2" color="#404040">1 Pound Package</font></td>
<td align="center"><font size="2" color="#404040">2 Pound Package</font></td>
<td align="center"><font size="2" color="#404040">3 pound Package</font></td>
<td align="center"><font size="2" color="#404040">4 Lb Package</font></td>
</tr>
<tr>
<form name="sizing">
<td align="center"><font color="#404040" size="2">
<select name="USA" size="1" onChange="javascript:
for (var i = 0; i<document.sizing.elements.length; i++) {
if ((document.sizing.elements.type == 'select-one')) {
document.sizing.elements.selectedIndex = this.selectedIndex;
}
}">

<option>988</option>
<option>989</option>
<option>990</option>
<option>991</option>
<option>992</option>
<option>993</option>
<option>994</option>
<option>995</option>
<option>996</option>
<option>997</option>
<option>998</option>
<option>999</option>
</select>
</font></td>
<td align="center"><font color="#404040" size="2">
<select name="USA_Named" size="1" onChange="javascript:
for (var i = 0; i<document.sizing.elements.length; i++) {
if ((document.sizing.elements.type == 'select-one')) {
document.sizing.elements.selectedIndex = this.selectedIndex;
}
}">

<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
<option>4.60</option>
</select>
</font></td>
<td align="center"><font color="#404040" size="2">
<select name="UK" size="1" onChange="javascript:
for (var i = 0; i<document.sizing.elements.length; i++) {
if ((document.sizing.elements.type == 'select-one')) {
document.sizing.elements.selectedIndex = this.selectedIndex;
}
}">

<option>7.50</option>
<option>8.50</option>
<option>9.50</option>
<option>9.75</option>
<option>10.50</option>
<option>11.50</option>
<option>12.00</option>
<option>13.00</option>
<option>14.00</option>
<option>14.50</option>
<option>15.00</option>
<option>16.00</option>
</select>
</font></td>
<td align="center"><font color="#404040" size="2">
<select name="Australia" size="1" onChange="javascript:
for (var i = 0; i<document.sizing.elements.length; i++) {
if ((document.sizing.elements.type == 'select-one')) {
document.sizing.elements.selectedIndex = this.selectedIndex;
}
}">

<option>12.00</option>
<option>13.00</option>
<option>14.00</option>
<option>15.00</option>
<option>16.00</option>
<option>17.00</option>
<option>18.00</option>
<option>19.00</option>
<option>20.00</option>
<option>21.00</option>
<option>22.00</option>
<option>23.00</option>
</select>
</font></td>
<td align="center"><font color="#404040" size="2">
<select name="Germany" size="1" onChange="javascript:
for (var i = 0; i<document.sizing.elements.length; i++) {
if ((document.sizing.elements.type == 'select-one')) {
document.sizing.elements.selectedIndex = this.selectedIndex;
}
}">

<option>15.00</option>
<option>16.00</option>
<option>17.00</option>
<option>18.00</option>
<option>19.00</option>
<option>20.00</option>
<option>21.00</option>
<option>22.00</option>
<option>23.00</option>
<option>24.00</option>
<option>25.00</option>
<option>26.00</option>

</select>
</font></td>
</form>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />




<!
</body>

</html>
 
Sort by date Sort by votes
Creating a text field is easy:
Code: 
<input type="text" name="zipcode" id="zipcode" />

Then you can add an [tt]onchange[/tt] handler to it, so that when the user has finished typing you can do some processing:
Code: 
<input type="text" name="zipcode" id="zipcode" [b]onchange="handleZipChange(this);"[/b] />

From there you can write a Javascript function to execute when the value in your text field changes:
Code: 
<script>
function handleZipChange(objTextField){
  var strZipValue = objTextField.value;
  alert("The Zip Code you entered was: " + strZipValue);
  var strZipPrefix = strZipValue.slice(0,3);
  alert("The first three characters were: " + strZipPrefix);
}
</script>
Of course you would replace the body of your function with something useful. I'm not entirely sure what sort of data you're attempting to pull and from where so I can't really help you with that at this stage.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
Webflo
 
Upvote 0 Downvote
Thank you for posting that,I have to educate myself a little bit with this.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
152
lexer
lexer
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
265
Mike Lewis
Mike Lewis
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
172
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
79
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
131
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top