We Keep Coding

serialize inputs inside element (not form)

I have a HTML like:
<table>
<tr id="01">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
<tr id="02">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
</table>
And I'm trying to make a JSON string of the inputs only on a specific row. Would there be a good solution for this? Something like:
json = $('#01').serialize();
but I need a json instead of the URLEncode'd string the serialize() provides.

serialize() won't give you the JSON you're after. It'll only give you a URLEncode'd string. Example:
//test all inputs on row #02
window.tester = function() {
console.log($('#02 input').serialize());
};
//test all inputs
window.tester2 = function() {
console.log($('input').serialize());
};
//test only "y" inputs
window.tester3 = function() {
console.log($("input[name='y']").serialize());
};
<table>
<tr id="01">
<td><input name="x" value="1"></td>
<td><input name="y" value="2"></td>
</tr>
<tr id="02">
<td><input name="x" value="3"></td>
<td><input name="y" value="4"></td>
</tr>
</table>
<div>
<input type="button" onclick="tester()" value="Test Row 02" /><br />
<input type="button" onclick="tester2()" value="Test All Inputs" /><br />
<input type="button" onclick="tester3()" value="Test Only 'y' Inputs" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Produces:
x=3&y=4
x=1&y=2&x=3&y=4
y=2&y=4
If it's JSON you want, then you'll need to be specific about what format you're after. An array? A hash? In any case, the selectors above are what you'll want to start with, then at some point, you'll want to run the value through:
JSON.stringify(myResults);
window.arrayIt = function () {
var arrVal = $('#02 input').toArray();
var arr = arrVal.map(function (i) {
var x = {};
x[i.name] = i.value;
return x;
});
console.log(JSON.stringify(arr));
}
<table>
<tr id="01">
<td><input name="x" value="1"></td>
<td><input name="y" value="2"></td>
</tr>
<tr id="02">
<td><input name="x" value="3"></td>
<td><input name="y" value="4"></td>
</tr>
</table>
<button onclick="arrayIt()">Array It!</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

.serialize() can be used on a collection of inputs.
$("#submit").click(function() {
var data = $("#01 input").serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="01">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
<tr id="02">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
</table>
<button id="submit">Click</button>
BTW, the result of serialize() isn't JSON, it's application/x-www-form-urlencoded format.

You can use $("#01 input").serialize().
$('#abc').click(function(){
json = $("#01 input").serialize().replace(/%20/g, "+");
console.log(json);
});
<table>
<tr id="01">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
<tr id="02">
<td><input name="x"></td>
<td><input name="y"></td>
</tr>
</table>
<button id = "abc">serialize 01</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Disabling certain inputs in table on button press

I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds

$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})

Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>

You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>

jQuery Find First Row From Closest Method

Using jQuery, I'm trying to find the first row of a given column in a table based on the control that has focus. The below kind of works, but it finds the last row of the given column. I want it to find the first row.
var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')
I believe this is going to the last row because of the use of the 'closest()' method which traverses through the elements starting from the bottom.
What this ultimately being used for is navigate through a table using the arrow keys. It's based on this helpful code someone was kind enough to share: https://gist.github.com/krcourville/7309218.
EDIT: Adding additional fuller jquery and html as requested.
jQuery (stripped down version):
<script>
$('table.arrow-nav').keydown(function(e){
switch(e.which){
case //... other cases for other keycodes ...
case e.ctrlKey && 38: // <ctrl> + <Up>
$next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
break;
}
if($next && $next.length){
$next.focus();
}
});
</script>
HTML:
<html>
<head></head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><input id="ctl_1_1" type="text"></td>
<td><input id="ctl_2_1" type="text"></td>
<td><input id="ctl_3_1" type="text"></td>
<td><input id="ctl_4_1" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_2" type="text"></td>
<td><input id="ctl_2_2" type="text"></td>
<td><input id="ctl_3_2" type="text"></td>
<td><input id="ctl_4_2" type="text"></td>
</tr>
<tr>
<td><input id="ctl_1_3" type="text"></td>
<td><input id="ctl_2_3" type="text"></td>
<td><input id="ctl_3_3" type="text"></td>
<td><input id="ctl_4_3" type="text"></td>
</tr>
</table>
</body>
<html>

Try like this
$('input:focus').closest('tr').parent().find("tr:nth-child(2)").find('td:nth-child(3)').find('input')

