?
Solved

Javascript - adding values from multiple form fields.

Posted on 2007-07-24
13
Medium Priority
?
3,148 Views
Last Modified: 2013-11-19
I have multiple form field elements, say for example I want a user to select a predefined option from a drop down list (option value=$35.00) I want them to also be able to type in an amount if they want to donate additional money.

So basically, if I choose a value from a drop down, and it is $35.00, there should be another form field below it where the user can type in any amount that they want.

If they type in this amount, the two values should be added together and then passed to my payment gateway as the form field which has the name "x_amount"

If a user simply chooses a value from teh pull down menu, then that value should be passed to the Total field, same goes for the other form field where they can enter in their own donation amount.

Is it possible to add these 2 fields which have different names, and then create a Total field that has the name x_amount?  I'd like to just do this with Javascript.
0
Comment
Question by:JWeb Admin
  • 7
  • 6
13 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562527
Make the Total field in your html so it is ready for Javascript to use.  For example ...

<input type="hidden" name="Total" />

The Javascript to add the 2 fields could be something like ...

<form onsubmit="this.form.Total.value = parseFloat(this.form.fieldName1.value) + parseFloat(this.form.fieldName2.value);" >

Let me know if you have a question or need more information.  You will need to replace fieldName1 and fieldName2 with the real field names.

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562586
Nice - I will try this out tomorrow afternoon....I appreciate your help, if you don't mind I'll try this out then grant the points.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562595
If the value has a dollar sign you will need to use ...

<form onsubmit="this.form.Total.value = parseFloat(this.form.fieldName1.value.replace('$','')) + parseFloat(this.form.fieldName2.value.replace('$',''));" >

Let me know if you have a question.

bol
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562599
No rush.  I wouldn't expect them until everything was done with this anyways. :)

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562664
OK - I've tried this now, except it's not adding the two values together:

<FORM name="order" action="sim.php" method="POST" onsubmit="this.form.x_Amount.value = parseFloat(this.form.starfish.value) + parseFloat(this.form.donation.value);">

That's what my form tag looks like.  The value x_Amount needs to be the sum of form element name "starfish" plus form element name "donation"

I can tell its not working because i have a page that follows which gets all values passed to it, and x_Amount isn't being passed....
0
 

Author Comment

by:JWeb Admin
ID: 19562693
There's no dollar sign....
0
 

Author Comment

by:JWeb Admin
ID: 19562702
I've also added this hidden form field:

<input type="hidden" name="x_Amount" />
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562708
Let's find out what you are getting then.  Try ...

<FORM name="order" action="sim.php" method="POST" onsubmit="alert('starfish is ' + this.form.starfish.value + ' and donation is ' + this.form.donation.value); this.form.x_Amount.value = parseFloat(this.form.starfish.value) + parseFloat(this.form.donation.value);">

Let me know if you have a question or need more info.

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562717
Strange - I added your code to my form and there is no alert showing me those values.  Could it be that my code is in the wrong spot?

This is exactly what I'm using:

<FORM name="order" action="sim.php" method="POST" onsubmit="alert('starfish is ' + this.form.starfish.value + ' and donation is ' + this.form.donation.value); this.form.x_Amount.value = parseFloat(this.form.starfish.value) + parseFloat(this.form.donation.value);">
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 19562738
No, probably a javascript error.  Try this instead ...

<FORM name="order" action="sim.php" method="POST" onsubmit="alert('starfish is ' + document.order.starfish.value + ' and donation is ' + document.order.donation.value); document.order.x_Amount.value = parseFloat(document.order.starfish.value) + parseFloat(document.order.donation.value);">

If that doesn't work then look for Javascript errors and paste the html for the 2 elements (starfish and donation).

bol
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562741
With the previous code you could try this instead of this.form but the last post will also access the form and its field's and values.

bol
0
 

Author Comment

by:JWeb Admin
ID: 19562770
That worked!!!! Awesome - thanks so much - I really appreciate your help.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19562849
Your welcome!  I'm glad I could help.  Thanks for another fun question, the grade and the points.

bol
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses
Course of the Month13 days, 14 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question