-2

anyone here good at js?

im looking for a form with following fields which would auto calculate and display the total on fly when i inpot the numbers in side the fields.

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

Total Amount: 165.15

on sumbit should get the total amount output

Regards

Seeker
  • 47
  • 7
  • What have you tried so far? You should at least attempt writing some javascript/jquery code. You can experiment using [fiddle](https://jsfiddle.net/) or [codepen](http://codepen.io/). – Yass Feb 03 '16 at 20:51
  • i do not know js else i sure would have given a try. would really appreciate if could help me out. – Seeker Feb 03 '16 at 20:55

1 Answers1

0

First things first, add jQuery library to <head></head> part of your page. You should use jQuery download page or Google's Hosted Libraries page to find jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Then, you should put <input> elements into <form></form> element and add submit button for the form.

<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>

Finally, add script to the page for submitting the form.

<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>

Good luck.

serifsadi
  • 603
  • 7
  • 21
  • thanks you sooo much i really am thankful. need a little another bit of help on submit how do i get the results to print out on page so that i could store the form values as well as the total amount to database? – Seeker Feb 03 '16 at 21:55
  • @Seeker i'm edit the answer, check this out now.. – serifsadi Feb 03 '16 at 22:15
  • you are great thanking you soo very much, – Seeker Feb 03 '16 at 22:17
  • 1
    you do NOT need to load the entire jQuery library for this - simple javascript will do the job without requiring jQuery. It is a simple javasript calculation on the submit of the form. – gavgrif Feb 03 '16 at 23:17
  • how to add the results inside a input text field rather than

    ? also display the results on keyup event?     – Seeker Feb 04 '16 at 07:25