Update form prior to submission

[tHud]

Hello

 

I have a standard HTML submitting to a MySQL database (via PHP)

 

The user has to enter values such as discount / various different tax rates etc.

 

It would be nice for totals/ sub totals etc to be automatically filled in for the user prior to submission.

 

Would either javascript or ajax could accomplish this?

 

(I'm not familiar with either, so if this is the case, do you know if such a script is available?)

Happy to pay for it

[tHud]

Whoops

Incredibly, after all the searching I've done - I find the answer just 45 mins after posting 

 

I think I need something like this...

 

<input type="text" id="ans" onfocus="document.getElementById('ans').value=document.getElementById('field1').value*document.getElementById('field2').value" >

 

If however, anyone does have a better idea - I'd love to hear it - thanks

[tHud]

ok - here's an update

 

Although this type of script works very well (up to a point)...

 

It does depend upon the user actually clicking on the final field for the calculations to happen.

 

I can definitely see a user entering so much data - then hitting return.

 

Would Ajax resolve this issue?

 

 

Just to clarify...

 

Entering data (amount, tax etc)

 

AUTOMATICALLY updates the next field - is it even possible?

 

Thanks.

 

 

[Omirion]

If unless you need some kind of constant prices to be checked you don't need ajax.

 

You can assign an event handler to fire up when a user click away from the a field.

 

Please if you are unable to code it yourself post your Form code here and explain what you need to be done so i may type up a code for you.

[tHud]

Hi Omirion,

That's a very kind offer.

 

<form action="" method="post">
<input type="hidden" name="creditRecordAdded" value="25">

Order Date - <input type="text" name="credit_order_date" size="30"><br>
Order Number - <input type="text" name="credit_order_num" size="30"><br>
Billing Info - <textarea name="credit_bill_info" cols="40" rows="5"></textarea><br>
Amount - <input type="text" name="credit_amount" id="amount" size="30"><br>
Discount - <input type="text" name="credit_discount" id="discount" size="30"><br>
VAT - <input type="text" name="credit_vat" id="vat" size="30" value="17.5"><br>

Total - <input type="text" name="credit_total" id="total" size="30"   onfocus="document.getElementById('total').value = 
(document.getElementById('amount').value - (document.getElementById('amount').value * (document.getElementById('discount').value/100))) *
(1+(document.getElementById('vat').value/100))"><br>

Invoice Date - <input type="text" name="credit_inv_date" size="30"><br>
Invoice Number - <input type="text" name="credit_inv_no" size="30"><br>
Paid Date - <input type="text" name="credit_paid_date" size="30"><br>
Contact - <input type="text" name="credit_contact" size="30"><br>
Contact Number - <input type="text" name="credit_contact_num" size="30"><br>
Contacted On - <input type="text" name="credit_contacted" size="30"><br>
Notes - <textarea name="credit_notes" cols="40" rows="5"></textarea><br>

<input type="submit" value="Add a new credit record">

</form>

 

Essentially, the 'total' field calculates a value depending on the 'amount', 'discount' and 'vat' fields.

 

Many thanks

[DavidAM]

Instead of onFocus (which happens when the user enters the field), I would use onBlur (which happens when the user leaves the field). Put the calculation in an onBlur event for Amount, Discount, and VAT.  Then, as they leave the field, the Total is re-calcuated.  When the user clicks the Submit button, they effectively leave the field they are in, so the calculation will be done before the form is submitted:

 

<SCRIPT> function reCalcTotal() {
  document.getElementById('total').value =
    (document.getElementById('amount').value - 
    (document.getElementById('amount').value * 
    (document.getElementById('discount').value/100))) *
    (1+(document.getElementById('vat').value/100))
</SCRIPT> 

...

Amount - <input type="text" name="credit_amount" id="amount" size="30" onBlur="reCalcTotal()"><br>
Discount - <input type="text" name="credit_discount" id="discount" size="30" onBlur="reCalcTotal()"><br>
VAT - <input type="text" name="credit_vat" id="vat" size="30" value="17.5" onBlur="reCalcTotal()"><br>

Total - <input type="text" name="credit_total" id="total" size="30"><br>

 

It is nice to do this so the user can see the total, but you MUST calculate it for yourself on the server. It would be very easy to submit the form with total = 0.01 so I get it for a penny.

 

[Omirion]

DavidAM 's solution works to. Here's my take.

 

JS code.

 

function updateTotal() {
            var algorithm = document.getElementById('amount').value - (document.getElementById('amount').value * (document.getElementById('discount').value / 100)) * (1 + (document.getElementById('vat').value / 100));
            document.getElementById('total').value = algorithm;
        }

 

If you need to change the calculation just change the algorithm var.

 

The just add onSubmit in the form declaration like so.

<form action="" method="post" onsubmit="updateTotal()">

 

Now what onSubmit does is verify all you fields and then send your request.

 

Mind you your code has no validation. So at the moment it just acts like a pre-send function.

If and when you decide to add validation to your form just replace or update the updateTotal() function.

 

If you decide to make a new validation function don't forget to include the updateTotal() one in you validation.

function checkForm(){
check this
check that
if (everything == OK){
updateTotal();
return true;
}
}

 

Hope this helps.

[tHud]

This looks exactly what I want, but....

 

as a complete idiot - I don't know how to implement it.

 

I have the fields adjusted, so...

 

<tr><td>Amount</td><td><input type="text" name="credit_amount" id="amount" size="30" onBlur="reCalcTotal()"></td></tr>
<tr><td>Discount</td><td><input type="text" name="credit_discount" id="discount" size="30" onBlur="reCalcTotal()"></td></tr>
<tr><td>VAT</td><td><input type="text" name="credit_vat" id="vat" size="30" value="17.5" onBlur="reCalcTotal()"></td></tr>

<tr><td>Total</td><td><input type="text" name="credit_total" id="total" size="30"></td></tr>

 

However, I tried adding the...

 

<SCRIPT> function reCalcTotal() {
  document.getElementById('total').value =
    (document.getElementById('amount').value -
    (document.getElementById('amount').value *
    (document.getElementById('discount').value/100))) *
    (1+(document.getElementById('vat').value/100))
</SCRIPT> 

 

Above, below  and in the <header> area.

No luck

 

Can you please advise?

 

[Omirion]

If you deicde to go with David's method. Add this between your head tags.

<script type="text/javascript">
function reCalcTotal() {
  document.getElementById('total').value =
    (document.getElementById('amount').value -
    (document.getElementById('amount').value *
    (document.getElementById('discount').value/100))) *
    (1+(document.getElementById('vat').value/100))
</script>

 

If you are interested in learning JS this is a really nice beginners tutorial.

http://www.tizag.com/javascriptT/

[tHud]

You guys have been such a great help.

Many many thanks from a grateful noob!