...

View Full Version : Pls help me how to code this...



evilbugoy
06-20-2012, 05:12 AM
<html>
<head>

<script type="text/javascript">

function addRow()
{
var tbl = document.getElementById('tableId');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var row = tbl.insertRow(lastRow);

// right cell
var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow';
el.id = 'txtRow';
el.size = 20;
cellRight.appendChild(el);

var cellRight1 = row.insertCell(1);
var el1 = document.createElement('input');
el1.type = 'number';
el1.name = 'txtRow';
el1.id = 'txtRow';
el1.size = 3;
cellRight1.appendChild(el1);

var cellRight2 = row.insertCell(2);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'txtRow';
el2.id = 'txtRow';
el2.size = 20;
cellRight2.appendChild(el2);

var cellRight3 = row.insertCell(3);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtRow';
el3.id = 'txtRow';
el3.size = 20;
cellRight3.appendChild(el3);

var cellRight4 = row.insertCell(4);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'txtRow';
el4.id = 'txtRow';
el4.size = 20;
cellRight4.appendChild(el4);

var cellRight5 = row.insertCell(5);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'txtRow';
el5.id = 'txtRow';
el5.size = 10;
cellRight5.appendChild(el5);

var cellRight6 = row.insertCell(6);
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'txtRow';
el6.id = 'txtRow';
el6.size = 20;
cellRight6.appendChild(el6);
}

</script>
</head>

<body>
<table id="tableId" width="600" border="1">

<tr>
<td><center>Item:</center></td>
<td><center>Qty:</center></td>
<td><center>Manuf.:</center></td>
<td><center>Part #:</center></td>
<td><center>Description:</center></td>
<td><center>List Price:</center></td>
<td><center>Total:</center></td>
</tr>
<tr id="trAdd">
<td ><input type="text" placeholder="Item" name="item" id="item"></td>
<td><input type="number" size="3" name="qty" id="qty"></td>
<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
<td ><input type="text" placeholder="Description" name="description" id="description"></td>
<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
<td><input type="text" placeholder="Total" name="total" id="total"></td>
</tr>
</table> <input type="button" value="Add More Items" onclick='addRow()'><br /><br />

</body>
</html>


i cant seem find to way how to have the automatically created input textbox in the javascript to be the same that i have created in the <tr id='tradd'>? thanks for the help...

DrDOS
06-20-2012, 05:18 AM
el.type = 'text';

should be

el.setAttribute('type','text');

evilbugoy
06-20-2012, 05:21 AM
el.type = 'text';

should be

el.setAttribute('type','text');


i did that, but my input box disappears when i click on the button to add more rows.

DrDOS
06-20-2012, 05:46 AM
You need to create new table rows and add td cells to them, or you will just be overwriting the one you just added.

evilbugoy
06-20-2012, 05:50 AM
im confused now. with my code, when i click on the add more items it will create a new rows and input boxes but the thing is, i want to have the newly created input box have the same attribute here:


</tr>
<tr id="trAdd">
<td ><input type="text" placeholder="Item" name="item" id="item"></td>
<td><input type="number" size="3" name="qty" id="qty"></td>
<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
<td ><input type="text" placeholder="Description" name="description" id="description"></td>
<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
<td><input type="text" placeholder="Total" name="total" id="total"></td>
</tr>

evilbugoy
06-20-2012, 11:28 AM
does anyone know how to solve this problem?

vwphillips
06-20-2012, 01:15 PM
see changes in red also note that ID names must be unique


<html>
<head>

<script type="text/javascript">

function addRow()
{
var tbl = document.getElementById('tableId');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var row = tbl.insertRow(lastRow);

// right cell
var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow';
el.id = 'txtRow';
el.size = 20;
cellRight.appendChild(el);

var cellRight1 = row.insertCell(1);
var el1 = document.createElement('input');
// el1.type = 'number'; // this is illegal
el1.type = 'text';
el1.name = 'txtRow'+lastRow; // for a unique name
el1.id = 'txtRow'+lastRow; // for a unique id
el1.size = 3;
cellRight1.appendChild(el1);

var cellRight2 = row.insertCell(2);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'txtRow';
el2.id = 'txtRow';
el2.size = 20;
cellRight2.appendChild(el2);

var cellRight3 = row.insertCell(3);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtRow';
el3.id = 'txtRow';
el3.size = 20;
cellRight3.appendChild(el3);

var cellRight4 = row.insertCell(4);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'txtRow';
el4.id = 'txtRow';
el4.size = 20;
cellRight4.appendChild(el4);

var cellRight5 = row.insertCell(5);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'txtRow';
el5.id = 'txtRow';
el5.size = 10;
cellRight5.appendChild(el5);

var cellRight6 = row.insertCell(6);
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'txtRow';
el6.id = 'txtRow';
el6.size = 20;
cellRight6.appendChild(el6);
}

</script>
</head>

<body>
<table id="tableId" width="600" border="1">

<tr>
<td><center>Item:</center></td>
<td><center>Qty:</center></td>
<td><center>Manuf.:</center></td>
<td><center>Part #:</center></td>
<td><center>Description:</center></td>
<td><center>List Price:</center></td>
<td><center>Total:</center></td>
</tr>
<tr id="trAdd">
<td ><input type="text" placeholder="Item" name="item" id="item"></td>
<td><input type="number" size="3" name="qty" id="qty"></td>
<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
<td ><input type="text" placeholder="Description" name="description" id="description"></td>
<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
<td><input type="text" placeholder="Total" name="total" id="total"></td>
</tr>
</table>

