Javascript Array

**joe shmo** · 03-04-2009 07:01 PM

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">&nbsp;</p>
    <p align="center"><a href="javascript:addInput()">Add new student</a> &nbsp;&nbsp;&nbsp; <input name="submitBtn" type="submit" value="Submit"></p>
    </form>
</body>
</html>

Thread: Javascript Array

Thread Tools

Display

Threaded View

Javascript Array

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions