Results 1 to 2 of 2

Thread: Multi part form using JavaScript

  1. #1
    Join Date
    Aug 2006
    Posts
    28

    Multi part form using JavaScript

    hi,

    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


    Thanks!

  2. #2
    Join Date
    Aug 2006
    Posts
    28

    Exclamation

    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.)

    Code:
    <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){
    			switch(obj.type){
    			case "select-one":
    				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
    					alertMsg += " - " + fieldDescription[i] + "\n";
    				}
    				break;
    			case "select-multiple":
    				if (obj.selectedIndex == -1){
    					alertMsg += " - " + fieldDescription[i] + "\n";
    				}
    				break;
    			case "text":
    			case "textarea":
    				if (obj.value == "" || obj.value == null){
    					alertMsg += " - " + fieldDescription[i] + "\n";
    				}
    				break;
    			default:
    			}
    			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;
    	}else{
    		alert(alertMsg);
    		return false;
    	}
    }
    </script>
    <script type=text/javascript>//<![CDATA[
    // Multi Page form //
    var sections = new Array('stepOne', 'stepTwo', 'stepThree');
    function init() {
        show('stepOne');
        document.forms['contactform'].elements['name'].focus();
    }
    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';
            }
        }
    }
    //]]></script>
    </head>
    <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> 
    <br>
    <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>
    <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 
    contacted</OPTION></SELECT>
    <br> 
    <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>
    
    <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 
    tabIndex="10">
        <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 contacted</OPTION>
      </SELECT>
      <br>    
    <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>
    </DIV>
    </FORM>
    </body>
    Regards,
    Fiasst

Similar Threads

  1. how do I validate fields for this multi page form
    By dude9er in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 0
    Last Post: 15 Jan 2006, 01:18 AM
  2. multi part form validation
    By numbenator in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 04 Dec 2005, 10:47 AM

Posting Permissions

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