Multiply input values

Question

Inputs are invisible to jQuery when they are appended. THere are 3 inputs

<input class="bul-order-info__input bul-order-info__price" type="text" name="price" value="500" readonly>  
<input class="bul-order-info__input bul-order-info__qnt" type="number" name="quantity" min="1" value="1">   
<input class="bul-order-info__input bul-order-info__total" type="text" name="totalPrice" value="" readonly>

with this code

let $output = $("#output-value");  
let $price = $(".bul-order-info__price");  

$(document).on('change', ".bul-order-info__qnt", function () {
let value = parseFloat($(this).val());
$output.val(value * $price.val());
});

If I have these inputs in my html created manually, I can multiply the inputs value and add the result into the total price input.

But I need these inputs to appear after the click event, so I append them. After that they become invisible to jQuery, hence nothing works.

How can I make these inputs appear on the page, in the form, and then manipulate their values?

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Agney, Mar 05 '18 at 04:55
probably just use `type="hidden"` or for css `display: none` — A. L, Mar 05 '18 at 04:55

score 0 · Answer 1 · answered Mar 05 '18 at 05:13

Jquery can't find dynamically generated elements directly. You can access them using it's parent which is not appended dynamically.

$(document).on('change', "body .bul-order-info__qnt", function () {
    let value = parseFloat($(this).val());
    $output.val(value * $price.val());
});

score 0 · Accepted Answer · answered Mar 05 '18 at 05:28

You did only one mistake while assigning the value to the input field which displays the multiplication result

let $output = $("#output-value");  
let $price = $(".bul-order-info__price");  

$(document).on('change', ".bul-order-info__qnt", function () {
let value = parseFloat($(this).val());
let tot=value * $price.val();
$(".bul-order-info__total").val(tot);
});

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

</head>
<body>
<input class="bul-order-info__input bul-order-info__price" type="text" name="price" value="500" readonly>  
<input class="bul-order-info__input bul-order-info__qnt" type="number" name="quantity" min="1" value="1">   
<input class="bul-order-info__input bul-order-info__total" type="text" name="totalPrice" value="" readonly> 
</body>
</html>

Multiply input values

2 Answers2