We Keep Coding

Unable to save input data from HTML table cells into JavaScript variables

I have tried to put input from a user into cells of a table, which was created using HTML and to save that data into a variable of JavaScript.
I was trying to get the data from rows cell of table to JavaScript variables one by one, but I'm getting undefined in place of data when alerting the data after summit.
HTML code
<table border = "2" cellpadding = "6" cellspacing = "6" bordercolor = "white" bgcolor = "red" class="center" id="mytable" >
<tr>
<th style="background: white;">EDUCATION</th>
<th style="background: white;">INSTITUTE</th>
<th style="background: white;">PERCENTAGE</th>
</tr>
<tr>
<td style="color: white;">10 th</td>
<td id="10inst"><input type="text"></td>
<td id="10per"><input type="text"></td>
</tr>
<tr>
<td style="color: white;" >12 th</td>
<td id="12inst"><input type="text"></td>
<td id="12per"><input type="text"></td>
</tr>
<tr>
<td style="color: white;">Graduaction</td>
<td id="gradinst"><input type="text"></td>
<td id="gradper"><input type="text"></td>
</tr>
<tr>
<td style="color: white;">Masters</td>
<td id="masterinst"><input type="text"></td>
<td id="masterper"><input type="text"></td>
</tr>
</table><br><br>
JavaScript code
var inst10 = document.getElementById("mytable").value;
var inst12 = document.getElementById("12inst").value;
var masterinst = document.getElementById("masterinst").value;
var per10 = document.getElementById("10per").value;
var per12 = document.getElementById("12per").value;
var masterper = document.getElementById("masterper").value;
var gradinst=document.getElementById("gradinst").value;
var gradper=document.getElementById("gradper").value;

There might be 2 problems in your code:
Make sure you run your JavaScript only after you enter text in the input elements.
You have <input> element inside <td> element. It means that when you getElementById of the <td> - you are not yet referencing the '' element. And the .value of '' is really undefined. So to fix that:
instead of
var inst12 = document.getElementById("12inst").value;
do:
var inst12 = document.getElementById("12inst").childNodes[0].value;
Full working example: https://jsfiddle.net/1dpg5j3q/

You must be add "id" attribute in input elements, not td elements or table elements
Like this;
<input id="12inst" type="text">

Creating object property with array values from the DOM

I'm creating a new table from reading the DOM by having trouble with the object creation. Right now, I'm able to get it as {100: 4} varied for each row. I'm thinking the best way to get my desired result is to make an object that looks like such for each ID {ID: [loc, value, bax]} Should look like such based upon my current table. The location will be always be the same for each ID depending on the first location selected so for this instance, 100 will always be USA
Desired
ID | Location | Value | BAX
100 | USA | 4 | 55
My Current HTML and JS
<table>
<tr>
<th>ID</th>
<th>Location</th>
<th>Value</th>
<th>Bax</th>
</tr>
<tr>
<td><input name ="itinValue" value="100"></td>
<td><input name ="location" value="USA"></td>
<td><input name="initValue" value='1'></td>
<td><input name="bax" value='22'></td>
</tr>
<tr>
<td><input name ="itinValue" value="300"></td>
<td><input name ="location" value="CAN"></td>
<td><input name="initValue" value='2'></td>
<td><input name="bax" value='11'></td>
</tr>
<tr>
<td><input name ="itinValue" value="100"></td>
<td><input name ="location" value="USA"></td>
<td><input name="initValue" value='3'></td>
<td><input name="bax" value='33'></td>
</tr>
<tr>
<td><input name ="itinValue" value="200"></td>
<td><input name ="location" value="MEX"></td>
<td><input name="initValue" value='4'></td>
<td><input name="bax" value='44'></td>
</tr>
</table>
<table class="table-two">
<thead>
<tr>
<th>ID</th>
<th>Location</th>
<th>Value</th>
<th>Bax</th>
</tr>
</thead>
<tbody></tbody>
</table>
Javascript:
const itin = document.querySelectorAll('[name="itinValue"]');
var values = {};
var i = 1;
itin.forEach((item, i) => {
var idValue = item.value;
var next = document.getElementsByName('initValue')[i].value;
if (values.hasOwnProperty(idValue)) {
values[idValue] = values[idValue] += parseInt(next);
} else {
values[idValue] = parseInt(next);
}
i++;
});
var table_two = document.querySelector('.table-two tbody');
for (var prop in values) {
var val = values[prop];
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.innerHTML = prop;
td2.innerHTML = val;
tr.appendChild(td1);
tr.appendChild(td2);
table_two.appendChild(tr);
}
and thats printing out the ID and Values correctly. I was thinking of along the lines of doing the same thing for BAX total by doing the same thing as value total and giving them array spots
var bax = document.getElementsByName('bax')[i].value;
if (values.hasOwnProperty(idValue)) {
values[idValue] = [values[idValue] += parseInt(next), values[idValue] += parseInt(bax)];
} else {
values[idValue] = [parseInt(next), parseInt(bax)];
}
I know thats sloppy by just to give an idea of what I was thinking/trying to do. Heres a link to a quick fiddle of where im at
https://jsfiddle.net/f4ha7xe6/52/

