Dynamically adding numbers from a form.

Hello....disclaimer...I am a newbie :)

I am attempting to add 2 fields and obtain a total sum

Field 1 would be a list field. Showing 4 choices
Each choice has a number association (ie choice 1 =40, choice 2 = 80, etc)

Field 2 would be another list field...showing 4 choices
If choice 1 = 40, if choice 2 = 80 ,etc)

Summary Calc would add Field 1 and Field 2 together. I would prefer to do this without changing pages so I am guessing javascript would be the best choice....

Any help would be appreciated...thanks!

Greg

Aug 31 '07 #1

Subscribe Post Reply

2473

acoder

16,027

Expert Mod 8TB

Welcome to TSDN!

Give the select options values (just in case you haven't), e.g.

Expand|Select|Wrap|Line Numbers

<option value="40">Choice 1

Also give all three elements ids, e.g.

Expand|Select|Wrap|Line Numbers

<select id="field1">

To add, try:

Expand|Select|Wrap|Line Numbers

 var field1 = document.getElementById("field1").value;

var field2 = document.getElementById("field2").value;

document.getElementById("sumCalc").value=field1+field2;

How do you wish to trigger this? Whenever an option is changed or on clicking a button?

Sep 1 '07 #2

gregincolumbus

Hello and THANKS for helping!

My idea was that the form total would dynamically update anytime either list was altered. The goal was to general the totalfee amount so the person would know their fees and the amount could be sent to paypal payflow link for credit card payment.

Here is the general idea:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

</head>
 
<body>

<form id="form1" name="form1" method="post" action="">

  <table width="700" border="1">

    <tr>

      <td><div align="right">Category</div></td>

      <td><select name="select3" id="select3">

        <option>Select a Category</option>

        <option value="85">OMEA Member</option>

        <option value="25">OCMEA Member</option>

        <option value="45">Saturday Only</option>

      </select></td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td><div align="right">Family Attending</div></td>

      <td><select name="select4" id="select4">

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

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

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

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

      </select></td>

      <td>&nbsp;</td>

    </tr>

    <tr>

      <td><div align="right">Total Fees</div></td>

      <td><input type="text" name="textfield" id="textfield" /></td>

      <td>&nbsp;</td>

    </tr>

  </table>

  <p>&nbsp;</p>

</form>

</body>

</html>

Sep 1 '07 #3

acoder

16,027

Expert Mod 8TB

Define a function, e.g.

Expand|Select|Wrap|Line Numbers

 function addfields() {

 var select3 = document.getElementById("select3").value;

 var select4 = document.getElementById("select4").value;

 document.getElementById("textfield").value=select3+select4;

}

Use onchange on both select elements to call this:

Expand|Select|Wrap|Line Numbers

<select ... onchange="addfields()">

Sep 1 '07 #4

gregincolumbus

Thank you again for your help!

Unfortunately, I guess I wasn't clear in what I meant by adding the numbers...sorry

I need the numbers to be added mathmatically. Your solution works perfectly for concatenating the two fields....unfortunately I am looking for the sum of the two numbers.

Thanks again for any assistance.

Greg

Sep 2 '07 #5

markrawlingson

346

Expert 100+

If it's concatening the two numbers javascript is treating the numbers as strings instead of integers. You'll need to tell javascript that they are numbers, then it will add them properly.

Expand|Select|Wrap|Line Numbers

 
function addfields() {

 var select3 = parseInt(document.getElementById("select3").value);

 var select4 = parseInt(document.getElementById("select4").value);

 document.getElementById("textfield").value=select3+select4;

}

Note the existence of parseInt() wrapped around the values coming from the textboxes. If this doesn't work then try also wrapping is around the variables while you're performing the mathematical statement : parseInt(select3) + parseInt(select4)

Sep 2 '07 #6

gregincolumbus

Mark

That did the trick...THANK YOU BOTH for helping. I really appreciate it!!!
Final 2 questions.....

1. Is there a way to have the sumCalc field be none manually editable to the user (sort of like an echo in php)?

2. Is there a way to do an "if" statement to prevent any value from showing up if the user selects the inital select default (ie. "Please Select A Category")

Thanks for helping a newbie...I appreciate it. I am progressing nicely on php but I am still new to javascript.

Greg

Sep 2 '07 #7

markrawlingson

346

Expert 100+

Is there a way to have the sumCalc field be none manually editable to the user

You mean non-manually editable? So they can't enter anything into the field... ?

If that's what you mean then.. Sure there is. But that's just simple HTML.

<input type="text" DISABLED>

Sep 2 '07 #8

gits

5,390

Expert Mod 4TB

hi ...

yep ... disabled would do the trick and another option would be to set the readonly-attribute:

Expand|Select|Wrap|Line Numbers

 <!-- makes it really disabled - you cannot even copy the value -->

<input type="text" id="whatever_id" disabled="disabled"/>
 
<!-- makes it readonly - you may focus/select/copy the value -->

<input type="text" id="whatever_id" readonly="readonly"/>

that is the html way - and in case you want to set it through javascript you have to set/remove the attribute:

Expand|Select|Wrap|Line Numbers

 // to make it readonly

node_ref.setAttribute('readonly', 'readonly');
 
// to make it editable

node_ref.removeAttribute('readonly');

but you may also set the property of the obj:

Expand|Select|Wrap|Line Numbers

 // to make it readonly

node_ref.readonly = true;
 
// to make it editable

node_ref.readonly = false;

and it would be good practice not to mix the ways of setting the states ... that means use the attribute-way OR the properties-way ... believe me ... as your project and codebase grows you would be glad when having only one way ... because setting the property wouldn't change the attribute or its value ...

kind regards

Sep 2 '07 #9

gregincolumbus

Once again, thank you both! It works like a charm!!

....the last issue would be if a user selects on option in the first select menu, then reverts back to the default value "Please select a category", the sumCalc field shows "NaN" as the result....is there a way to wipe out the sumCalc result if the first select menu is the default?

I really appreciate you taking time to help a newbie. I have learned quite a bit just from you...thanks again!

Greg

Sep 2 '07 #10

gits

5,390

Expert Mod 4TB

hi ...

try something like the following:

Expand|Select|Wrap|Line Numbers

 function addfields() {

    var select3 = parseInt(document.getElementById('select3').value);

    var select4 = parseInt(document.getElementById('select4').value);

    var sum_field = document.getElementById('textfield');
 
    var value = select3 + select4;
 
    sum_field.value = isNaN(value) ? '' : value;

}

kind regards

Sep 2 '07 #11

gregincolumbus

A perfect solution..THANK YOU!

Do you have any suggestions for javascript books? I would really like to become more knowledgeable on the topic.

Thanks and best wishes

Greg

Sep 2 '07 #12

gits

5,390

Expert Mod 4TB

hi ...

JavaScript. The Definitive Guide by David Flanagan (5th Edition) ... is always a good recommendation ;) ... be sure about the edition ... the 5th is the latest one.

