Javascript form data computations

My friend and I are trying to start a business and are writing a website of our own. We have been trying to create an online estimator and are having trouble with writing the javascript that is to handle the form data. I am having trouble capturing the form data for use using the onsubmit operator. We have written all of the options using list boxes using numbers as the values. I have attempted to create a user defined function to caculate the total and I have tried to use an alert box to give the instant result to the user before submitting the info to us. However, I am not sure that I am using the correct syntax to capture the value of the list boxes. Also, I am not sure that my user defined function is written properly. In fact, I can't even get my function to return an alert box even after inserting a if-else statement with alert boxes as both actions. I have to admit that I am new to Javascript (I learned it this weekend) and this is my 1st real project. I could really use some help here. Also, where can I find out how to write the server-side javascript needed for processing data after the submission. Below I have included a smaller version of the code that I wrote. PLEASE HELP!!!

Expand|Select|Wrap|Line Numbers

 
<html>

    <head>

    <title>Online Estimator</title>

        <!--

Expand|Select|Wrap|Line Numbers

 
    <script language="Javascript" type="text\javascript">

    function formTotal () {

       var ourForm = document.forms[0];

       var aquariumIdx = ourForm.aquarium.selectedIndex;

       var aquarium = ourForm.aquarium.options[aquariumIdx].value;

       var tableIdx = ourForm.table.selectedIndex;

       var table = ourForm.table.options[tableIdx].value;

       var bedIdx = ourForm.bed.selectedIndex;

       var bed = ourForm.bed.options[bedIdx].value;

       var couchIdx = ourForm.couch.selectedIndex;

       var couch = ourForm.couch.options[couchIdx].value;

       var chairsIdx = ourForm.chairs.selectedIndex;

       var chairs = ourForm.chairs.options[chairsIdx].value;

       var milesIdx = ourForm.miles.selectedIndex;

       var miles = ourForm.miles.options[milesIdx].value;

       var longWalkIdx = ourForm.longWalk.selectedIndex;

       var longWalk = ourForm.longWalk.options[longWalkIdx].value;

       var stairflightsIdx = ourForm.stairflights.selectedIndex;

       var stairflights = ourForm.stairflights.options[stairflightsIdx].value;

       var preTotal = aquarium + table + bed + couch + chairs + miles;

       var preTotal2 = preTotal * longWalk;

       var Total = preTotal2 * stairflights;

       return = alert (Total)

       }

    </script>

Expand|Select|Wrap|Line Numbers

 
        -->

     </head>

     <body>

       <h1><b>Online Esitmator</b></h1>

       <form action = "#" onsubmit = "return formTotal()">
 
<b>Aquariums:</b>

       <select name = "aquarium">

       <option value = "0">0</option>

       <option value = "3">1</option>

       <option value = "6">2</option>

       <option value = "9">3</option>

       </select>
 
<b>Tables:</b>

       <select name = "table">

       <option value = "0">0</option>

       <option value = "6">1</option>

       <option value = "12">2</option>

       <option value = "18">3</option>

       <option value = "24">4</option>

       </select>
 
       <b>Beds:</b>

       <select name = "bed">

       <option value = "0">0</option>

       <option value = "10">1</option>

       <option value = "20">2</option>

       <option value = "30">3</option>

       <option value = "40">4</option>

       </select>
 
       <b>Couches:</b>

       <select name = "couch">

       <option value = "0">0</option>

       <option value = "10">1</option>

       <option value = "20">2</option>

       <option value = "30">3</option>

       <option value = "40">4</option>

       </select>
 
       <b>Chairs:</b>

       <select name = "chairs">

       <option value = "0">0</option>

       <option value = "3">1</option>

       <option value = "6">2</option>

       <option value = "9">3</option>

       <option value = "12">4</option>

       <option value = "15">5</option>

       </select>
 
       <b>Miles between Locations:</b>

       <select name = "miles">

       <option value = "5">Under 10</option>

       <option value = "10">10-20</option>

       <option value = "15">20-30</option>

       <option value = "20">30-40</option>

       </select>
 
       <b>Long Walk:</b>

       <select name = "longWalk">

       <option value = "1">No</option>

       <option value = "1.2">From Only</option>

       <option value = "1.2">To Only</option>

       <option value = "1.4">To and From</option>

       </select>
 
       <b>Flights of Stairs:</b>

       <select name = "stairflights">

       <option value = "1">None</option>

       <option value = "1.2">1 flight</option>

       <option value = "1.4">2 flights</option>

       <option value = "1.6">3 flights</option>

       <option value = "1.8">4 flights</option>

       <option value = "2.0">5 flights</option>

       <option value = "2.2">6 flights</option>

       </select>
 
       <input type = "submit" value = "Get Estimate!">
 
       </form>

    </body>

</html>

If anyone can give some insight, it would be greatly appreciated...
-JOE-

Sep 4 '07 #1

Subscribe Post Reply

1672

pbmods

5,821

Expert 4TB

Heya, Joe. Welcome to TSDN!