Was at this for awhile, finally got to a solution if anyone was interested
https://jsfiddle.net/f4ha7xe6/127/
code

How to set value in dynamically added rows form using jquery?

I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.

Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}

Javascript Table editor -> MySQL CREATE statement

I am looking for a javascript plugin that will let users create MySQL tables using a very basic HTML interface. Ideally a CREATE statement would result from the HTML table. Does anyone know of such a script?

to my knowledge there is not a jquery plugin that will allow you to 'create' database tables, regardless you would still have to use some server side code to handle the actual SQL etc. it is not too difficult to create something yourself, i knocked together this which i think is the kinda thing your looking for. note: this is not a full implementation :P just an idea, basically create the table using html, parse it to json, then send it to the server to deal with it.
initial html 'template':
<table id="table_designer">
<tr class="table_name">
<td><input type="text" placeholder="table name" /></td>
</tr>
<tr class="field_name">
<td>name</td>
<td><input type="text" /></td>
</tr>
<tr class="type">
<td>type</td>
<td><select>
<option>int</option>
<option>varchar</option>
<option>date</option>
</select></td>
</tr>
<tr class="primary_key">
<td>primary key</td>
<td><input type="checkbox" /></td>
</tr>
<tr class="relationship">
<td>related type</td>
<td><select>
<option>none</option>
<option>one to many</option>
<option>many to one</option>
<option>many to many</option>
</select></td>
</tr>
<tr class="related_table">
<td>related table</td>
<td><input type="text" /></td>
</tr>
<tr class="related_field">
<td>related field</td>
<td><input type="text" /></td>
</tr>
<tr class="controls">
<td><button id="save">save</button></td>
<td>
<button id="delete">delete</button>
<button id="add">add</button>
</td>
</tr>
</table>
some jquery to handle the 'actions'
/* parses table as json and sends to server */
$('#save').click(function() {
var json= {};
$('#table_designer tr').each(function(){
var $t = $(this),
prop = $t.attr('class');
json[prop] = [];
$t.children('td').each(function() {
json[prop].push($(this).children().first().val());
});
});
alert(JSON.stringify(json, null, " "));
/* send the data to the server
$.post('www.mysite.com', json, function(d, t, j)
{ alert('success'); });
*/
});
/* deletes parent column */
$('#delete').click(function() {
var $t = $(this),
pos = $t.parents('td').index() + 1;
$('#table_designer tr').each(function(){
$(this).children('td:nth-child(' + pos +')').remove();
});
});
/* adds a new field */
$('#add').click(function() {
var $t = $(this),
pos = $t.parents('td').index() + 1;
$('#table_designer tr').each(function(){
var clone = $(this).children('td').last().clone(true);
clone.children('input').val('');
$(this).children('td:nth-child(' + pos +')').after(clone);
});
});
​

Change the value of a text box to its current order in a sortable tab

Edit: I have solved this by myself. See my answer below
I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.
Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.
I am using jQuery and the Table Drag and Drop JQuery plugin
Code
Javascript:
<script type = "text/javascript" >
$(document).ready(function () {
$("#table-2").tableDnD({
onDrop: function (table, row) {
var rows = table.tBodies[0].rows;
var debugStr = "Order: ";
for (var i = 0; i < rows.length; i++) {
debugStr += rows[i].id + ", ";
}
console.log(debugStr)
document.forms['productform'].sort1.value = debugStr;
document.forms['productform'].sort2.value = debugStr;
document.forms['productform'].sort3.value = debugStr;
document.forms['productform'].sort4.value = debugStr;
},
});
});
</script>
HTML Table:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr>
<td>Product</td>
<td>Order</td>
</tr>
</thead>
<tbody>
<tr class="row1" id="Pol">
<td>Pol</td>
<td><input type="textbox" name="sort1"/></td>
</tr>
<tr class="row2" id="Evo">
<td>Evo</td>
<td><input type="textbox" name="sort2"/></td>
</tr>
<tr class="row3" id="Kal">
<td>Kal</td>
<td><input type="textbox" name="sort3"/></td>
</tr>
<tr class="row4" id="Lok">
<td>Lok</td>
<td><input type="textbox" name="sort4"/></td>
</tr>
</tbody>
</table>
</form>

Hardnrg in #jquery ended up solving it for me.
It involved adding an id="" to each input:
<form name="productform">
<table cellspacing="0" id="table-2" name="productform">
<thead>
<tr><td>Product</td> <td>Order</td></tr>
</thead>
<tbody>
<tr class="row1" id="Pol"> <td>Pol</td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
<tr class="row2" id="Evo"> <td>Evo</td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
<tr class="row3" id="Kal"> <td>Kal</td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
<tr class="row4" id="Lok"> <td>Lok</td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
</tbody>
</table>
</form>
And add this js to the OnDrop event:
for (var i=0; i < rows.length; i++) {
$('#' + rows[i].id + "_field").val(i+1);
}
Easy peasy!

Hmmm..
I think you want to do something like this:
$("input:text", "#table-2").each( function(i){ this.value=i+1; });
The $().each() function's info is here: http://docs.jquery.com/Core/each