Someone help me!!! Please! :O)

Sheltered · Feb 9, 2003

Hi people, hopefully someone can help me out here.
Its quite complicated to explain but hopefully its clear enough.

I have a web page which consists of a form, which is simply two text input fields.

When the form is completed and the 'Submit (Add Items)' button pressed the contents of the form are displayed in a table within the same page (just below the form).

A feature i need on this page is that you can add/display more than one row of form data at a time.
I actually found some javascript right here that allows me to click a button and a new row is created in the form.

So it looks to be working great, you complete the first row, click the 'Add Row' button and another row appears in the form.

However... i have two problems, im new to javascript so it could be a simple problem.
when i click the 'Add Item(s)' button, only one row is displayed on the page. If there are several rows in the form it will only display the last row in the new table.
I suspect that this is simply down to my bad coding.
The biggest problem i have is that i want to be able to save the data submitted by the form to a table in the web page, i.e. i add two rows of data then exit my browser. i want this data to be displayed when i next open this page, and i want to be able to add to it aswell.

Having searched and read many topics here and tutorials i now know that the saving bit cant be done with javascript.

I also know it can be done with ASP and a databse, however, i dont have the resources or knowledge to do it this way. Anyone know another way this can be saved and updated? Or can anyone provide the ASP coding to write it to a databse as i've never got round to learning ASP as yet.

I'll paste in the webpage i have so far so you can see where im at.

Any help with either these problems would be great.
Thanks
Pete

Ok, heres the page so far, what am i doing wrong??

<html>
<head>
<title> Insert and Save </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' id='item" + newnumber + "'>";
oCell2 = oRow.insertCell();
oCell2.innerHTML = "<input type='text' id='notes" + newnumber + "' 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.disp.innerHTML = '<table align="center" border="1"><tr><td align="center">'+string+'</td><td

align="center">'+string2+'</td></tr></table>'
}
}
</script>
</head>
<body>
<form name="form1" method="POST">
<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" id="item1"></td>
<td><input id="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="forma">
<input name="numberRows" type="hidden" id="numberRows" value="1">
</form>
<hr />

<span id="disp" style="position:relative"> </span>

</body>
</html>

cian · Feb 10, 2003

Referring to your main proble, it's way over my head but basically yes, you cannot do that with javascript. You definitly need some server side script. Asp will work as you mention but so will php or perl for example.
All you need is a basic script that will write the submitted details to a database or flat file, then read those values and echo them into your table.

Devshed.com have some good articles on how to write/read to/from databases and flat files. A quick search on google for "content management" or other such scripts will give you lots of options.

É
::

http://www.endamcg.com

harmmeijer · Feb 10, 2003

To remember the values after loading you need to set and read a cookie, I don't have code for that yet. The other problem is that you set the innerHTML within the loop so only the last row is displayed, here is a working code.

<html>
<head>
<title> Insert and Save </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' id='item" + newnumber + "'>";
oCell2 = oRow.insertCell();
oCell2.innerHTML = "<input type='text' id='notes" + newnumber + "' size='75'>";
form1.numberRows.value++;
}

function test() {
var rows;
var arrContent = new Array();
arrContent[arrContent.length ] = '<table align="center" border="1">';
rows = form1.numberRows.value
//alert(rows)
for (i=1; i<=rows; i++) {
var string= document.getElementById('item'+i).value;
var string2=document.getElementById('notes'+i).value;
//alert(string + ' ' + string2)
arrContent[arrContent.length] = '<tr><td align="center">';
arrContent[arrContent.length] = string;
arrContent[arrContent.length] = '</td><td align="center">';
arrContent[arrContent.length] = string2;
arrContent[arrContent.length] = '</td></tr>';
}
arrContent[arrContent.length]='</table>';
document.all.disp.innerHTML = arrContent.join("&quot

;
}
</script>
</head>
<body>
<form name="form1" method="POST">
<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" id="item1"></td>
<td><input id="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="forma">
<input name="numberRows" type="hidden" id="numberRows" value="1">
</form>
<hr />

<span id="disp" style="position:relative"> </span>

</body>
</html>

harmmeijer · Feb 10, 2003

Sorry, I didn't read your question correctly. You want to save to a database. This works with IE 6:

To insert data in a database you can use ADO on windows, here is an example using access 2000:

string1 = "hello";
string2 = "bye";
var conn = new ActiveXObject("ADODB.Connection&quot

;
conn.Open("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\\db1.mdb;Persist Security Info=False&quot

;
conn.Execute("insert into

([field1],[field2]) values ('"+string1+"','"+string2+"')&quot

;

In the strings you should replace ' with ''.
If the first string is a data you should not let the user fill this out but use a popup calendar.

When loading the page you have to open a recordset and fill an array with the data, then display it.

I don't have time to write the code now so you have to try this yourselve.

http://www.geocities.com/harm_meijer/opencal.htm

Sheltered · Feb 10, 2003

Thanks to you both, much appreciated. I'll have a play around and hopefully i can suss it out.
[wiggle]

cheers again

Pete

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Someone help me!!! Please! :O)

Sheltered

Programmer

cian

Technical User

harmmeijer

Programmer

harmmeijer

Programmer

Sheltered

Programmer

Similar threads

Part and Inventory Search

Sponsor