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 gkittelson 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
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.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
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
538
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
634
Kennelbloke
Kennelbloke
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
232
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
516
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top