Develop Reference

How can I get selected row using jQuery?

This is my table row within the tbody of my table. I get dropdown value, text value but I can't get selected row value. My row value returns "undefined".
$(document).on("click", "#skorKartDegerle", function() {
$("#modal_evaluation").modal("show");
});
$(document).on("click", "#btnKaydet", function() {
var arrList = [];
var isEmptyAnswer = false;
$("#evaluationTable > tbody > tr").each(function() {
var line = $(this).find(".answerLine").val();
var ddlVal = $(this).find(".answerddl").val();
var txtVal = $(this).find(".answertxt").val();
var obj = '{"line":"' + line + '","ddlVal":"' + ddlVal + '","txtVal":"' + txtVal + '"}';
arrList.push(obj);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="answerLine" value="2">
<td>FR002</td>
<td>Koton Mağazacılık</td>
<td>1800</td>
<td>A</td>
<td>Kabul</td>
<td class="select" value="0">
<select class="answerddl">
<option value="1">Kabul</option>
<option value="2">Ret</option>
</select>
</td>
<td><input type="text" class="answertxt"></td>
</tr>
</tbody>
</table>

Part of the issue is because tr elements do not have a value attribute. To do what you require you could use a data attribute instead, to store custom metadata on the element. The other part is that this is a reference to the tr element. You're then calling find() on the element you're looking to target, so it will not be found as that method looks for descendants only.
In addition it's worth noting that you can make the logic more succinct by using map() to build the array instead of explicitly looping with each() and also that it would be better practice to store objects in the array and only JSON encode it before transferring via AJAX.
$(document).on("click", "#btnKaydet", function() {
var isEmptyAnswer = false;
let arrList = $("#evaluationTable > tbody > tr").map((i, tr) => {
let $tr = $(tr);
return {
line: $tr.data('value'),
ddlVal: $tr.find(".answerddl").val(),
txtVal: $tr.find(".answertxt").val()
}
}).get();
console.log(arrList);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="evaluationTable">
<tbody>
<tr class="answerLine" data-value="2">
<td>FR002</td>
<td>Koton Mağazacılık</td>
<td>1800</td>
<td>A</td>
<td>Kabul</td>
<td class="select" value="0">
<select class="answerddl">
<option value="1">Kabul</option>
<option value="2">Ret</option>
</select>
</td>
<td><input type="text" class="answertxt"></td>
</tr>
</tbody>
</table>
<button id="btnKaydet">Click me</button>

How to get values of dynamically created input fields (Json)

input fields are created via jquery depend on user input
If user type Quantity : 5 then i m created 5 input fields
for example if user give Quantity = 3 then this is how the html created dynamically using Jquery
<tr id = "tr_1">
<td><input type="text" name="cont_no1" id="cont_no1" /><td>
<td><input type="text" name="cont_size1" id="cont_size1" /><td>
<td><input type="text" name="cont_type1" id="cont_type1" /><td>
</tr>
<tr id = "tr_2">
<td><input type="text" name="cont_no2" id="cont_no1" /><td>
<td><input type="text" name="cont_size2" id="cont_size2" /><td>
<td><input type="text" name="cont_type2" id="cont_type2" /><td>
</tr>
<tr id = "tr_3">
<td><input type="text" name="cont_no3" id="cont_no3" /><td>
<td><input type="text" name="cont_size3" id="cont_size3" /><td>
<td><input type="text" name="cont_type3" id="cont_type3" /><td>
</tr>
now i need to store all this input fields values in json.
var jsonObj= jsonObj || [];
for(var i=1; i<cont_qty; i++)
{
item = {};
item ["cont_no"] = $('#cont_no'+i).val();
item ["cont_size"] = $('#cont_size'+i).val();
item ["cont_type"] = $('#cont_type'+i).val();
jsonObj.push(item);
}
i tried like this but its not working the please someone help me. ThankYou
for your refrence here is full code, var auto_tr value is aligned here(with enter) for your purpose .
$(document).ready(function(){
$( "#cont_qty" ).change(function()
{
var itemCount = 0;
$("#munna").empty();
var cont_qty = this.value;
for(var i=0 ; cont_qty>i; i++)
{
itemCount++;
// dynamically create rows in the table
var auto_tr = '<tr id="tr'+itemCount+'">
<td>
<input class="input-medium" type="text" id="cont_no'+itemCount+'" name="cont_no'+itemCount+'" value="">
</td>
<td>
<select class="input-mini" name="cont_size'+itemCount+'" id="cont_size'+itemCount+'">
<option>20</option>
<option>40</option>
<option>45</option>
</select>
</td>
<td>
<select class="input-mini" name="cont_type'+itemCount+'" id="cont_type'+itemCount+'">
<option>DV</option>
<option>HD</option>
<option>HC</option>
<option>OT</option>
<option>FR</option>
<option>HT</option>
<option>RF</option>
</select>
</td>
<td>
<select class="input-medium" name="cont_tonnage'+itemCount+'" id="cont_tonnage'+itemCount+'">
<option>24000 Kgs</option>
<option>27000 Kgs</option>
<option>30480 Kgs</option>
<option>Super Heavy Duty</option>
</select>
</td>
<td>
<input class="input-medium" type="text" id="cont_tare'+itemCount+'" name="cont_tare'+itemCount+'" value="">
</td>
<td>
<input class="input-medium" name="cont_netweight'+itemCount+'" id="cont_netweight'+itemCount+'" type="text" value="">
</td>
<td>
<input class="input-mini" name="yom'+itemCount+'" id="yom'+itemCount+'" type="text" value=""></td>
<td>
<select class="input-medium" name="cont_condition'+itemCount+'" id="cont_condition'+itemCount+'">
<option>IICL</option>
<option>ASIS</option>
<option>CARGO WORTHY</option>
</select>
</td>
</tr>';
$("#munna").append(auto_tr);
}
});
$("#getButtonValue").click(function ()
{
var jsonObj= jsonObj || [];
for(var i=1; i<cont_qty.value; i++)
{
item = {};
item ["cont_no"] = $('#cont_no'+i).val();
item ["cont_size"] = $('#cont_size'+i).val();
item ["cont_type"] = $('#cont_type'+i).val();
jsonObj.push(item);
}
alert(jsonObj[0].cont_no[1]);
});
});

did small loop mistake :)
for(var i=1; i<=cont_qty.value; i++)
{
alert(cont_qty.value);
item = {};
item ["cont_no"] = $('#cont_no'+i).val();
item ["cont_size"] = $('#cont_size'+i).val();
item ["cont_type"] = $('#cont_type'+i).val();
jsonObj.push(item);
}
in previous one i<cont_qty.value this one used now just changed as i<=cont_qty.value
so the loop ran 3 times when qty is 4. now just added <=
ThankYou for your answers friends

Make sure you call your function after you created the html via jquery.
createHtml(); // function to create the html
storeValuesToArray(); // Your function to store data to array
Also make sure you properly close your tags <tr></tr>. And put <tr> inside a <table> tag.
And make sure your cont_qty is set to a value

After you created the html and added all the fields necessary, you can catch all elements by using a selector like:
var jsonObj= jsonObj || [];
$('[name^="cont_no"]').each(function(){
var i = this.name.split('cont_no')[1];
var item = {};
item['cont_no'] = $(this).val();
item['cont_size'] = $('[name="cont_size'+i+'"]').val();
item['cont_type'] = $('[name="cont_type'+i+'"]').val();
jsonObj.push(item);
});

Adding the values in multiple textboxes to a single textbox in php

I've a form which contains a div inside which contains a two textboxes one for service type and another for amount and an add more button. When i click on add more button. The div will get duplicated per onclick. Now I want the values in each amount textbox to be summed up and should be shown in another textbox total. I've created a JS function to show the value entered in amount textbox on onkeyup. But I didn't got any answer.
Here is the code what I've tried so far..
HTML
<table>
<tr id="service">
<td>
<span>Service Type:</span>
</td>
<td>
<input type="text" name="servicetype" id="servicetype" />
</td>
<td>
<span>Amount:</span>
</td>
<td>
<input type="text" name="amount" id="amount" onkeyup="onkeyupsum()"/>
</td>
</tr>
<tr>
<td>
<input type="button" id="addmore" onclick="duplicate()" value="Add More"/>
</td>
</tr>
<tr>
<td><h4 style="text-align:left; padding:0,300px,300px,0;">Total Amount</h4></td>
<td><input type="text" name="tamt" id="tamt"></td>
</tr>
</table>
Javascript:
<script>
var i = 0;
function duplicate()
{ // function to clone a div
var original = document.getElementById('service');
var rows = original.parentNode.rows;
var i = rows.length - 1;
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplic" + (i); // there can only be one element with an ID
original.parentNode.insertBefore(clone, rows[i]);
}
function onkeyupsum()
{ // calculate sum and show in textbox
var sum = 0;
var amount1= document.getElementById('amount').value;
sum += parseFloat(amount1);
document.submitform.tamt.setAttribute("value",sum );
}
</script>
Can anyone tell me the way to take the textbox values even from duplicated div to textbox.

What you should do is to give inputs common class name and then in onkeyupsum select all inputs and calculate sum in loop:
function onkeyupsum() { // calculate sum and show in textbox
var sum = 0,
amount = document.querySelectorAll('.amount'), i;
for (i = 0; i < amount.length; i++) {
sum += parseFloat(amount[i].value || 0);
}
document.submitform.tamt.value = sum;
}
and input will look like:
<input type="text" name="amount" class="amount" onkeyup="onkeyupsum()" />
Demo: http://jsfiddle.net/mf7wqkq2/

Iterating through table and get the value of a button in each tablerow jQuery

I have buttons in a table which are created dynamically. I want to iterate through a table, get the tablerows which contain a checked checkbox and get the value of a button inside the tablerow. I want to push the values in an array after. The buttons don't have a unique ID so I cannot get their values by id.
I tried to get the values through giving the buttons a class and itering works fine but the array is filled with empty entries.
$("#bt_multiple_deletion").off().on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).find(".filefolder-button").text());
});
})
I really don't know what Im doing wrong. I tried to get the values with .text(), .val() etc.
My table row looks like this:
<tr class="select">
<td>
<span class="countEntries"><input id="lv_fifo_ctrl7_cb_delete_file" type="checkbox" name="lv_fifo$ctrl7$cb_delete_file" /></span>
</td>
<td>
<img src="images/icons/013_document_02_rgb.png" alt="document" />
</td>
<td class="name">//the button i want to get the value from
<input type="submit" name="lv_fifo$ctrl7$bt_file" value="013_document_png.zip" id="lv_fifo_ctrl7_bt_file" class="filefolder-button download file del" style="vertical-align: central" />
</td>
<td>
<span id="lv_fifo_ctrl7_lb_length">33.14 KB</span>
</td>
<td>
<span id="lv_fifo_ctrl7_lb_CreationTime">21.10.2014 07:34:46</span>
</td>
<td></td>
<td>
<input type="submit" name="lv_fifo$ctrl7$bt_del_file" value="delete" id="lv_fifo_ctrl7_bt_del_file" class="delete-button delete-file" />
</td>
</tr>

