Jump to content
Larry Ullman's Book Forums

Can I Make Calculations While Using Onkeyup Scripting And Auto Update Form Fields?


 Share

Recommended Posts

I am using the wonderful onkeyup argument to auto update values in forms. I have a question though.

Example:

I have five values.

Loan,

Terms,

Saldo,

Payment,

Interest

 

The form is built up that it gets its data from a database. The Loan, Terms and Interest rate will be entered as a default value to handle the rest of the terms, payment and saldo.

example:

loan = 1000,

terms = 12

Interest = 215

Saldo = Loan = 1000

 

The form will be filled in as an overview of payments and saldo, to check how much money still needs to be paid.

For the next entry, the term will count down 1, and I can enter a payment, example 102. Paying a payment will first influence the interest amount until it is 0. From that moment on the Saldo will go down from it's default value of a 1000. Until it is zero

 

I have managed to auto update my form entries automatically when a payment is entered, so that the Interest goes down accordingly.

 

Everytime the payment in this example should be 102. At a certain moment the interest will drop from 215 to 113 to 11. But then I am stuck.

 

Added below is a part of the code.

 

The calculation and check should be done right after // Fill in the payment and deduct it from interest as long as interest is bigger than 0. I know the code is not correct, because at its current state, it won't touch the value of Loan when interest = 0.

 

Not knowing how to catch this, the interest will just become negative.

 

Is there a way to deduct and thus update the form fields in such a matter that when the interest hits 0 the remainder of the payment will be deducted from the Saldo value and in the process keep my form fields being auto updated?

 

Thanks!

 

Mike

 

 

<?php

// Generate split between Interest bigger or equal to zero

if (!empty($loan) and $interest >= 0) {

// fill in or echo the size of the loan

if (!empty($loan)) {

echo '<input type="text" size="11" name="loan" value = '.$loan.'></div></td>';

} else {

echo '<input type="text" size="11" name="loan" value="" /></div></td>';

}

echo '<td><div align="center">';

}

// Fill in the payment and deduct it from interest as long as interest is bigger than 0.

if (!empty($interest)) {

echo '<input type="text" size="11" name="payment" onkeyup="document.forms[0].interest.value = '.$interest.'*1 - document.forms[0].payment.value*1;"></div></td> <td><div align="center"><input type="text" size="11" name="saldo" value="'.$loan.'" readonly="readonly" />';

} else {

echo '<input type="text" size="11" name="payment" value="" /></div></td>';

echo '<td><div align="center"><input type="text" size="11" name="impru_sold" />';

}

echo '</div></td><td><div align="center">';

?>

 

I stopped entering the code here, because it is quite long, and the magic should happen after  // Fill in the payment and deduct it from interest as long as interest is bigger than 0.

If more code is needed, I will be happy to enter it here.

 

Link to comment
Share on other sites

I'd start by actually viewing the source code of the page generated by your PHP, and seeing what's actually being output for the markup.

