Change the value of dynamically created input fields using jQuery

Question

Please view the following jsfiddle;

Basically, the code allows the user to add 'lines' to an invoice. When the user selects the 'VAT Rate' of a product, I need the 'VAT Amount' and 'Gross Amount' to be calculated using jQuery. Calculating these figures is basic maths but at present I can't even get the jQuery to set any type of value in 'VAT Amount' and 'Gross Amount' never mind the correct figure!

Please help.

jQuery

// calculate VAT amount and set gross amount

$(".vat_rate").change(function () {

    alert("Handler for .change() called.");

    $(this).nextAll('input').first().val("123");

});

lshettyl · Accepted Answer · 2015-06-20 16:41:13Z

4

So, to start off, change the code in question to the following.

// calculate VAT amount and set gross amount
$(".nobord").on("change", ".vat_rate", function () {

    var $row = $(this).closest("tr");

    var $qty = $row.find("input[name^='invoice_line_quantity']");
    var $amount = $row.find("input[name^='invoice_line_amount']");
    //Value of the Qty input
    console.log($qty.val());
    //Value of the Net Amount input
    console.log($amount.val());

    //Now do your math and set the value as below

    $row.find("input[name^='invoice_line_vat_amount']").val("your_value");
    $row.find("input[name^='invoice_line_gross_amount']").val("your_value");
});

And your HTML was a bit messed up as the order of closing the TD/TR wasn't right. Take a look at the corrections I have made on this fiddle.

Hope that's a good start :)

edited Jun 20, 2015 at 16:41

answered Jun 20, 2015 at 16:31

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

I updated your fiddle https://jsfiddle.net/1kvwxmyb/9/

Just added true parameter to clone function, which causes clone element with an event handler.

Citation from jQuery documentation

.clone( [withDataAndEvents ] )

withDataAndEvents (default: false)

Type: Boolean

A Boolean indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well.

and I also add sample calculation to change function.

To get row where option was changed var $row = $(this).closest("tr"); and then you can find input with $row.find("input[name^='invoice_line_vat_amount']")

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 20, 2015 at 16:33

Jozef Dúc

9632 gold badges18 silver badges29 bronze badges

Comments

outoftime · Accepted Answer · 2015-06-20 16:42:02Z

0

One little change

// calculate VAT amount and set gross amount

$(".vat_rate").change(function (event) {

    $(event.target).parent().parent().find('td:nth-child(3) input').val('0.5');

});

answered Jun 20, 2015 at 16:42

outoftime

7638 silver badges21 bronze badges

Comments

Boris · Accepted Answer · 2015-06-20 17:11:44Z

0

Fixed, now it's works for new lines https://jsfiddle.net/1kvwxmyb/11/

js

    $(document).on('change', '.vat_rate',function () {

        var row = $(this).parent().parent().attr("id");

        var qty = $("#" + row + " td:nth-child(1) input");
        var desc = $("#" + row + " td:nth-child(2) input");
        var netam = $("#" + row + " td:nth-child(3) input");
        var vatam = $("#" + row + " td:nth-child(5) input");
        var grossam = $("#" + row + " td:nth-child(6) input");

        vatam.val("123");

        //alert("Handler for .change() called.");

        //$(this).nextAll('input').first().val("123");

    });

edited Jun 20, 2015 at 17:11

answered Jun 20, 2015 at 16:35

Boris

5515 silver badges12 bronze badges

Collectives™ on Stack Overflow

Change the value of dynamically created input fields using jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related