Need to multiply a text box value and display in total text box

I have tweaked a JavaScript funtion I borrowed but need to tweak it more and cannot figure it out.  Currently, when a number is entered in one of my textboxes, that number is added to the "total" text box.  I have 6 text boxes.  Here is what I want to happen.  When a number is entered in textbox1, I want it multiplied by 4 and added to the total.  When a number is entered in textbox2, I want it multiplied by 8 and added to the total.  When a number is entered in textbox3, I want it multiplied by 16 and added to the total. Textboxes 4-6 are repeats of Textboxes 1-3. Here are the functions I am using.

function doTotal() {
     var total = 0;
     for (var idx=0;idx<=5;idx++) {
          total += parseFloat(document.getElementById(fldName[idx]).value);
     }    
     document.getElementById('txtTotal').value = total;
}    
function calc(f) {
     doTotal();
     
          var idx;
          var costIndex;
          for (idx=0;idx<=5;idx++) {
               if (f.name==fldName[idx]) {
                    costIndex = idx;
                    break;
               }
         
          for (idx=costIndex;idx<=5;idx++) {
               document.getElementById(fldName[idx]).value = f.value;
          }
          doTotal();
     }
}
 

waynerayAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Andrew BeersTechnology LeadCommented:
sort of a odd way to do things but here:

use whatever event you are using if in the input types or on a button:  i'll just call this onEvent="" ok?


<form name="tallyForm">
<input type="text" name="box1" onEvent="tallyForm.total.value += parseFloat(tallyForm.box1.value) * 4.0>
<input type="text" name="box2" onEvent="tallyForm.total.value += parseFloat(tallyForm.box2.value) * 8.0>
<input type="text" name="box3" onEvent="tallyForm.total.value += parseFloat(tallyForm.box3.value) * 16.0>

<input type="text" name="box4" onEvent="tallyForm.total.value += parseFloat(tallyForm.box4.value) * 4.0>
<input type="text" name="box5" onEvent="tallyForm.total.value += parseFloat(tallyForm.box5.value) * 8.0>
<input type="text" name="box6" onEvent="tallyForm.total.value += parseFloat(tallyForm.box6.value) * 16.0>

<input type="text" name="total" value="0">
</form>

Doing it this way doesn't require any fancy javascript function... the text boxes handle themselves and then update the total text box from their own event calls.  Like I said I don't know which event you are using but... There's an easy way of doing it... you would refrence them the same way tallyForm.box#.value from a standard javascript function too.

~Aqua
XxavierCommented:
Hi Wayne!! it is Xxavier here!! :o)  Give this little ditty a whirl  

<script>
function calc(f){
 sum=0
 for (i=1;i<4;i++){
  sum+=Math.pow(2,i+1)*f['box'+i].value
  sum+=Math.pow(2,i+1)*f['box'+(i+3)].value
 }
 f.total.value=1*sum
}
</script>

<form>
  <p><input type="text" name="box1" onblur=" calc(this.form)">1</p>
  <p><input type="text" name="box2" onblur=" calc(this.form)">2</p>
  <p><input type="text" name="box3" onblur=" calc(this.form)">3</p>
  <p><input type="text" name="box4" onblur=" calc(this.form)">4 </p>
  <p><input type="text" name="box5" onblur=" calc(this.form)">5 </p>
  <p><input type="text" name="box6" onblur=" calc(this.form)">6</p>
  <p><input type="text" name="total" onblur=" calc(this.form)">Total </p>


See ya Xx. :o)
</form>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Andrew BeersTechnology LeadCommented:
I appologize... I had a typo:

<form name="tallyForm">
<input type="text" name="box1" onEvent="tallyForm.total.value += parseFloat(tallyForm.box1.value) * 4.0;">
<input type="text" name="box2" onEvent="tallyForm.total.value += parseFloat(tallyForm.box2.value) * 8.0;">
<input type="text" name="box3" onEvent="tallyForm.total.value += parseFloat(tallyForm.box3.value) * 16.0;">

<input type="text" name="box4" onEvent="tallyForm.total.value += parseFloat(tallyForm.box4.value) * 4.0;">
<input type="text" name="box5" onEvent="tallyForm.total.value += parseFloat(tallyForm.box5.value) * 8.0;">
<input type="text" name="box6" onEvent="tallyForm.total.value += parseFloat(tallyForm.box6.value) * 16.0;">

<input type="text" name="total" value="0">
</form>

This method requires no javascript function call nor a overall tally of sums... Although Xx's solution will allow for updated fields and multiple updates rather than a signle update to a box.  Although his version will cause a problem when a text feild has no data AND it needs to be parsed as a float.

~Aqua
waynerayAuthor Commented:
Xxavier's response was what I was looking for.  However, I also like Aqua's response.  Thanks to both of you for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.