CODEWITHSUNDEEP
phpjqueryhtmlajaxmysqli
Utam Sharma
Utam Sharma

Reputation: 77

How to implement dependent input fields Jquery?

I'm building a invoice system where item name and price retrieved from database . Price is dependent on item name .

Now i have to do this . 

Price: <Input type="text" id="price" name="price" />
Qty : <Input type="text" id="qty" name="qty" />
Tax : <Input type="text" id="tax" name="tax" />
Discount : <Input type="text" id="disc" name="disc" />
Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>

I want to autofill total input field without reloading with this following formula 

<?Php 
$total = $price * $qty + $tax - $disc;
?>

Upvotes: 2

Views: 1629

Answers (5)

asiby
asiby

Reputation: 3389

Or you could use the jQuery plugin called DependsOn at https://dstreet.github.io/dependsOn/

It probably came out around the same time when this question was posted. But it does the job in a clean way. And it's not the only library out there doing this.

Upvotes: 0

Muhammad Akber Khan
Muhammad Akber Khan

Reputation: 757

need to assign class in your html, and some jquery script,

//Assign Amount class in your 4 html fields

    Price: <Input type="text" id="price" name="price" class="amount" />
    Qty : <Input type="text" id="qty" name="qty" class="amount"/>
    Tax : <Input type="text" id="tax" name="tax" class="amount"/>
    Discount : <Input type="text" id="disc" name="disc" class="amount"/>
    Total : <Input type="text" id="total" name="total"  value=" echo $total;"/>

    $( document ).ready(function() {
        $('input.amount').keyup(function(){   
        var price = $("#price").val();
        var qty = $("#qty").val();
        var tax = $("#tax").val();
        var disc = $("#disc").val();
        var total = $("#total").val();
        total = ((parseFloat(price) * parseFloat(qty) + parseFloat(tax) - parseFloat(disc);
        $("#total").val(parseFloat(total));
       });
    });

Upvotes: 5

CCoder
CCoder

Reputation: 171

It should be as,

  $( document ).ready(function() {
    $('input.amount').keyup(function(){   
    var price = $("#price").val();
    var qty = $("#qty").val();
    var tax = $("#tax").val();
    var disc = $("#disc").val();
    var total = $("#total").val();
      var total = (parseFloat(price) * parseFloat(qty)) + (parseFloat(tax) - parseFloat(disc));
    $("#total").val(parseFloat(total));
   });
});

Upvotes: 2

Agung Kessawa
Agung Kessawa

Reputation: 563

you can use jquery to do the math, but you need ajax to load the data from your database.

once all your data about specific product loaded, you can use this jquery code below

<script>
    $("#qty, #disc").change(function(){
        $("#total").val( $("#price").val() * $("#qty").val() + $("#tax").val() - $("#disc").val() )
    });
</script>

Upvotes: 1

Camilo Go Jr.
Camilo Go Jr.

Reputation: 3234

Price: <Input type="text" class="changing" id="price" name="price" />
Qty : <Input type="text" class="changing" id="qty" name="qty" />
Tax : <Input type="text" class="changing" id="tax" name="tax" />
Discount : <Input type="text" class="changing" id="disc" name="disc" />

$('input[class^=changing]').on('change', function() {
var total = $('#price').val() * $('#qty').val() + $('#tax').val() - $('#disc').val();
$('#total').val(total);

});

You can use Jquery to watch changes in fields like price,qty,tax and discount and change the total value everytime it changes

Upvotes: 1

Related Questions