JavaScript Form Issue

**79383** · 12-21-2009, 11:35 PM

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
Ra@Raproductions.co.cc 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

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" 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>

Thank you

**X96 Web Design** · 12-22-2009, 07:50 AM

For the emailing and submission handling, it would be easier to use a server-side language such as PHP or ASP.

I don't think you can send email from plain JavaScript, I'm pretty sure it has to be from a server-side script (PHP, ASP, etc).

I'm not that great with complicated JS, so I'm not going to try to change anything you've posted...

Cheers,
X96

**79383** · 12-22-2009, 08:03 AM

I am doing his as a favor to a school district so they use a form called form mail ehioch is found here http://www.scriptarchive.com/formmail.html. I need the js to do the dropdown boxes

Thread: JavaScript Form Issue

Thread Tools

Search Thread

JavaScript Form Issue

Server side include

Bookmarks

Bookmarks

Posting Permissions