I would then load your code into Google Chrome (if you're not already), and then load the JavaScript console, and note any errors you see.

 

From there, you will likely be able to figure out your problem and resolve it.

Good luck, and come back here if you're still stuck after that.

  • Upvote 1
Link to comment
Share on other sites

  • 4 weeks later...

All, I found a nice working way.
In the time between posting my question and this answer, I started learning javascripting. Not too far yet, but it gave me some eureka moments.

The form now consists of this code, and gets its values from the database:

 

    echo '<input type="text" size="11" name="impru_acc" id="impru_acc" value = '.$impru_acc.'>';
    echo '<input type="text" size="11" name="impru_rest" id="impru_rest" onchange="calculateAll(this.value)" value = "">';
    echo '<input type="text" size="11" name="impru_sold" id="impru_sold" value = '.$impru_sold.'>';
    echo '<input type="text" size="11" name="impru_dobanda" id="impru_dobanda"  value = '.$impru_dobanda.'>'; 

 

I made a separate calculateAll.js file and call it in my header.html file.

The code consists of:

 

 function calculateAll(){
 var form = document.forms["fisa"];
 var impruDobandaValue = form.elements["impru_dobanda"];
 var impruRestValue = form.elements["impru_rest"];
 var impruSoldValue = form.elements["impru_sold"];
  
 var impruDobanda = parseInt(impruDobandaValue.value);
 var impruRest = parseInt(impruRestValue.value);
 var impruSold = parseInt(impruSoldValue.value);
 
 if (impruDobanda > 0) {
  var difference = impruDobanda - impruRest;
  } else {
   var difference = 0;
   }
  if (difference > 0) {
   impruDobanda = impruDobanda - impruRest;
   return theForm.elements["impru_dobanda"].value = impruDobanda;
   } else if (difference < 0) {
   impruSold = difference + impruSold;
   impruDobanda = 0;
   return form.elements["impru_dobanda"].value = impruDobanda,
    form.elements["impru_sold"].value = impruSold;
          
   } else if (difference == 0) {
   impruDobanda = 0;
   var impruSold = impruSold - impruRest;
   return form.elements["impru_dobanda"].value = impruDobanda,
    form.elements["impru_sold"].value = impruSold;
   }
  
  }

But I ran into a small issue. When you make a mistake, the form did not use it's original values, but recalculates from the changed values. Which is logical. To work around this, I created a reset button for the impru_rest field in the form. It resets that field and recovers the original values of the impru_sold and impru_dobanda values in the form. After that correction is possible. I thought it was best to code this in PHP

 

    <?php echo "<input type=\"button\" value=\"Reset\" onclick=\"var reset = this.form.elements['impru_rest']; reset.value = reset.defaultValue; this.form.impru_dobanda.value=".$impru_dobanda."; this.form.impru_sold.value=".$impru_sold.";\">"
    ?>

 

So all in all it took me a bit, but I wanted to share my findings with you.

Thanks for your help!

 

Mike

Link to comment
Share on other sites

Cool. I'm glad you were able to figure everything out on your own. I think that's always the best way to learn.

 

If I may though, since you're still learning JS through your own admission, there are a few things I might recommend changing.

 

For one, I wouldn't put the JS onchange event inline (i.e., within your HTML code). I would instead pull that out into the JS. For example, change your input element to the following:

 



echo '<input type="text" size="11" name="impru_rest" id="impru_rest" value = "">';


 

And then put the following in your JS:

 



document.getElementById('impru_rest').onchange = function () {
  
  calculateAll(this.value);
  
};


 

Next, the following line of code (and all similar ones in your code) will be really confusing to most JS coders and offers virtually no advantage size-wise or processing-wise to a much clearer alternative:

 



return form.elements["impru_dobanda"].value = impruDobanda,
form.elements["impru_sold"].value = impruSold;


 

With the clearer alternative being the following:

 



form.elements["impru_dobanda"].value = impruDobanda;
form.elements["impru_sold"].value = impruSold;


return form.elements["impru_sold"].value;


 

Lastly, for your issue with returning to the initial DB values when a mistake is made, there are several ways to deal with it that all relate to keep tracking of the original DB values, and then returning to those values when need be.

For example, you could add an arbitrary data attribute to your input elements like the following:

 



echo '<input type="text" size="11" name="impru_acc" id="impru_acc" data-initial-value="'.$impru_acc.'" value = '.$impru_acc.'>';


 

Then, when you need to reference that value (which will always be there and not change, even when the value attribute changes), you can simply write the following in your JS:

 



document.getElementById('impru_acc').getAttribute('data-initial-value')


 

There are those purists though that don't like to clutter up there HTML with data though, so you could just as easily echo the same value out to your JS directly as follows:

 



var impruAccInitialVal = <?= $impru_acc ?>; // <?= $impru_acc ?> is shorthand in PHP for <?php echo $impru_acc; ?>


 

It's all up to you really.

Anyway, I hope you don't take my suggestions as jabs at your code. They're just some things I noticed.

 

Also, as a last comment, I would be sure to add double quotes around the values of the value attributes in your HTML.

 

Lastly, seeing as you're from The Netherlands, is "dobanda", etc. Dutch? What do the various (non-English) things in your code mean? Just curious.

Link to comment
Share on other sites

 Share

×
×
  • Create New...