Develop Reference

Changing the value of multiple inputs [duplicate]

This question already has answers here:
jQuery change input text value
(6 answers)
Closed 3 years ago.
Sorry for the simple question. I have a form with multiple input fields.
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>
I want to change the value of all class=amount inputs to 10. I've tried the following simple script but it doesn't seem to be working?
$(".amount").each(function(){
this.value = '10';
})

If you really just want to change the value of all .amount, no need to iterate them.
$(".amount").val(10)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>

Change your jQuery code to the following:
$(".amount").val(100);

$('.amount').val(10);
OR
$('.amount').each(function(index,element) {
element.value = 10;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
<tr>
<td><input type="number" name="amount[]" class="amount" value="0"></td>
<td><input type="text" name="name[]" class="name"></td>
</tr>
</table>

Copying TD value to dynamically created input inside a TD

I have a table with dynamically generated td's that contain text inputs and I need to get the value from the first td in the row and insert into one of the inputs depending on what I select in a <select>. This is trigger by a button.
So far I'm able to get the the value I need with first-child and from my select I have the value of the option same as the class of the inputs.
$("#t_a").click(function() {
var selected = $('select[name=t_r]').val();
$("table tr").each(function() {
var s = $(this).find('td:first-child').html();
$(this).find('.' + selected).attr("value", s);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="t_r" name="t_r" style="width:200px;">
<option value="1234">Option 1234</option>
<option value="1235">Option 1235</option>
<option value="1236">Option 1236</option>
</select>
<input type="button" name="t_a" id="t_a" value="Apply" />
<table>
<tr>
<td>123</td>
<td><input type="text" id="a_1234" class="1234" value=""></td>
<td><input type="text" id="a_1235" class="1235" value=""></td>
<td><input type="text" id="a_1236" class="1236" value=""></td>
</tr>
<tr>
<td>321</td>
<td><input type="text" id="b_1234" class="1234" value=""></td>
<td><input type="text" id="b_1235" class="1235" value=""></td>
<td><input type="text" id="b_1236" class="1236" value=""></td>
</tr>
<tr>
<td>456</td>
<td><input type="text" id="c_1234" class="1234" value=""></td>
<td><input type="text" id="c_1235" class="1235" value=""></td>
<td><input type="text" id="c_1236" class="1236" value=""></td>
</tr>
</table>

With the help of monkawitz and user7290573 I was able to solve my problem by using val() instead of attr().
Thank you Tim Lewis for the guidance.

How to search by filter in a table with rowspan

I need to search all my table and display the corresponding line.
I can not display the result of the search correctly when the search is on the first column, this column contains a rowspan. Instead of displaying the 2 or 3 corresponding lines, it's just the first one displayed
Input search
<div>
<input id="searchInput" type="text" placeholder="Search.."
</div>
a table
<table border="1" id="mytable">
<thead>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
<th>Item4</th>
<th>Item5</th>
<th>Item6</th>
<th>Item7</th>
<th>Item8</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td rowspan='1'>D20180910</td>
<td>10910</td>
<td>W1</td>
<td><input type="text" value="2018-09-11 07:36:32" id="iddb_164" ></td>
<td><input type="text" value="2018-09-11 18:47:00" id="iddb_320" ></td>
<td><input type="text" value="2018-09-11 20:28:54" id="iddb_166" ></td>
<td><input type="text" value="2018-09-13 11:40:00" id="iddb_318" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='2'>D20180905</td>
<td>10905</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_147" ></td>
<td><input type="text" value="2018-09-06 12:00:00" id="iddb_324" ></td>
<td><input type="text" value="2018-09-06 12:42:04" id="iddb_152" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>10905</td>
<td>W1</td>
<td><input type="text" value="2018-09-06 08:14:48" id="iddb_146" ></td>
<td><input type="text" value="2018-09-06 11:59:00" id="iddb_325" ></td>
<td><input type="text" value="2018-09-06 12:41:58" id="iddb_150" ></td>
<td><input type="text" value="2018-09-10 08:21:00" id="iddb_321" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td rowspan='3'>D20180905</td>
<td>20105</td><td>T2</td>
<td><input type="text" value="2018-09-06 08:14:52" id="iddb_112" ></td>
<td><input type="text" value="2018-09-01 12:12:00" id="iddb_753" ></td>
<td><input type="text" value="2018-10-06 12:50:04" id="iddb_725" ></td>
<td><input type="text" value="" id="iddb_" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>w1</td>
<td><input type="text" value="" id="iddb_146" ></td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_412" ></td>
<td><input type="text" value="2018--07 13:21:58" id="iddb_356" ></td>
<td><input type="text" value="2018-07-10 09:51:00" id="iddb_741" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
<tr>
<td>20105</td>
<td>F4</td>
<td><input type="text" value="2018-07-06 10:00:00" id="iddb_174" ></td>
<td><input type="text" value="" id="iddb_925" ></td>
<td><input type="text" value="" id="iddb_825" ></td>
<td><input type="text" value="2018-08-15 09:51:00" id="iddb_124" ></td>
<td><button type='button' disabled >Delete</button></td>
</tr>
</tbody>
</table>
A javascript code
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#mytable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

Re-Using JavaScript Function

Creating a cake ordering form, and the # of cakes available can vary from month to month. I am attempting to tweak a JS function created from #Anderson Contreira but in my fiddle it does not work. Here is what I have thus far - Why does nothing change when I enter a quantity?
https://jsfiddle.net/2uack1w6/
Syntax
JS
function calculate(el){
var quantity = el.val();
var id = el.attr("id").replace("item_","").replace("_qty","");
var data = {quantity: quantity,id:id};
var targetTax = $("#item_"+id+"_tax");
var targetTotalPrice = $("#item_"+id+"_totalprice");
$.post($.post(window.alert("It's been one or two or three entered");
});
}
var qty = $("#item_1_qty");
var qty1 = $("#item_2_qty");
var qty2 = $("#item_3_qty");
qty.on("keyup",function(){
window.alert("It's been one or two or three entered");
});
HTML/PHP
<body>
<form id="Form1" runat="server">
<div id="Form1" runat="server">
<table id="table1" border="1">
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
<th>Tax</th>
<th>Total</th>
</tr>
<tr>
<td><label for="lblChoccake">Choc Cake</label></td>
<td><label for="lblitem1price">$25.00</label></td>
<td><input type="text" id="item_1_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
<td><input type ="text" id="item_1_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
<td><input type="text" id="item_1_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
</tr>
<tr>
<td><label for="lblLemonFudgecake">Lemon Fudge Cake</label></td>
<td><label for="lblitem2price">$15.00</label></td>
<td><input type="text" id="item_2_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
<td><input type ="text" id="item_2_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
<td><input type="text" id="item_2_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
</tr>
<tr>
<td><label for="lblCoconut">Coconut Cake</label></td>
<td><label for="lblitem3price">$35.00</label></td>
<td><input type="text" id="item_3_qty" name="txtitem1qty" value="0" maxlength="10" size="3"></td>
<td><input type ="text" id="item_3_tax" name="txtitem1tax" maxlength="10" size="3" readonly></td>
<td><input type="text" id="item_3_totalprice" name="txtitem1totalprice" maxlength="10" size="3" readonly></td>
</tr>
</table>
</div>
</form>
</body>

jQuery(function($) {
var qty = $("#item_1_qty");
var qty1 = $("#item_2_qty");
var qty2 = $("#item_3_qty");
qty.on("keyup",function(){
alert("It's been one or two or three entered");
});
});
Try this, you are assigning variables before the document has actually loaded.

Take a look here: https://jsfiddle.net/andersoncontreira/mtu6syby/1/
You can make some changes and will work well:
Add a class in each input of item_?_qty e.g.: <input type="text" id="item_1_qty" class="item_qty" />
In your javascript, you can leave the call generic:
jQuery(document).ready(function(){
//you can use a class for help you
$(".item_qty").on("keyup",function(){
//window.alert("It's been one or two or three entered");
calculate($(this));
});
});

Update total in table row with jquery

I have a table
<table>
<tbody>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
<tr>
<td><input type="text" name="quantity" /></td>
<td><input type="text" name="price" /></td>
<td><input type="text" name="total" disabled />
</tr>
</tbody>
</table>
How can I update the total input field when a change in quantity or price happens?
I have thought of something like
$('table tbody tr td').filter(':nth-child(1), :nth-child(2)').children('input').change(function() {
$(this).parent('td').siblings('td').filter(':nth-child(3)').val(?);
});
but it seems a bit unhandy.

You can use:
$('table tbody tr td').find('input').keyup(function() {
var total=0;
total=(parseInt($(this).parent('td').siblings('td').not(':nth-child(3)').find('input').val())||0)+(parseInt($(this).val())||0);
$(this).closest('tr').find('input:last').val(total)
});
Working Demo

Much easy to read and control if you can assign some dummy class to quantity, price and total input.
Something like this:
HTML
<table>
<tbody>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
<tr>
<td><input type="text" class="qty" name="quantity" /></td>
<td><input type="text" class="prc" name="price" /></td>
<td><input type="text" class="total" name="total" disabled />
</tr>
</tbody>
</table>
Script
$('table tbody tr').find('.qty, .prc').on('keyup',function() {
var parent = $(this).parents('tr');
var quantity = parseInt(parent.find('.qty').val())||0;
var price = parseInt(parent.find('.prc').val())||0;
parent.find('.total').val(quantity*price);
});
Check working example here

Personally, i prefer not to select elements by their position. If you wind up changing them later, or adding another your code is broken.
I would do something like:
$(this).closest('tr').find('input[name=total]').val(?);