kind regards

Sep 2 '07 #13

gregincolumbus

Thanks! Hope you enjoy the rest of the holiday weekend!

Greg

Sep 2 '07 #14

gits

5,390

Expert Mod 4TB

no problem :) ... post back to the forum anytime you have more questions

kind regards

Sep 2 '07 #15

acoder

16,027

Expert Mod 8TB

Unfortunately, I guess I wasn't clear in what I meant by adding the numbers...sorry

I need the numbers to be added mathmatically. Your solution works perfectly for concatenating the two fields....unfortunately I am looking for the sum of the two numbers.

Drats, I forgot about the parseInt. Never mind, others pointed it out.

Sep 2 '07 #16

acoder

16,027

Expert Mod 8TB

....the last issue would be if a user selects on option in the first select menu, then reverts back to the default value "Please select a category", the sumCalc field shows "NaN" as the result....is there a way to wipe out the sumCalc result if the first select menu is the default?

If you just want a zero instead, you could set the value of the first option to 0 for an easier solution.

Sep 2 '07 #17

acoder

16,027

Expert Mod 8TB

Do you have any suggestions for javascript books? I would really like to become more knowledgeable on the topic.

Don't forget to also check out the tutorial links in the Offsite Links thread.

Sep 2 '07 #18

Dynamically adding numbers from a form.

Similar topics