Menu
I am new to javascript and am having trouble making a form. I would like to have an array in my form that a user can push a button to add a new row so that they can add a new student. This is what I have so far:
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>McGregor Memorial EMS</title>
<style type=”text/css”>
<!–
.style1 {font-style: italic}
.style3 {font-style: italic; color: #FFFFFF;}
–>
</style>
</head>
<body>
<style type=”text/css”>
</style>
<form name=”heartsavercprForm” id=”heartsavercprForm” method=”post” action=”http://www.dac.unh.edu/cgi-bin/cgiemail/institute/class-materials/heartsaver_aed.txt”>
<table cellspacing=”0″ cellpadding=”8″ style=”border:1px solid #000;”>
<tr><th bgcolor=”#000000″ colspan=”7″><span class=”style3″>Class Roster</span></th></tr>
<tr>
<td><div align=”center”><em>Name</em><br>
(to appear on card)</div></td>
<td colspan=”2″><div align=”center”><em>Address</em></div></td>
<td colspan=”2″><div align=”center”><em>Email</em></div></td>
<td><div align=”center”><em>Complete/Incomplete</em></div></td>
<td><div align=”center”><em>Remediation/Date Completed</em></div></td>
</tr>
<tr>
<td align=”center”><input type=”text” name=”name1″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”address1″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”email1″ size=”25″></td>
<td align=”center”><input type=”text” name=”complete1″ size=”25″></td>
<td align=”center”><input type=”text” name=”remed1″ size=”25″></td>
</tr>
<tr>
<td align=”center”><input type=”text” name=”name2″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”address2″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”email2″ size=”25″></td>
<td align=”center”><input type=”text” name=”complete2″ size=”25″></td>
<td align=”center”><input type=”text” name=”remed2″ size=”25″></td>
</tr>
<tr>
<td align=”center”><input type=”text” name=”name3″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”address3″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”email3″ size=”25″></td>
<td align=”center”><input type=”text” name=”complete3″ size=”25″></td>
<td align=”center”><input type=”text” name=”remed3″ size=”25″></td>
</tr>
<tr>
<td align=”center”><input type=”text” name=”name4″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”address4″ size=”25″></td>
<td align=”center” colspan=”2″><input type=”text” name=”email4″ size=”25″></td>
<td align=”center”><input type=”text” name=”complete4″ size=”25″></td>
<td align=”center”><input type=”text” name=”remed4″ size=”25″></td>
</tr>
<tr>
<td align=”center” colspan=”7″><input type=”submit” name=”submit” value=”Submit” /></td></tr>
</table>
</form>
</body>
</html>
this is an example of my javascript code, but i would like it to be able to span the 5 columns. Any help would be greatly appreciated.
[code]
<script type=”text/javascript”>
var arrInput = new Array(5);
var arrInputValue = new Array(5);
function addInput() {
arrInput.push(arrInput.length);
arrInputValue.push(“”);
display();
}
function display() {
document.getElementById(‘parah’).innerHTML=””;
for (intI=5;intI<arrInput.length;intI++) {
document.getElementById(‘parah’).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);
}
}
function saveValue(intId,strValue) {
arrInputValue[intId]=strValue;
}
function createInput(id,value) {
for (i=0;i<4;i++) {
return “<p><input type=’text’ id=’textBox”+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value='”+ value +”‘ size=’25’></p>”;
}
}
</script>
</head>
<body>
<form action=”” method=”post” name=”form” id=”form”>
<p><input name=”textBox1″ type=”text” size=”25″></p>
<p><input name=”textBox2″ type=”text” size=”25″></p>
<p><input name=”textBox3″ type=”text” size=”25″></p>
<p><input name=”textBox4″ type=”text” size=”25″></p>
<p id=”parah”> </p>
<p align=”center”><a href=”javascript:addInput()”>Add new student</a> <input name=”submitBtn” type=”submit” value=”Submit”></p>
</form>
</body>
</html>