I have a javascript where upon click of a button a row with two cells is added to the table. One cell has a livesearch textfield and the another cell has a quantity textfield, whose value suppose to dynamically change and/or determined upon click on the livesearch textfiled results.
I have tried somethin but the challenge I am facing is that the value of the dynamically determined textfield of other rows keep retainin the value of the first row textfiled.
So I am seeking for assistance on how to clean-up the script so that each row will respond according to its respective values in the livesearch textfield
<div style="overflow-x:auto">
<table id="stockTransfer" class="table">
<thead>
<tr>
<th style="color:blue">Search Product's(Name/Code)</th>
<th style="color:blue">instore Availability</th>
<th style="color:blue">Price/Unit</th>
<th style="color:blue">Choose Selling Unit(eg:cartons/etc)</th>
<th style="color:blue">Quantity</th>
<th style="color:blue">Cummulative Price</th>
<th style="color:blue"> Delete </th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<script>
//stock transfer dynamic textboxes
$(document).ready(function() {
$(document).on('click', '.btnaddstockTransfer', function() {
var html = '';
html += '<tr>';
html += '<td><div class="search-box"><input id="stock" class="form-control is-warning stock" type="text" name="stock[]" placeholder="Search by name or code"><div class="result"></div></div></td>';
html += '<td><input class="form-control is-warning eqty" type="text" name="stockeqty[]" readonly size="2"></td>';
html += '</tr>';
$('#stockTransfer').append(html);
$(document).on('keyup input', '.search-box input[type="text"]', function() {
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if (inputVal.length) {
$.get("backend-search.php", {
term: inputVal
}).done(function(data) {
// Display the returned data in browser
resultDropdown.html(data);
});
} else {
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function() {
var stock = $(this).text();
$(this).parents(".search-box").find('.stock').val(stock);
$(this).parent(".result").empty();
var tr = $(this).parent(".search-box").parent().parent().parent();
$.ajax({
method: "get",
url: "saleqtyOnFly.php",
data: {
item: stock
},
success: function(data) {
tr.find(".eqty").val(data);
}
})
});
});
});
another text field in another td tag
...this is vague. Be specific about exactly which field you are talking about and how we should identify it, then there is no ambiguity.var stock = document.getElementsById('stock')
will cause you a problem because it looks like you can have more than one<input id="stock"
in your page. An ID must be unique. So JS will always only find and use the first item with that ID. All others are considered invalid. A few lines above that you already used$(this).parents(".search-box").find('.stock')
to find a specific "stock" input by its position...so why didn't you do that again just below? It seems you didn't really think about thatgetElementById
code carefully when you wrote it.