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>');
Related
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.
I have added a row using javascript. Now I want the new columns's value to be picked from the input box text by id. There's some sort of error in it, which I'm unable to get.
<html>
<head>
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = getElementById("cid");
cell2.innerHTML = document.getElementById("name");
}
</script>
</head>
<body>
<table id="myTable" >
<tr>
<td>S. No</td>
<td>Item Name</td>
<td>Subtotal</td>
</tr>
<tr>
<td><input type="text" id="cid" name="id" /> </td>
<td><button onclick="addtosubtotal()" /></td>
</tr>
</table>
</body>
</html>
You don't have an id for the input name:
<input type="text" id="name" name="name" />
So you wont get it by id
You can also combine the two statements in your JavaScript if you want to
<script>
function addtosubtotal() {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0).innerHTML = document.getElementById("cid").value;
var cell2 = row.insertCell(1).innerHTML = document.getElementById("name").value;
}
</script>
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.
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>
I'm looking for a simple, effective technique for adding or deleting a row in a html table using JavaScript. (Without using jQuery)
var theTable = document.getElementById("theTable");
theTable.deleteRow(0); //0 being first row.
I wrote this a month ago...Its not the best way
<html>
<head>
<title>
Crap work
</title>
<script type="text/javascript">
function add_row()
{
var table = document.getElementById('table');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
cell3.innerHTML = ' <span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>';
cell3.setAttribute("style", "display:none;");
var cell4 = row.insertCell(3);
cell4.innerHTML = '<span onClick="save(this)">Save</span>';
}
function save(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML=elTableCells[0].firstChild.value;
elTableCells[1].innerHTML=elTableCells[1].firstChild.value;
elTableCells[2].setAttribute("style", "display:block;");
elTableCells[3].setAttribute("style", "display:none;");
}
function edit(e)
{
var elTableCells = e.parentNode.parentNode.getElementsByTagName("td");
elTableCells[0].innerHTML='<input type="text" value="'+elTableCells[0].innerHTML+'">';
elTableCells[1].innerHTML='<input type="text" value="'+elTableCells[1].innerHTML+'">';
elTableCells[2].setAttribute("style", "display:none;");
elTableCells[3].setAttribute("style", "display:block;");
}
function delete_row(e)
{
e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
}
</script>
</head>
<body >
<div id="display">
<table id='table'>
<tr id='id'>
<td>
Piemesons
</td>
<td>
23
</td>
<td >
<span onClick="edit(this)">Edit</span>/<span onClick="delete_row(this)">Delete</span>
</td>
<td style="display:none;">
<span onClick="save(this)">Save</span>
</td>
</tr>
</table>
<input type="button" value="Add new row" onClick="add_row();" />
</div>
</body>