Please use CODE tags when posting source code. See the REPLY GUIDELINES on the right side of the page next time you post.

Try putting the  inside of your script block, and it's "text/javascript", not "text\javascript":

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript">

// <!--

    ...

// -->

</script>

Also, change this line:

Expand|Select|Wrap|Line Numbers

return = alert (Total)

To this:

Expand|Select|Wrap|Line Numbers

 
alert(Total);

return Total;

Sep 4 '07 #2

phvfl

173

Expert 100+

Hi Joe,

Welcom to TSDN...

Before I start could you please make sure that you use code tags when entering code into posts as it makes it easier to read.

Secondly good attempt for your first proper code, there are just a few small issues that prevented this form working.

Firstly the HTML comments that you had used were around the script tag instead of inside it, this is why you couldn't get any alerts to work, using HTML comments to hide javascript from browsers that do not understand javascript is good practice, the syntax is:
[HTML]
<script>

</script>
[/HTML]
Another thing is to use a javascript comment before the HTML closing comment. This prevents the closing HTML comment being parsed by the script engine.

The second issue is that in the type attribute you used a backwards slash instead of a forwards one, this prevented the script tag from being understood as javascript, this would make the declaration:

[HTML]
<script type="text/javascript">

</script>
[/HTML]
Now we are onto the script itself. The type of the variable being returned from the selects on the lines like:

Expand|Select|Wrap|Line Numbers

var table = ourForm.table.options[tableIdx].value;

is a string. This means that when you were trying to add the values you were concatenating strings instead of adding numbers, this is easy to rectify by multiplying the value by 1 to force it to a number:

Expand|Select|Wrap|Line Numbers

var table = ourForm.table.options[tableIdx].value * 1;

Finally, when you are setting the onsubmit to use return the return value should be true or false. Returning true would allow the form to continue and submit, returning false would stop the form from submitting. Place your alert before the return and return a boolean value.

Expand|Select|Wrap|Line Numbers

 
alert("message text");

return true;

If you are always going to submit the form then don't return a value and set the onsubmit action just to the name of the form and don't use the return keyword in either the onsubmit or the function.

I think that this should let your code work. If it doesn't post your revised code and I'll look at what you then have.

Sep 4 '07 #3

JLupear

I just wanted to thank you guys for the help with this script. Your advice was pure gold. Immediately the code worked after making the changes you suggested. I appreciate the help. I will make sure that my next posted question will have the <tags> you requested (although I will have to figure out what you mean). Thanks again. \

PS--Javascript is cool!

Sep 4 '07 #4

phvfl

173

Expert 100+

I just wanted to thank you guys for the help with this script. Your advice was pure gold. Immediately the code worked after making the changes you suggested. I appreciate the help. I will make sure that my next posted question will have the <tags> you requested (although I will have to figure out what you mean). Thanks again. \

PS--Javascript is cool!

Javascript is indeed cool. Code tags are explained here

Sep 4 '07 #5

Similar topics

HACKING WITH JAVASCRIPT

by: Gowhera Hussain | last post by:

Use This for Learning Only .... Do Not Try To Act Smart HACKING WITH JAVASCRIPT Dr_aMado Sun, 11 Apr 2004 16:40:13 UTC This tutorial is an overview of how javascript can be used to bypass...

Java

prePEP: Decimal data type

by: Batista, Facundo | last post by:

Here I send it. Suggestions and all kinds of recomendations are more than welcomed. If it all goes ok, it'll be a PEP when I finish writing/modifying the code. Thank you. .. Facundo

Python

Some unknown browsers fail to calculate my JavaScript code.

by: Cardman | last post by:

Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is...

Javascript

javascript equivalent of 'data dumper'

by: horos | last post by:

hey all, I'm a heavy perl user, not so much a java script user, and was wondering... perl has an extremely nice utility called Data::Dumper, which allows you to dump out the contents of an...

Javascript

asp/javascript question

by: Bruno Alexandre | last post by:

Hi guys, Sorry about the off topic, but I can't find the ASP group just the ASP dot NET If I want to block a user to change a form after submiting, I add a function that will disable the...

ASP.NET

Doing a javascript form.submit and triggering server side event code for button

by: John Boy | last post by:

Hi, Can anyone help. This is really doing my nut in. 3 years ASP exp. and now doing .DOT which is a step in the wrong direction. Basically I am left with the code of a guy who has left. When I...

ASP.NET

Form validation with PHP/Javascript

by: Chris | last post by:

Hi, I have a form for uploading documents and inserting the data into a mysql db. I would like to validate the form. I have tried a couple of Javascript form validation functions, but it...

PHP

Problem when using javascript

by: anthonybrough | last post by:

I have an asp page that has a form to collect user data in a form. when the user clicks submit the input is validated. If any fields are not acceptable the user clicks on a button to go back to...

ASP / Active Server Pages

RFD: How To Recognize Bad Javascript Code

by: Jeremy J Starcher | last post by:

(Request for Discussion) I've put together a guide that I hope will help novice coders avoid the same hair pulling that I went through. I'm open for comments about it. Have I missed the...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA