Javascript form data computations

9 New Member

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 Reply

1683

pbmods

5,821

Recognized Expert Expert

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\javascrip t":

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

Recognized Expert New Member

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

New Member

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

Recognized Expert New Member

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

7057

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 simple/advanced html forms and how it can be used to override cookie/session

Java

4497

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

5660

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 difficult to know what is going on. One of these Order Forms you can see here... http://www.cardman.co.uk/orderform.php3

Javascript

3285

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 arbitrary data structure. I'd like to do the same with javascript. print Data::Dumper(document)

Javascript

1860

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 submit button, but when I'm getting the form collection (using post or get (form/querystring) I can't retrieve that

ASP.NET

3497

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 click a button on a pop-up window the javascript for that button click does a 'button.form.submit'. On the Server side there is a Button click...

ASP.NET

4690

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 appears that the data goes straight to the processing page, rather than the javascript seeing if data is missing and popping up an alert. I thought it...

PHP

2083

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 the original form to correct the input. This all works fine until I try to incorporate a javascript to display a popup calendar which posts the...

ASP / Active Server Pages

3334

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 mark on a point or two? Have I overlooked something? Is my basic goal flawed? Is code bad in so many different ways that I

Javascript

7464

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...

General

7413

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...

Windows Server

5968

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...

Career Advice

5323

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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...

Microsoft Access / VBA

4943

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...

C# / C Sharp

3449

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...

Networking - Hardware / Configuration

3440

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1874

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

700

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

General