Develop Reference

JavaScript inside html document won't recognize html attribute

I'm making a contact form for a website, I'm just modifying it to getting a dynamic table in it. I want the contents of the table to be sent with all the information of the email:
<TABLE id="dataTable" class="table">
<tr>
<th style="text-align:center"></th>
<th style="text-align:center">Part</th>
<th style="text-align:center">Marca</th>
<th style="text-align:center">Referencia</th>
<th style="text-align:center">Producto</th>
</tr>
<TR>
<TD style="text-align:center">
<INPUT type="checkbox" name="chk" style="text-align:center" />
</TD>
<TD style="text-align:center"> 1 </TD>
<TD style="text-align:center">
<INPUT type="text" size="10" style="text-align:center" data-form-field="Marca" /> </TD>
<TD style="text-align:center">
<INPUT type="text" size="7" style="text-align:center" data-form-field="Ref" /> </TD>
<TD style="text-align:center">
<INPUT type="text" size="35" style="text-align:center" data-form-field="Prod" /> </TD>
</TR>
</TABLE>
That's the table. I noticed that the tags with the "data-form-field" attribute are the ones that are sent in the email, so the first row always is being sent, but I made it a dynamic table so here is the table script for adding and deleting rows:
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.style = "text-align:center";
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name = "chkbox[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.style = "text-align:center";
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
cell3.style = "text-align:center";
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.size = "10";
element2.style = "text-align:center";
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
cell4.style = "text-align:center";
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.size = "7";
element3.style = "text-align:center";
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
cell5.style = "text-align:center";
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
element4.size = "35";
element4.style = "text-align:center";
cell5.appendChild(element4);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for (var i = 0; i < rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch (e) {
alert(e);
}
}
</SCRIPT>
This one is inside my html document but I can't assign the attribute to the rows that are created with the script, it just won't recognize it.

Insert New Table row with javascript

I'm trying to add a new Table row with an input type file, after each time someone chooses a file to upload.
The problem is, the input type is not inserted into the new row;
The markup language:
<table id = "images">
<tr>
<td>Title: </td><td><input type="text" name="title" size="51" required><td>
<tr>
<tr>
<td>Description: </td><td><textarea type="text" name="story" rows="10" cols="60"></textarea><td>
<tr>
<tr>
<td>Author: </td><td><input type="text" name="auth" size="51" required></textarea><td>
<tr>
<tr>
<td>Image: </td><td><input type="file" name="image[]" size="20" accept="image/jpeg, image/png" required onChange="addRow('images')"></input><td>
<tr>
</table>
The JS:
<SCRIPT language="javascript">
addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.getElementsByTagName("tr").length;
var row = table.insertRow(rowCount-2);
var cell1 = row.insertCell(0);
cell1.innerHTML = "Images";
var cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "file";
element2.name = "image[]";
document.getElementsByName("image[]").lastChild.setAttribute("onChange", "addRow('images')");
cell3.appendChild(
}
</SCRIPT>
The error I'm seeing is:
Uncaught TypeError: Cannot call method 'setAttribute' of undefined
Any help greatly appreciated.
Peter

function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.getElementsByTagName("tr").length;
var row = table.insertRow();
var cell1 = row.insertCell(0);
cell1.innerHTML = "Image:";
var cell3 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "file";
element2.name = "image[]";
cell3.appendChild(element2);
element2.setAttribute("onChange", "addRow('images')");
}
here's a working fiddle:
http://jsfiddle.net/C3GRN/1/

JAVASCRIPT
document.getElementById('images').innerHTML+="<tr><td>blah-2</td></tr>";
JQUERY
$('#images tr:last').after('<tr><td>blah-2</td></tr>');

$('#images tr:first').after('<tr><td><input type="text" ></td></tr>');

How do I find the sum of the values entered in certain fields that were created dynamically using Javascript?

I've written code that creates a form displayed as a table on a HTML page. I've written Javascript to allow the user to add rows or delete selected rows. The add and delete functionalities work. But I want the final column of a row to display the sum of the previous three values, and that is just not happening.
Here's the HTML code:
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="350px" border="1">
<form name="f1" id="f1">
<tr>
<td><b> Select </b></td>
<td><b> S.No. </b></td>
<td><b> Subject </b></td>
<td><b> Mark 1 </b></td>
<td><b> Mark 2 </b></td>
<td><b> Mark 3 </b></td>
<td><b> Total </b></td>
</tr>
<tr>
<td> <input type="checkbox" name="chk"/></td>
<td> 1 </td>
<td> <input type="text" name="subject" /> </td>
<td> <input type="text" name="mark" /></td>
<td> <input type="text" name="marka" /></td>
<td> <input type="text" name="markb" /></td>
<td> <input type="text" name="total" /></td>
</tr>
</form>
</table>
<input type=button value="Sum" onclick=sum('dataTable') />
And the Javascript that I've been using:
<script language="javascript">
var k=0;
function addRow(tableID) {
k++;
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chk"+k;
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "subject"+k;
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "mark"+k;
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "marka"+k;
cell5.appendChild(element4);
var cell6 = row.insertCell(5);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "markb"+k;
cell6.appendChild(element5);
var cell7 = row.insertCell(6);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "total"+k;
cell7.appendChild(element6);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
for(var j=1; j<rowCount; j++)
{var mytable = document.getElementById(tableID);
mytable.rows[j].cells[1].innerHTML = j;
}
}
function sum(tableID)
{ var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=1;i<rowCount;i++)
{
table.rows[i].cells[6].name.value=table.rows[i].cells[3].name.value + table.rows[i].cells[4].name.value + table.rows[i].cells[5].name.value;
}
}
</script>
Also, the first row doesn't get deleted in Firefox. That works only in Internet Explorer facepalm.
What should I do?

