JavaScript Form Issue

Discussion in 'JavaScript' started by 79383, Dec 21, 2009.

  1. #1
    So i have Completed Form Below i need it to have a drop-down fields in these categories Individual,Team,General,Occupational,Technical. I then need it to show a Confirmation page which they can print before submitting. Then after it Submits i need it to send an email to a static email address say
    that is in a .csv(Comma Seperated File) so it can be imported into a access Database. Below is the Code that i have Know
    <!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" xml:lang="en" lang="en"> 
    <head> 
    <link href="/style.css" rel="stylesheet" type="text/css" /> 
    <title>Skills Usa Registration</title> 
    <script type="text/javascript"> 
    //© 2009 Raproductions
    // Do not remove
    function addRowToTable()
    {
      var tbl = document.getElementById('tbl1300');
      var lastRow = tbl.rows.length;
      // if there's no header row in the table, then iteration = lastRow + 1
      var iteration = lastRow;
    //  var iteration = lastRow + 1;
      var row = tbl.insertRow(lastRow);
      
      //  cell 0
      var cell1 = row.insertCell(0);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'Name' + iteration;
      el.id = 'Name' + iteration;
      el.size = 30;
      cell1.appendChild(el);
      
      //cell 1
      var cell1 = row.insertCell(1);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'Individual' + iteration;
      el.id = 'Individual' + iteration;
      el.size = 30;
      cell1.appendChild(el);
      
      //cell 2
      var cell2 = row.insertCell(2);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'Team' + iteration;
      el.id = 'Team' + iteration;
      el.size = 30;
      cell2.appendChild(el);
      
       //cell 3
      var cell3 = row.insertCell(3);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'General' + iteration;
      el.id = 'General' + iteration;
      el.size = 30;
      cell3.appendChild(el);
      
      //cell 4
      var cell4 = row.insertCell(4);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'Occupational' + iteration;
      el.id = 'Occupational' + iteration;
      el.size = 30;
      cell4.appendChild(el);
      
      //cell 5
      var cell5 = row.insertCell(5);
      var el = document.createElement('input');
      el.type = 'text';
      el.name = 'Tech' + iteration;
      el.id = 'Tech' + iteration;
      el.size = 30;
      cell5.appendChild(el);
      
      }
    </script> 
     
    <style type="text/css"> 
    <!--
    .left {
    	text-align: left;
    }
    #apDiv2 {
    	position:absolute;
    	width:703px;
    	height:63px;
    	z-index:2;
    	left: 231px;
    	top: 31px;
    }
    #apDiv1 {	position:absolute;
    	width:200px;
    	height:115px;
    	z-index:1;
    	left: 4px;
    	top: 3px;
    }
    .black {
    	font-weight: bold;
    }
    .Copoyright {
    	font-size: 9px;
    }
    -->
    </style> 
    <form name="h" action="http://www.vansd.org/cgi-bin/FormMail.pl" method="post"> 
      <div id="apDiv1"><img src="\\hs5\RIVERVOL1\Users\FACULTY\colweb\PUBLIC.WWW\Skills USA/image001.png" width="224" height="147" alt="Skills Usa" /></div> 
      <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <div id="apDiv2"> 
      <p><strong>Southwest Washington</strong><strong> Skills USA</strong><br /> 
        <strong><u>Regional Conference  Registration and Invoice</u></strong><br /> 
        <em>Chapter Registration  Deadline:&nbsp;&nbsp; <u>January 29, 2010</u></em></p> 
      <p><strong>*State and National Member Dues and Regional  Registration must be paid before members can compete.</strong></p> 
    </div> 
    <p>&nbsp;</p> 
    <p>&nbsp;  </p> 
    <p> 
      <input type="hidden" name="sortorder" value="Name:, Individual, Team, Occupational, Tech "/> 
    </p> 
    <table width="989" height="190" border="0"> 
      <tr> 
      <th height="24" colspan="8" class="left" scope="row">School Information:</th> 
    </tr> 
    <tr> 
      <td>School Name:</td> 
      <td class="black"><input type="text" name="School Name:" id="School Name:" /></td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
    </tr> 
    <tr> 
      <td>School Address:</td> 
      <td class="black"><input type="text" name="School Address:" id="School Address:" /></td> 
      <td>City:</td> 
      <td><input type="text" name="City" id="City" /></td> 
      <td>State:</td> 
      <td><input type="text" name="State" id="State" /></td> 
      <td>Zip-Code:</td> 
      <td><input type="text" name="Zip-Code" id="Zip-Code" /></td> 
    </tr> 
    <tr> 
      <td>Advisor:</td> 
      <td class="black"><input type="text" name="Advisor" id="Advisor" /></td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
    </tr> 
    <tr> 
      <td>Program:</td> 
      <td class="black"><input type="text" name="Program:" id="Program:" /></td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
    </tr> 
    <tr> 
      <td>Po Number:</td> 
      <td class="black"><input type="text" name="Po Number:" id="Po Number:" /></td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td colspan="4"><strong>(Space provided for offices that require invoice  tracking, please create your own number as needed.)</strong></td> 
    </tr> 
    </table> 
    <table width="989" height="28" border="0"> 
      <tr> 
        <th height="24" class="left" scope="row">Student Information:</th> 
      </tr> 
    </table> 
    <table width="1216" id="tbl1300"> 
                    <tr> 
                      <td width="212" class="txtBase">Name:</td> 
                      <td width="212" class="txtBase">Individual:</td> 
                      <td width="212" class="txtBase">Team:</td> 
                      <td width="212" class="txtBase">General:</td> 
                      <td width="344" class="txtBase">Occupational:</td> 
                      <td width="344" class="txtBase"> Technical:</td> 
                    </tr> 
                   <tr> 
                      <td><input name="Name:" type="text" size="30" maxlength="30"></td> 
                      <td><input name="Individual" type="text" size="30" maxlength="30"></td> 
                      <td><input name="Team" type="text" size="30" maxlength="30"></td> 
                      <td><input name="General" type="text" size="30" maxlength="30"></td> 
                      <td><input name="Occupaional" type="text" size="30" maxlength="30" /></td> 
                      <td><input name="Tech" type="text" size="30" maxlength="30" /></td> 
                      <td>&nbsp;</td> 
        </tr> 
      </table> 
    <table width="989" height="28" border="0"> 
      <tr> 
        <td width="282">Total # of Students
          <input type="text" name="Total Number of Students:2" id="Total Number of Students:2" /></td> 
        <td width="65">X $7.00</td> 
        <td width="628" colspan="5">Amount Due:
          <input type="text" name="Amount Due:2" id="Amount Due:2" /></td> 
      </tr> 
    </table> 
    <p><strong></strong></p> 
    <p><strong>Please Review Information Before Submitting</strong>  </p> 
    <p>Important After Submission Print the Page</p> 
    <p> 
      <input type="hidden" name="recipient" value="Janine.Blackwell@vansd.org" /> 
      <input type="hidden" name="subject" value="Skills USA" /> 
      <input type="button" name="Add" value="Add Another Student" onclick="javascript: return addRowToTable();" /> 
      <input type="submit" name="submitButtonName" value="Submit" tabindex="5" /> 
      <input type="reset" name="Submit" value="Reset" /> 
      <input type="hidden" name="return_link_title" value="Return to Columbia River Home Page" /> 
      <input type="hidden" name="return_link_url" value="http://river.vansd.org/" /><input name="PRINT THIS PAGE" type="hidden" id="THIS IS THE INVOICE NUMBER" value="PRINT THIS PAGE THIS IS THE OFFICES INVOICE COPY KEEP FOR YOURE RECORDS" /> 
    </p> 
    <p class="Copyright">&copy;2009 Raproductions &amp; Coulumbia River High School </p> 
    </form> 
     
     
     
    </body> 
    </html> 
    Code (markup):
    Thank you
     
    79383, Dec 21, 2009 IP