You can use the ids for referencing each row:
$(function() {
$('input').on('focus', function(event) {
var foc = $(this).attr('id');
var ctl = parseInt(foc.charAt(6), 10);
var next = $('tr')[ctl];
if (next === $('tr')[2]) {
next = $('tr')[0];
}
console.log('Focused input is ' + foc);
console.log('The next row is ' + (ctl + 1));
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Next Row</title>
</head>
<body>
<table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>
<input id="ctl_1_1" type="text">
</td>
<td>
<input id="ctl_2_1" type="text">
</td>
<td>
<input id="ctl_3_1" type="text">
</td>
<td>
<input id="ctl_4_1" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_2" type="text">
</td>
<td>
<input id="ctl_2_2" type="text">
</td>
<td>
<input id="ctl_3_2" type="text">
</td>
<td>
<input id="ctl_4_2" type="text">
</td>
</tr>
<tr>
<td>
<input id="ctl_1_3" type="text">
</td>
<td>
<input id="ctl_2_3" type="text">
</td>
<td>
<input id="ctl_3_3" type="text">
</td>
<td>
<input id="ctl_4_3" type="text">
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>

jQuery Clone Table Row BUT with Multiple Tables on Page

I have a page containing:
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[1][arg1]" value="X"></td>
<td><input type="input" name="set[1][arg2]" value="Y"></td>
<td><input type="input" name="set[1][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[2][arg1]" value="X"></td>
<td><input type="input" name="set[2][arg2]" value="Y"></td>
<td><input type="input" name="set[2][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[3][arg1]" value="X"></td>
<td><input type="input" name="set[3][arg2]" value="Y"></td>
<td><input type="input" name="set[3][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th><th>Title 2</th><th>Title 3</th>
</tr>
<tr>
<td><input type="input" name="set[4][arg1]" value="X"></td>
<td><input type="input" name="set[4][arg2]" value="Y"></td>
<td><input type="input" name="set[4][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[5][arg1]" value="X"></td>
<td><input type="input" name="set[5][arg2]" value="Y"></td>
<td><input type="input" name="set[5][arg3]" value="Z"></td>
</tr>
<tr>
<td><input type="input" name="set[6][arg1]" value="X"></td>
<td><input type="input" name="set[6][arg2]" value="Y"></td>
<td><input type="input" name="set[6][arg3]" value="Z"></td>
</tr>
</table>
Add another Set
</div>
Two (or more) divs, containing a table each, plus n rows, each containing inputs. The inputs you already see are dynamically created from data in the db.
I would like to be able to just add a new <tr> when the link below any table is clicked. The catch being that the table which will recieve the new row is the one immediately above the link clicked.
I did think about giving each table a unique id which matches the id of the link but am unsure how in the jQuery to then recognise that a link with a random id has been clicked.
Then i thought maybe I could use the closest functionality and traverse backwards from the link to the table above it but I don't think that works. (maybe it does?)
Also, when I add the new row, it needs to be blank, which I think I could figure out, once I manage to clone the last (or any for that matter) row and append it to the end of the relevant table. E.g. new row:
<tr>
<td><input type="input" name="newSet[][arg1]" value=""></td>
<td><input type="input" name="newSet[][arg2]" value=""></td>
<td><input type="input" name="newSet[][arg3]" value=""></td>
</tr>
Hope it makes sense what I am asking.
Thanks in advance.
Jon

First, add a class addSet to your links and remove the id or make it unique. Repeated ids is not a valid markup. After doing this, I'd say this should work
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').each(function(index) {
var $this = $(this);
$this.val('');
$this.prop('name','set[][arg' + (index + 1) + ']' );
})
$table.append($clonedRow);
});
DEMO

DEMO
As pointed out in the comments, please change id="addSet" to class="addSet" to get rid of duplicate ID's. Make a clone of the last row .... there should be at least one row in the table, otherwise this part will fail. Then fix the name and value of each input element in the clone. You can either change the current value with .val() or the default/initial value with .attr() or removeAttr('value').
Here is the code you need:
$(function() {
$(document).on('click', 'a.addSet', function(e) {
e.preventDefault();
var tr = $(this).closest('div.my_div').find('tr').last().clone();
tr.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$(this).closest('div.my_div').find('table tbody').append( tr );
});
});

