• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3157
  • Last Modified:

Javascript - adding values from multiple form fields.

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
JWeb Admin
Asked:
JWeb Admin
  • 7
  • 6
1 Solution
 
b0lsc0ttIT ManagerCommented:
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
 
JWeb AdminAuthor Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
b0lsc0ttIT ManagerCommented:
No rush.  I wouldn't expect them until everything was done with this anyways. :)

bol
0
 
JWeb AdminAuthor Commented:
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
 
JWeb AdminAuthor Commented:
There's no dollar sign....
0
 
JWeb AdminAuthor Commented:
I've also added this hidden form field:

<input type="hidden" name="x_Amount" />
0
 
b0lsc0ttIT ManagerCommented:
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
 
JWeb AdminAuthor Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
JWeb AdminAuthor Commented:
That worked!!!! Awesome - thanks so much - I really appreciate your help.
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I'm glad I could help.  Thanks for another fun question, the grade and the points.

bol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now