<input type="button" value="Add More Items" onclick='addRow()'><br /><br />

</body>
</html>

evilbugoy
06-21-2012, 03:49 AM
see changes in red also note that ID names must be unique


<html>
<head>

<script type="text/javascript">

function addRow()
{
var tbl = document.getElementById('tableId');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var row = tbl.insertRow(lastRow);

// right cell
var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txtRow';
el.id = 'txtRow';
el.size = 20;
cellRight.appendChild(el);

var cellRight1 = row.insertCell(1);
var el1 = document.createElement('input');
// el1.type = 'number'; // this is illegal
el1.type = 'text';
el1.name = 'txtRow'+lastRow; // for a unique name
el1.id = 'txtRow'+lastRow; // for a unique id
el1.size = 3;
cellRight1.appendChild(el1);

var cellRight2 = row.insertCell(2);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'txtRow';
el2.id = 'txtRow';
el2.size = 20;
cellRight2.appendChild(el2);

var cellRight3 = row.insertCell(3);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtRow';
el3.id = 'txtRow';
el3.size = 20;
cellRight3.appendChild(el3);

var cellRight4 = row.insertCell(4);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'txtRow';
el4.id = 'txtRow';
el4.size = 20;
cellRight4.appendChild(el4);

var cellRight5 = row.insertCell(5);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'txtRow';
el5.id = 'txtRow';
el5.size = 10;
cellRight5.appendChild(el5);

var cellRight6 = row.insertCell(6);
var el6 = document.createElement('input');
el6.type = 'text';
el6.name = 'txtRow';
el6.id = 'txtRow';
el6.size = 20;
cellRight6.appendChild(el6);
}

</script>
</head>

<body>
<table id="tableId" width="600" border="1">

<tr>
<td><center>Item:</center></td>
<td><center>Qty:</center></td>
<td><center>Manuf.:</center></td>
<td><center>Part #:</center></td>
<td><center>Description:</center></td>
<td><center>List Price:</center></td>
<td><center>Total:</center></td>
</tr>
<tr id="trAdd">
<td ><input type="text" placeholder="Item" name="item" id="item"></td>
<td><input type="number" size="3" name="qty" id="qty"></td>
<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
<td ><input type="text" placeholder="Description" name="description" id="description"></td>
<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
<td><input type="text" placeholder="Total" name="total" id="total"></td>
</tr>
</table>

<input type="button" value="Add More Items" onclick='addRow()'><br /><br />

</body>
</html>



why is it illegal to have the type as input type as number?
thank you for reminding me about the id's but my real problem has not been answered..

i want to have a javascript that will automatically create additional rows with an input type that has the same attributes in:


<tr id="trAdd">
<td ><input type="text" placeholder="Item" name="item" id="item"></td>
<td><input type="number" size="3" name="qty" id="qty"></td>
<td><input type="text" placeholder="Manufacturer" name="manuf" id="manuf"></td>
<td ><input type="text" placeholder="Part #" name="part" id="part"></td>
<td ><input type="text" placeholder="Description" name="description" id="description"></td>
<td><input type="text" placeholder="Price" size="10" name="price" id="price"></td>
<td><input type="text" placeholder="Total" name="total" id="total"></td>
</tr>

Old Pedant
06-21-2012, 04:27 AM
type="number" is only valid in HTML5, but given that you are also using placeholder, which is strictly HTML5, I would assume your code will never work in anything except HTML5, so why not try to use type="number"??

Question: Why do you use id's for your <form> fields, at all? They have virtually no use if you arentt using <label>s. Just get rid of the ids and use only names. It's okay to have multiple same names.

If you intend to process the page with PHP, you will need to append [] to all those multiple names, you know. Other server-side systems don't have that silly restriction.

Old Pedant
06-21-2012, 04:36 AM
This page worked correctly in Chrome:


<!DOCTYPE html5>
<html>
<body>
<form>
<table id="tableId" width="600" border="1">

<tr>
<td><center>Item:</center></td>
<td><center>Qty:</center></td>
</tr>
<tr id="trAdd">
<td ><input type="text" placeholder="Item" name="item"/></td>
<td><input type="number" size="3" name="qty"/></td>
</tr>
</table>

<input type="button" value="Add More Items" onclick='addRow()'><br /><br />
<input type="submit"/>
</form>
<script type="text/javascript">
function addRow()
{
var tbl = document.getElementById("tableId");
var row = document.createElement("tr");
var td = document.createElement("td");
var inp = document.createElement("input");
inp.placeholder = "Item"
inp.name = "item"
td.appendChild(inp);
row.appendChild(td);
td = document.createElement("td");
inp = document.createElement("input");
inp.type = "number";
inp.name = "qty"
inp.size = 3;
td.appendChild(inp);
row.appendChild(td);
tbl.appendChild(row);
}
</script>
</body>
</html>

The number fields were not handled properly by Firefox, but at least it allowed them.

MSIE 9 barfed, as Felgall predicted, on the type="number".

SO... If you are willing to limit the use of this page to Chrome, it looks like it will work just fine.

Old Pedant
06-21-2012, 04:38 AM
Oh...and I added the SUBMIT button so I could submit the <form> to itself and see in the query string that, indeed, all the fields and all the values I entered appear correctly.

evilbugoy
06-21-2012, 07:24 AM
thanks a lot Old Pendant!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum