View Full Version : Multi part form using JavaScript

24 Oct 2006, 09:45 AM

I have a multi part PHP form that displays 3 DIVs, 1 at a time. You might have seen it over at dynamicdrive.com. Im also using a form checking script from DynamicD.. that displays a error prompt if fields are left empty. Well, Im working on combining the two. The 'Continue to next step' button in the example page below is ment to check that the fields are correct and if they are hide the 'stepOne' DIV and show the 'stepTwo' DIV in its place.

I cant get the image link to check the form fields and if filed out correctly, get the DIVs to hide and display as appropiate one.

All the code im working with is in the source. Please take a look.

The example form (http://www.realworksmedia.com/ztest)


26 Oct 2006, 05:47 PM
Im so close now. Please someone end the suffering :P

The form now checks if all fields are correct in step1 and if not it displays the error prompt. however when you click ok to that it continues to hide step1/show step2 before you get the chance to correct the mistake.

Here is the code:
(Im just working on getting step1 to work first.)

<script language="JavaScript">
//check form Step1 //
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("name", "email");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Full Name", "Valid Email Address");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";

if (alertMsg.length == l_Msg){
return true;
return false;
<script type=text/javascript>//<![CDATA[
// Multi Page form //
var sections = new Array('stepOne', 'stepTwo', 'stepThree');
function init() {
function show(section) {
for (var i = 0; i < sections.length; i++) {
if (sections[i] == section) {
document.getElementById(sections[i]).style.display = 'block';
} else {
document.getElementById(sections[i]).style.display = 'none';
<body onload=init();>
<H1>Contact Form</H1>
<FORM id=contactform action="">
<DIV id=stepOne>
<H2>Step 1 </H2>
<LABEL>Your Name?</LABEL> <INPUT name="name" class="memorize" id=name tabIndex="1">
<LABEL for=email>Your e-mail address?</LABEL> <INPUT name="email" class="memorize" id=email tabIndex="2">
<LABEL for=subject>Your reason for contacting us?</LABEL>
<SELECT name="reason" size=1 class="memorize" id=reason tabIndex="3">
<OPTION value=--- selected>Please choose</OPTION>
<OPTION value="Bad Link">I found a bad link.</OPTION> <OPTION
value="Problems with Site">I'm having problems with the Site</OPTION> <OPTION
value="Just Hello">I'm just saying hello.</OPTION> <OPTION
value="Work Proposal">I'd like to give you a job.</OPTION></SELECT>
<P><a href="#stepTwo" tabIndex="4" onclick="formCheck(contactform);return show('stepTwo');"><img src="images/nextstep2.gif" width="320" height="29" border="0"></a></P>
<DIV id=stepTwo>
<H2>Step 2 </H2>
<LABEL for=occupation>Your Occupation?</LABEL>
<INPUT class="memorize" id=occupation tabIndex="5"> <LABEL for=education>Level of
Education?</LABEL> <INPUT class="memorize" id=education tabIndex=6> <LABEL
for=preference>Preferred Method of Contact?</LABEL> <SELECT id=preference
tabIndex="7" size=1> <OPTION value=--- selected>Please choose</OPTION> <OPTION
value="Prefer Phone">Phone</OPTION> <OPTION
value="Prefer E-mail">E-mail</OPTION> <OPTION value="Prefer Postal">Postal
Mail</OPTION> <OPTION value="Prefer None">I prefer not to be
<P><a href="#stepOne" tabIndex="7" onclick="show('stepOne');return false;"><img src="images/backstep1.gif" width="150" height="29" border="0"></a> <a href="#stepThree" tabIndex="8" onclick="show('stepThree');return false;" onkeypress="show('stepThree'); return false;"><img src="images/nextstep3.gif" width="160" height="29" border="0"></a></P>

<DIV id=stepThree>
<H2>Step 3</H2>
<LABEL for=occupation>Hobbies?</LABEL>
<INPUT id=occupation tabIndex="8">
<LABEL for=education>Favorite Color ?</LABEL>
<INPUT id=education tabIndex="9">
<LABEL for=preference>Preferred Method of Contact?</LABEL>
<SELECT size=1 id=preference
<OPTION value=--- selected>Please choose</OPTION>
value="Prefer Phone">Phone</OPTION>
value="Prefer E-mail">E-mail</OPTION>
<OPTION value="Prefer Postal">Postal Mail</OPTION>
<OPTION value="Prefer None">I prefer not to be contacted</OPTION>
<p><a href="#stepTwo" tabindex="11" onclick="show('stepTwo');return false;"><img src="images/backstep2.gif" width="150" height="29" border="0"></a> <input type="image" src="images/submit.gif" width="160" height="29" border="0" alt="Submit Form" tabindex="12"></p>