The problem is rows is the input elements not the tr elements so in the loop you need to find the tr which contains the input then find the target element inside it
$("#bt_multiple_deletion").off().on("click", function () {
var checked = $(".select").find("input[type=checkbox]:checked");
var files = checked.map(function () {
return $(this).closest('tr').find(".filefolder-button").val();
}).get();
})
Another option is
$("#bt_multiple_deletion").off().on("click", function () {
var rows = $(".select").find("tr").has('input[type=checkbox]:checked');
//var rows = $(".select").find('input[type=checkbox]:checked').closest('tr');
var files = rows.map(function () {
return $(this).find(".filefolder-button").val();
}).get();
})

#Timo Jokinen Do you need this
$("#bt_multiple_deletion").on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).parents("tr").find("td.filefolder-button").text());
});
console.log(files);
})
<table class="select">
<tr>
<td class="filefolder-button">test1</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test2</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test3</td>
<td><input type="checkbox" /></td>
</tr>
</table>
<button id="bt_multiple_deletion">delete</button>
Checkout example link here

Replacing innerHtml instead of append

I have a table in which first row is a label and drodown for selecting number of spaces.
based on the number selected that much number of rows and inside each row another table with input fields will come. everithing is ok in first time.but when i reselect the number from dropdown the number of rows append to the previous one. i want to replace the previous inner tables. how to do this.
this is my html code
<table border="1" style="border-style:dotted" width="100%" id="table_booking">
<tr>
<td>
<label > Number Of Spaces</label>
</td>
<td>
<select id="dropdown" class="" name="spaces" onchange="addForm(this.value)">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<table border="1" style="background-color:gray" width="100%" id="table_form">
</table>
</table>
this is the script
<script type="text/javascript">
function addForm(space)
{ var val=space;
document.getElementById('dropdown').value =val;
var doc=document.getElementById('table_booking');
for(var i=0;i<val;i++)
doc.innerHTML += '<tr><td><table width="100%" id="table_form"><tr><td><form><label>Name </label><input type="text"></form></td></tr></table></td></tr>';
}
</script>

Before appending, just flush the existing innerHTML like
doc.innerHTML = '';
Then append it,
for(var i=0;i<val;i++)
doc.innerHTML += '<tr><td><table width="100%" id="table_form"><tr><td><form><label>Name </label><input type="text"></form></td></tr></table></td></tr>';
Updates: Looking through your comments in other answers, I have devised the following approach,
function addForm(space) {
var val = space;
var doc = document.getElementById('table_booking').getElementsByTagName('tbody')[0];
// Remove nodes whenever we append new nodes to the tbody (RESET)
if (doc.getElementsByTagName('tr').length > 1) {
var len = doc.getElementsByTagName('tr').length;
for (i = (len - 1); i >= 1; i--) {
doc.getElementsByTagName('tr')[i].remove();
}
}
// Based on the value selected, new rows will be appended to the tbody
for (var i = 1; i <= val; i++) {
t = doc;
r = t.insertRow(i);
c = r.insertCell(0);
c.innerHTML = "<form><label>Name </label><input type='text'></form>";
doc.appendChild(r);
}
}
JSFiddle