Here's a new and improved Sum function that should get you pointed in the right direction:
sum = function()
{
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
for(var i=1;i<rowCount;i++)
{
table.rows[i].cells[6].childNodes[0].value =
parseInt(table.rows[i].cells[3].childNodes[0].value) +
parseInt(table.rows[i].cells[4].childNodes[0].value) +
parseInt(table.rows[i].cells[5].childNodes[0].value);
}
}
To make this work you'll also need to remove the spaces preceding your input fields.
Here's a JSFiddle that incorporates all of it. JSFiddle
Hope it suits your needs.

How to get name attribute value for dynamically created table using javaScript

i want to save all record of this dynamically created table row into mysql database but i m unable to get name value for dynamically added feilds which i can use in $_POST method .Kindly help me out .And Also tell me how to convert JavaScript var into Php Variable
<?php
if(isset($_POST['buton_sumit']))
{
$nav_id =1;
$item1=$_POST['name1'];
$item1=$_POST['name2'];
echo $item1 + $item2;
}
?>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
</HEAD>
<BODY>
<table id="extra" width="499" >
<th width="24">R</th><th width="19">Sr.</th><th width="133">Item-Name</th><th width="144">Quantity</th><th width="145">price</th>
</table>
<form action="table1.php" method="post" name="input">
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD width="24"><INPUT type="checkbox" name="chk"/></TD>
<TD width="19"> 1 </TD>
<TD width="133"> <INPUT type="text" name="name1"/> </TD>
<TD width="133"> <INPUT type="text" name="qty1"/> </TD>
<TD width="133"> <INPUT type="text" name="price1"/> </TD>
</TR>
</TABLE>
<INPUT type="button" value="Add Item" onclick="addRow('dataTable')" />
<INPUT type="button" value="Remove Item" onclick="deleteRow('dataTable')" />
<INPUT type="submit" value="End Sale" name="buton_sumit" />
</form>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name="name"+ cell2.innerHTML;
var element2id="myid"+cell2.innerHTML;
element2.setAttribute('id',element2id);
cell3.appendChild(element2);
var cell4 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name="qty"+ cell2.innerHTML;
cell4.appendChild(element3);
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "text";
element4.name="price"+ cell2.innerHTML;
cell5.appendChild(element4);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
javascript:(document.write(document.forms[0].elements[2].name))
var myname2=2;
</SCRIPT>
</BODY>
</HTML>

I used the same kinda code and my problem was that when I clicked checkbox for row number 2 ... in Php I always get the result as row number 1 checkbox is checked which is wrong...
enter code here
<html><body>
<?php
$col = $_POST['Colname'];
$dtype = $_POST['Datatype'];
$pk = $_POST['Pk'];
$dbname= $_POST['Dbname'];
$space=$_POST['Space'];
$concount=$_POST['Concount'];
$qps=$_POST['Qps'];
echo "$dbname <br/> $space <br/> $concount <br/> $qps <br/> ";
$result=count($col);
echo($result);
while($result!=0)
{
$result-=1;
echo "<table><tr>";
echo "<td>$col[$result]</td>";
echo "<td>$dtype[$result]</td>";
echo "<td>$pk[$result]</td>";
echo "</tr></table>";
}
?>
</html></body>

What is the error/output that you get on echo?
Also send the number of rows 'rowCount' to the Server using a hidden field. This rowcount will help you define end point for loop
Add to HTML
<input type="hidden" id="rowCount"/>
in JS code
<script>
var objInputFieldRowCount = docuement.getElemendbyId("rowCount");
var jsRowCount = table.getElementsByTagName("TR").length;
objInputFieldRowCount.value = jsRowCount;
</script>

How to insert row with attributes using table.insertRow?

I have a html table and insert a new row with table.insertRow(), but the new row doesn't have any attributes or formatting applied. How can I add a row to the table with row formatting?
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="100%" align="center">
<TR align="center" border="1">
<TH></TH>
<TH>ID </TH>
<TH>Name</TH>
<TH>Status</TH>
</TR>
<TR align="center">
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" value="Submission 1" /> </TD>
<TD>Working version</TD>
</TR>
</TABLE>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount;
var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
cell3.appendChild(element2);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>

I found it's better to use jquery to add rows to tables
$('#dataTable tr:last').after('<TR align="center"><TD><INPUT type="checkbox" name="chk"/></TD><TD>'+ rowCount + '</TD><TD> <INPUT type="text" value="Submission 1" /> </TD><TD>Working version</TD></TR>');

To set the class name for a tablerow you simply need to edit the className attribute as done below
<script>
var table = document.getElementById("tableID");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount-1);
row.className = "rowdiv";
</script>

Considering insertRow() is usually where you put the index, and var row = table.insertRow(rowCount); is used here, how can you move it to specific part of the table?