Link to home
Start Free TrialLog in
Avatar of erikTsomik
erikTsomikFlag for United States of America

asked on

Jquery form

I am trying to create a dynamic form for the payment plan installments.

For example, the total is $700 and I have chosen 10 installments. so it will be $70 per   installment. Let say the client wan to pay 100 for the first installment so the first installment will be 100 and the rest is $66.67 and so on.Also the when making changes  it should only affect the row going forward.

http://jsfiddle.net/uxmm2gta/6/
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Some things
1. Where do you set the installments and number of payments - can we assume the form has this value somewhere?
2. You have given your inputs all the same name - this might cause problems on the receiving end if your script is unable to process the raw input.

Having said that - assuming that the amount is 700 as in your example and there are 8 installments as per your fiddle then you could do something like this
HTML
<form>
Qty1 :
<input type="text" name="installment[]" class="installment" id="qty2" />
<br> Qty2 :
<input type="text" name="installment[]" class="installment" id="qty3" />
<br> Qty3 :
<input type="text" name="installment[]" class="installment" id="qty4" />
<br> Qty4 :
<input type="text" name="installment[]" class="installment" id="qty5" />
<br> Qty5 :
<input type="text" name="installment[]" class="installment" id="qty6" />
<br> Qty6 :
<input type="text" name="installment[]" class="installment" id="qty7" />
<br> Qty7 :
<input type="text" name="installment[]" class="installment" id="qty8" />
<br> Qty8 :
<input type="text" name="installment[]" class="installment" id="qty9" />
<br>
<br>
<br> Total :
<input type="text" name="total" id="total" />
</form>

Open in new window

jQuery
<script>
var total = 700.0;
$(function() {
  var inpts = $('.installment');
  inpts.val(total / inpts.length);
  $('#total').val(total);
  $('.installment').change(function() {
    var sum = 0;
    var installment = 0;
    for(var i = 0; i < inpts.length; i++) {
      if (installment !== 0) {
        inpts[i].value = installment;
        sum += installment;
      }
      else {
        sum += parseFloat(inpts[i].value);
        if (inpts[i] == this) {
          installment = (total - sum) / (inpts.length - i - 1);
        }
      }
    }

    $('#total').val(sum);
  });
});
</script>

Open in new window

Working sample here

If you need the total and installments to be dynamic let us know more about how those would be selected.
Avatar of erikTsomik

ASKER

How would I put a 0 instead of negative numbers in the field. If the total sum of payments exceed pre-determined total. Also can we round number to 2 decimal points

The total and number of installments is predetermined.

However, I would like to add an ability  to add or subtract the number of payments on the fly using the  jquery  and still keep the calculation going
However, I would like to add an ability  to add or subtract the number of payments on the fly using the  jquery  and still keep the calculation going
How is that different from what the code above does?

To make it 2 decimal places replace line 12 with
inpts[i].value = installment.toFixed(2);

Open in new window

What i need is the button Add when I click on it it will automatically add another installment to the form <input type="text" name="installment[]" class="installment" id="whatEverID needed" /> t
So add's a new control and then updates the repayments? From the start or from the last repayment entered?
from the last of the repayment. I would like to have an ability to click on the button and dynamically add as many repayment options
Yes I understand but how do you want the calculation of repayments to work into this - do you click the Add before capturing data, or after filling a few? Each new input that is added changes the repayments - I just need to know how adding the input should affect the repayment values.

Assume there are 7 boxes and you have filled in 30, 100, 70 for the first 3 leaving 4 boxes to pay the remaining 500 = 125 per box.
When you add the 8th box do all boxes automatically go to 87.50.
I want it to be added after filling a few. For example, I have the last payment for $100 but can only pay $50. So I will add %50 and a new repayment option with $50 left over
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial