Hi there, this is my first posting on here as im a newb in th js world.
Anyway i need some, well maybe a lot, of help.
I need to make a page which contains basically a table. The purpose of the table is simply to display information for other users to see. But i need users to be able to add to the table from the webpage (using a form). i.e. they fill in a form and click 'submit'. the js then adds a new row to the bottom of the table and fills in the details submitted. This is then saved in the table and will be displayed each time the page is loaded.
I've searched the forum and came across this thread javascript
penindex(450,350,'which i thought would set me on my way but i'm having troubles. I have updated some of the code to my requirements but now i'm stuck.
Firstly, i cant get it to write more than one row at a time, it just overwrites what it originally wrote. and secondly it doesnt save so every time i refresh the page i lose the details i added.
I'll post the page with script etc so you can see what i've done. Oh and the alerts in the script are just to help me debug so i knew what was working they wont be there in the end
Also i'm aware this would probably be easier done with asp but it must be done with html and js as i'm not able to use asp or databases.
Like i say i'm new to js so its probably something simple that i'm not aware of.
Hope all of that was clear.
Any help would be much appreciated.
Thanks
Pete
Heres what i've got so far:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title> Table </title>
<script language="JavaScript">
function addRow() {
var oRow;
var oCell1;
var oCell2;
var newnumber;
newnumber = dynatable.rows.length;
oRow = dynatable.insertRow();
oCell1 = oRow.insertCell();
oCell1.innerHTML = "<input type='text' name='item" + newnumber + "'>";
oCell2 = oRow.insertCell();
oCell2.innerHTML = "<input name='notes" + newnumber + "' type='text' size='75'>";
form1.numberRows.value++;
}
function test() {
var rows;
rows = form1.numberRows.value
alert(rows)
for (i=1; i<=rows; i++) {
var string='form1.item'+i+'.value';
var string2='form1.notes'+i+'.value';
alert(string + ' ' + string2)
document.all.daOne.innerHTML = '<table border="1"><tr><td style="text-align:center">'+string+'</td><td style="text-align:center">'+string2+'</td></tr></table>'
}
}
</script>
</head>
<body>
<form name="form1" method="POST" action="table.html">
<input type="button" name="Button" value="Add Row" onClick="addRow()">
<table border="1" id="dynatable">
<thead>
<tr bgcolor="powderblue">
<td><strong>Date</strong></td>
<td><strong>Notes</strong></td>
</tr>
</thead>
<tbody id="TheBody">
<tr>
<td><input type="text" name="item1"></td>
<td><input name="notes1" type="text" size="75"></td>
</tr>
</tbody>
</table>
<input type="button" name="Submit" value="Add Item(s)" onClick="test()">
<input type="hidden" name="MM_insert" value="form1">
<input name="numberRows" type="hidden" id="numberRows" value="1">
</form>
<hr />
<span id=daOne style="position:relative"> </span>
</body>
</html>
Anyway i need some, well maybe a lot, of help.
I need to make a page which contains basically a table. The purpose of the table is simply to display information for other users to see. But i need users to be able to add to the table from the webpage (using a form). i.e. they fill in a form and click 'submit'. the js then adds a new row to the bottom of the table and fills in the details submitted. This is then saved in the table and will be displayed each time the page is loaded.
I've searched the forum and came across this thread javascript
penindex(450,350,'which i thought would set me on my way but i'm having troubles. I have updated some of the code to my requirements but now i'm stuck.Firstly, i cant get it to write more than one row at a time, it just overwrites what it originally wrote. and secondly it doesnt save so every time i refresh the page i lose the details i added.
I'll post the page with script etc so you can see what i've done. Oh and the alerts in the script are just to help me debug so i knew what was working they wont be there in the end
Also i'm aware this would probably be easier done with asp but it must be done with html and js as i'm not able to use asp or databases.
Like i say i'm new to js so its probably something simple that i'm not aware of.
Hope all of that was clear.
Any help would be much appreciated.
Thanks
Pete
Heres what i've got so far:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
<html>
<head>
<title> Table </title>
<script language="JavaScript">
function addRow() {
var oRow;
var oCell1;
var oCell2;
var newnumber;
newnumber = dynatable.rows.length;
oRow = dynatable.insertRow();
oCell1 = oRow.insertCell();
oCell1.innerHTML = "<input type='text' name='item" + newnumber + "'>";
oCell2 = oRow.insertCell();
oCell2.innerHTML = "<input name='notes" + newnumber + "' type='text' size='75'>";
form1.numberRows.value++;
}
function test() {
var rows;
rows = form1.numberRows.value
alert(rows)
for (i=1; i<=rows; i++) {
var string='form1.item'+i+'.value';
var string2='form1.notes'+i+'.value';
alert(string + ' ' + string2)
document.all.daOne.innerHTML = '<table border="1"><tr><td style="text-align:center">'+string+'</td><td style="text-align:center">'+string2+'</td></tr></table>'
}
}
</script>
</head>
<body>
<form name="form1" method="POST" action="table.html">
<input type="button" name="Button" value="Add Row" onClick="addRow()">
<table border="1" id="dynatable">
<thead>
<tr bgcolor="powderblue">
<td><strong>Date</strong></td>
<td><strong>Notes</strong></td>
</tr>
</thead>
<tbody id="TheBody">
<tr>
<td><input type="text" name="item1"></td>
<td><input name="notes1" type="text" size="75"></td>
</tr>
</tbody>
</table>
<input type="button" name="Submit" value="Add Item(s)" onClick="test()">
<input type="hidden" name="MM_insert" value="form1">
<input name="numberRows" type="hidden" id="numberRows" value="1">
</form>
<hr />
<span id=daOne style="position:relative"> </span>
</body>
</html>