you can do it by adding a class to the link as id must be unique:
HTML:
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[1][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[1][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[1][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[2][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[2][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[2][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[3][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[3][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[3][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
<div class="my_div">
<table>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
</tr>
<tr>
<td>
<input type="input" name="set[4][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[4][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[4][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[5][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[5][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[5][arg3]" value="Z" />
</td>
</tr>
<tr>
<td>
<input type="input" name="set[6][arg1]" value="X" />
</td>
<td>
<input type="input" name="set[6][arg2]" value="Y" />
</td>
<td>
<input type="input" name="set[6][arg3]" value="Z" />
</td>
</tr>
</table> Add another Set
</div>
JQUERY:
$(".addSet").click(function () {
$(this).prev("table").append('<tr><td><input type="input" name="newSet[][arg1]" value=""></td><td><input type="input" name="newSet[][arg2]" value=""></td><td><input type="input" name="newSet[][arg3]" value=""></td></tr>');
})
FIDDLE:
http://jsfiddle.net/kbxekrjc/

I am answering my own question because I used a combination of two of the other provided answers (#ClaudioRedi & #user3558931)
$('.addSet').click(function(e) {
e.preventDefault();
var $table = $(this).prev();
var $row = $table.find('tr:last');
var $clonedRow = $row.clone();
$clonedRow.find('input').attr('name', function() {
return $(this).attr('name').replace(/set\[\d{1,}\]/g,'newSet[]');
})
.each(function() {
$(this).val('');
});
$clonedRow.hide();
$table.append($clonedRow);
$clonedRow.show('slow');
});

I am trying to dynamically print out from a text field I have the list that says what to do and what to say

I have successfully done it with one thing going on, but I have two things going on I want to dynamically print that out from the values of two different tables. here is my code: when a button is clicked it goes to another page that prints out what the user filled into the text field. here is how I am doing it:
function print_list(item_names,number_of_items) {
var theText="<ol>";
for(var i=1; i<=number_of_items;i++){
if($("#" + item_names + "_" + i).val()!=''){
theText+="<li>"
theText+=$("#" + item_names + "_" + i).val();
theText+="</li>";
}
}
theText +="</ol>";
$("#print_content_area").html(theText);
Array.filter( document.getElementsByClassName('printArea_1'), function(elem){
$(".printing_list").printElement( elem );
});
}
I need to seperate two different fields here is the table for that
<div id="blue_small_header_text" align="left" style="padding-top:5px;"> What to
say and do <div id="list_buttons"><a class="print_list"
onclick="print_list2('activities_say',3);"></a><a class="list_help"
onclick="openDialog('list_help');"></a></div></div>
<div id="list_question_btn"></div></div>
<div id="activity_area_content" style="padding:5px">
<table width="100%" style="line-height:0px">
<tr>
<td><p style="width:50px;">To say</p></td>
<td><input class="printArea_1 activities_say1_box" name="activities_say_1"
id="activities_say_1" type="text" placeholder="Type or click the list
button >" style="width:340px;" /></td>
<td><input type="button" id="say_1" class="list_btn list_say" value="List >" /></td>
</tr>
<tr>
<td style="font-size:9px;"> To do</td>
<td align="center"><input class="printArea_1 activities_do_box" name="activities_do_1" id="activities_do_1" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="do_1" class="list_btn list_do" value="List >" /></td>
</tr>
<tr>
<td><p style="width:50px;">To say</p></td>
<td><input class="printArea_1 activities_say1_box" name="activities_say_2" id="activities_say_2" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="say_2" class="list_btn list_say" value="List >" /></td>
</tr>
<tr>
<td style="font-size:9px;"> To do</td>
<td align="center"><input class="printArea_1 activities_do_box" name="activities_do_2" id="activities_do_2" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="do_2" class="list_btn list_do" value="List >" /></td>
</tr>
<tr>
<td><p style="width:50px;">To say</p></td>
<td><input class="printArea_1 activities_say1_box" name="activities_say_3" id="activities_say_3" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="say_3" class="list_btn list_say" value="List >" /></td>
</tr>
<tr >
<td style="font-size:9px;"> To do</td>
<td align="center"><input class="printArea_1 activities_do_box" name="activities_do_3" id="activities_do_3" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="do_3" class="list_btn list_do" value="List >" /></td>
</tr>
here is the page that is being printed out.
<div class="printing_list" id="printList2" >
<img id="print_logo" src="/images/print_header_med.png">
<div align="left" id="printHead_text"></div>
<br />
<div align="left" class="listPrint_info" style="width:700px;"></div>
<br />
<table width="100%" style="line-height:20px; margin-left:10px;" >
<tr id="Say_list">
<td id="print_content_area2"></td>
</td>
</tr>
</table>
<table width="100%" style="line-height:20px; margin-left:10px;" >
<tr id="Say_do_list">
<td id="print_content_area2"></td>
</td>
</tr>
</table>
</div>