www.webdeveloper.com
Results 1 to 1 of 1

Thread: Javascript Array

Hybrid View

  1. #1
    Join Date
    Mar 2009
    Posts
    1

    Javascript Array

    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>
    Last edited by Kor; 03-05-2009 at 06:41 AM. Reason: wrap the code [code][/code]

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles