Jump to content

Need a small help in auto calculation form anyone?


lovephp

Recommended Posts

anyone here good at js?

 

im looking for a form with following fields which would auto calculate and display the total on fly.

 

 

<input type="text" name="acutalprice" value="329">Actual Price: 329
<input type="text" name="discount" value="65">Discount: 65%
<input type="text" name="shipping" value="50">Shipping: 50+

 

Total Amount: 165.15

 

on sumbit

 

Regards

Link to comment
Share on other sites

well i got what i needed but got a little issue

 

i want to add the results inside a input text field rather than <h3 id="result"></h3>? also display the results on keyup event while i input the number in other fields?

 

something like <input type="text" name="totalamount" value="results"  readonly/>

 

here my code

 

<form id="myForm">
<input id="actualprice" type="number" placeholder="Actual Price">
<input id="discount" type="number" placeholder="Discount">
<input id="shipping" type="number" placeholder="Shipping">
<input type="submit" value="Submit">
</form>
<h3 id="result"></h3>
 
 
<script>
$('#myForm').submit(function (event) {

event.preventDefault();

var actualprice = Number($("#actualprice").val().trim());
var discount = Number($("#discount").val().trim());
var shipping = Number($("#shipping").val().trim());

var discountRate = (100 - discount) / 100;
var result = (actualprice * discountRate) + shipping;

$("#result").html("Result :" + result.toFixed(2));
});
</script>
Link to comment
Share on other sites

Something like the following:  

 

 

<form id="myForm">
<input id="actualprice" type="number" placeholder="Actual Price">
<input id="discount" type="number" placeholder="Discount">
<input id="shipping" type="number" placeholder="Shipping">
<input id="total" type="text" name="totalamount" disabled="disabled" />
<input type="submit" value="Submit">
</form>
<h3 id="result"></h3>
 
 
<script>
$('#myForm>input').on('keyup', function () {
 
var actualprice = Number($("#actualprice").val().trim());
var discount = Number($("#discount").val().trim());
var shipping = Number($("#shipping").val().trim());
 
var discountRate = (100 - discount) / 100;
var result = (actualprice * discountRate) + shipping;
 
$("#total").val("Result :" + result.toFixed(2));
});
</script>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.