how to change value of dynamically created input elements javascript/jquery

Question

I am creating a form that generates sales items dynamically, i can already call a function in javascript from that dynamically created elements but as a value is changed I need to change other values.

Apparently, I cannot set value of dynamically created input

What I've done so far, this is where the dynamic field is created

<table id="myTable" class="table table-bordered">
<thead>
    <tr>
        <th>Supplier</th>
        <th>Stock Item</th>
        <th>Quantity</th>
        <th>Sales Price</th>
        <th>Total</th>
        <th>Action</th>
    </tr>
</thead>
<tbody>
<tr>
    <td>
        <select name="Supplier_Number[]" class="form-control " id="Supplier_Number">
<option value="" selected="selected">Select</option>
<option value="Supplier-00006">test test 3</option>
<option value="Supplier-0005">test test</option>
<option value="Supplier-000007">test test 5</option>
</select>
    </td>
    <td>
        <select name="Stock_Number[]" class="form-control " id="Stock_Number" onchange="getStockData(event, 1);">
<option value="" selected="selected">Select</option>
<option value="Stock-00001">test 1</option>
<option value="Stock-00002">test</option>
<option value="Stock-000013">another test</option>
<option value="Stock-000014">another test 2</option>
</select>
    </td>
    <td>
        <input type="text" name="Quantity[]" id="Quantity1" onchange="getTotal(1)">
    </td>
    <td>
        <input type="text" name="Sales_Price[]" id="Sales_Price1">

        <input type="hidden" name="Purchase_Price[]" id="Purchase_Price1">
    </td>
    <td>
        <input type="text" name="Total[]" id="Total1">

    </td>
</tr>
</tbody>
</table>

This is how the dynamic elements looks

<tr>
<td>
    <select name="Supplier_Number[]" class="form-control " id="Supplier_Number2">
<option value="" selected="selected">Select</option>
<option value="Supplier-00006">test test 3</option>
<option value="Supplier-0005">test test</option>
<option value="Supplier-000007">test test 5</option>
</select>
</td>
<td>
    <select name="Stock_Number[]" class="form-control " id="Stock_Number2" onchange="getStockData(event,2);getTotal();">
<option value="" selected="selected">Select</option>
<option value="Stock-00001">test 1</option>
<option value="Stock-00002">test</option>
<option value="Stock-000013">another test</option>
<option value="Stock-000014">another test 2</option>
</select>
</td>
<td>
    <input type="text" name="Quantity[]" class="Quantity2" onchange="getTotal(2)">
</td>
<td>
    <input type="text" name="Sales_Price[]" class="Sales_Price2">

    <input type="hidden" name="Purchase_Price[]" class="Purchase_Price2">
</td>
<td>
    <input type="text" name="Total[]" class="Total2">

</td>
<td><input type="button" value="Delete"></td>
</tr>

This is how I am trying to change dynamic element value

var sales_price = 'Sales_Price'+count;
var Total = 'Total'+count;
var Purchase_Price = 'Purchase_Price'+count;
var Quantity = 'Quantity'+count;
$('#'+sales_price).prop('value', 'something');
$('#'+Total).prop('value', '0');
$('#'+Quantity).prop('value', '0');
$('#'+Purchase_Price).prop('value', 'something');

Problem:

The dynamic elements value cannot be set. Any help will be appreciated.

no not working. the input are dynamically added, so i have to add some data to that input on change of some value on previous select option — Regolith
– Regolith, Commented Jul 27, 2018 at 4:39

Ahmed Yousif · Accepted Answer · 2018-08-24 02:10:40Z

1

your dynamic created inputs dosen't have id attribute I think you assign it to class accidentally

then you can use this code to change inputs values after fix id's issue

var i = 1 //this is the index of added item

  $('#sales_price'+String(i)).val( 'something');
  $('#Total'+String(i)).val('0');
  $('#Quantity'+String(i)).val( '0');
  $('#Purchase_Price'+String(i)).val( 'something');

edited Aug 24, 2018 at 2:10

answered Jul 25, 2018 at 10:17

Ahmed Yousif

2,3481 gold badge13 silver badges17 bronze badges

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

4 Comments

Ahmed Yousif Over a year ago

you have to edit your elements id to match selectors e.g. "sales_price1","Total1","Quantity1","Purchase_Price1" and so on for every row

Regolith Over a year ago

please read the question again, I have edited the question and is still not working

Ahmed Yousif Over a year ago

you dynamic created inputs dosen't have id attribute <input type="text" name="Quantity[]" class="Quantity2" onchange="getTotal(2)"> I think you assign it to class accidentally

Regolith Over a year ago

that was a silly mistake, can you update your answer pointing the problem so I can make your answer correct

Collectives™ on Stack Overflow

how to change value of dynamically created input elements javascript/jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related