Form wont submit? Cant figure out why.

UrbanDweller · January 30, 2012

Hey all,

I have a form below that doesnt want to submit at the end after all text inputs have be verified not empty etc. I have parts of the form inside hidden divs that a displayed and hidden on the onclick of the next and back button.

Since this project has been my first real attempt at js I seem to miss a lot of common errors I hope some of you could pick up. I have listed below: HTML, External JS, External CSS.

Please have a look the onsubmit handler and anon function at the top of the js script which is where i thought the error could be but im not too sure now. Sorry for the mass ammount of code i didnt know whether to show all or not.

HTML with links to external js and css

<!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>Untitled Document</title>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="wrapper">
<div id="formContent">
<form id="infoForm" name="infoForm" method="POST" action="formCompleted.html">
<div id="form">
<div id="form_1" class="activeForm">
<table class="table" cellspacing="4">
<tr>
    	<td>
        	<label for="firstName">First name:</label>
            <input name="firstName" pattern="text" id="firstName" type="text" class="text" tabindex="100"/>
        </td>
   	</tr><tr>
    	<td>
        	<label for="lastName">Last name:</label>
            <input name="lastName" pattern="text" id="lastName" type="text" class="text" tabindex="110" />
        </td>
   	</tr><tr>
    	<td>
            <label for="dob">DOB:</label>
            <input name="dob" id="dob" pattern="text" type="text" class="text" tabindex="120" />
        </td>
   	</tr><tr>
    	<td>
            <label for="email">Email:</label>
            <input name="email" id="email" pattern="text" type="text" class="text" tabindex="130" />
        </td>
   	</tr><tr>
    	<td>
            <label for="homePhone">Home phone:</label>
            <input name="homePhone" id="homePhone" pattern="text" type="text" class="text" tabindex="140" />
        </td>
   	</tr><tr>
    	<td>
            <label for="mobile">Mobile:</label>
            <input name="mobile" id="mobile" type="text" pattern="text" class="text" tabindex="150" />
        </td>
   	</tr>
</table>
</div>
<div id="form_2" class="disabledForm">
<table class="table" cellspacing="4">
<tr>
    	<td>
        	<label for="streetNo">Street No:</label>
            <input name="streetNo" id="streetNo" type="text" class="text" tabindex="100" />
        </td>
   	</tr><tr>
    	<td>
        	<label for="streetName">Street name:</label>
            <input name="streetName" id="streetName" pattern="text" type="text" class="text" tabindex="110" />
        </td>
   	</tr><tr>
    	<td>
            <label for="suburb">Suburb:</label>
            <input name="suburb" id="suburb" pattern="text" type="text" class="text" tabindex="120" />
        </td>
   	</tr><tr>
    	<td>
            <label for="city">City/Town:</label>
            <input name="city" id="city" pattern="text" type="text" class="text" tabindex="130" />
        </td>
   	</tr><tr>
    	<td>
            <label for="zipCode">Zip code:</label>
            <input name="zipCode" id="zipCode" pattern="zip" type="text" class="text" tabindex="140" />
        </td>
   	</tr>
</table>
</div>
<div id="form_3" class="disabledForm">
<table class="table" cellspacing="4">
<tr>
    	<td>
        	<label for="driverLicence">Drivers licence:</label>
            <input name="driverLicence" id="driverLicence" type="text" class="text" tabindex="100" />
        </td>
   	</tr><tr>
    	<td>
        	<label for="partner">Live with partner:</label>
            <select name="partner" id="partner" class="selector" tabindex="110" >
            	<option value="">---</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </td>
   	</tr><tr>
    	<td>
        	<label for="children">Children:</label>
            <select name="children" id="children" class="selector" tabindex="120" >
            	<option value="">---</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </td>
   	</tr><tr>
    	<td>
            <label for="city">City/Town:</label>
            <input name="city" id="city" type="text" class="text" tabindex="130" />
        </td>
   	</tr><tr>
    	<td>
            <label for="zipCode">Zip code:</label>
            <input name="zipCode" id="zipCode" type="text" class="text" tabindex="140" />
        </td>
   	</tr>
</table>
</div>
<div id="form_4" class="disabledForm">
<table class="table" cellspacing="4">
<tr>
    	<td>
        	<label for="companyName">Company name:</label>
            <input name="companyName" id="companyName" type="text" class="text" tabindex="100" />
        </td>
   	</tr><tr>
    	<td>
        	<label for="companyAddress">Last name:</label>
            <input name="companyAddress" id="companyAddress" type="text" class="text" tabindex="110" />
        </td>
   	</tr><tr>
    	<td>
            <label for="companyPhone">Company Phone:</label>
            <input name="companyPhone" id="companyPhone" type="text" class="text" tabindex="120" />
        </td>
   	</tr><tr>
    	<td>
        	<label for="industry">Industry:</label>
            <select name="industry" id="industry" class="selector" tabindex="130">
            	<option value="">---</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </td>
   	</tr><tr>
    	<td>
            <label for="companyPosition">Position:</label>
            <input name="companyPosition" id="companyPosition" type="text" class="text" tabindex="140" />
        </td>
   	</tr><tr>
    	<td>
            <label for="companyEmpLength">Length of employment:</label>
            <input name="companyEmpLength" id="companyPosition" type="text" class="text" tabindex="150" />
        </td>
   	</tr>
</table>
</div>
<div class="btn">
<div class="subBtn">
<input type="button" id="nxtBtn" name="next" class="btnDisplay" value="Next" tabindex="200"/>
<input type="submit" id="submitFrm" name="submit" class="btnHide" value="Submit" tabindex="200"/>
</div>
<div class="subBtn">
<input type="button" id="bckBtn" class="btnHide" name="back" value="Back" tabindex="210"/>
</div>
</div>
</div>
</form>
</div>
</div>
</body>
</html>

Javascript

// JavaScript Document
function validateForm(){
var f = document.getElementById("infoForm");
f.onsubmit = function(){ 	 
	var div = document.getElementById("form_4");
	var divInputs = div.getElementsByTagName("input");
	var inputPass = true;
	for(var i = 0; i < divInputs.length; i++){
		if(divInputs[i].className == "text" || divInputs[i].className == "error"){
			inputPass = false;
			divInputs[i].className = "error";
		}	
	}
	if(inputPass == false){
		alert("Please edit the red highlighted inputs");
		return false;
	}else{
		return true;
	}
};
}


function nextPage(button, f){
var forms = new Array("form_1","form_2","form_3","form_4");
var formLength = forms.length - 1;
for(var i = 0; i < forms.length; i++){
	if(document.getElementById(forms[i]).className == "activeForm"){ 
		var div = document.getElementById(forms[i]);
		var divInputs = div.getElementsByTagName("input");
		break;
	}
}

var inputPass = true;
for(var ii = 0; ii < divInputs.length; ii++){
	if(divInputs[ii].className == "text" || divInputs[ii].className == "error"){
		inputPass = false;
		divInputs[ii].className = "error";
	}	
}
if(inputPass == false){
	alert("Please edit the red highlighted inputs");
	return false;
}else{
		var nextForm = i+1;
		if(nextForm < formLength){
			document.getElementById("bckBtn").className = "btnDisplay";
			document.getElementById(forms[i]).className = "disabledForm";
			document.getElementById(forms[nextForm]).className = "activeForm";
			document.getElementById("submitFrm").className = "btnHide";
			return;
		}else if(nextForm == formLength){
			document.getElementById("submitFrm").className = "btnDisplay";
			document.getElementById("nxtBtn").className = "btnHide";
			document.getElementById(forms[i]).className = "disabledForm";
			document.getElementById(forms[nextForm]).className = "activeForm";
		}
}
}

function previousPage(button){
forms = new Array("form_1","form_2","form_3","form_4");
for(var i = 0; i <= forms.length; i++){
	if(document.getElementById(forms[i]).className == "activeForm"){
		var previousForm = i-1;
		if(i == 0){
			document.getElementById("bckBtn").className = "btnHide";
			document.getElementById("nxtBtn").className = "btnDisplay";
			document.getElementById("submitFrm").className = "btnHide";
			return;	
		}
		if(i > 1){
			document.getElementById(forms[previousForm]).className = "activeForm";
			document.getElementById(forms[i]).className = "disabledForm";
			document.getElementById("submitFrm").className = "btnHide";
			document.getElementById("nxtBtn").className = "btnDisplay";
			document.getElementById("bckBtn").className = "btnDisplay";
			return;
		}else if(i == 1){
			document.getElementById("bckBtn").className = "btnHide";
			document.getElementById(forms[i]).className = "disabledForm";
			document.getElementById(forms[previousForm]).className = "activeForm";
			return;			
		}
	}
}

}

function textCheck(element, f){
for(var i = 0; i < f.elements.length; i++){
	var e = f.elements[i].id
	if(e == element.id){
		if(element.value == ""){
			element.className = "error";
		}else{
			if(f.elements[i].pattern){
				var pattern = f.elements[i].pattern;
				checkPatterns(pattern, i, element, f);
			}else{
				element.className = "pass";		
			}	
		}
	}
}
}

function checkPatterns(pattern, i, element, f){
if(pattern == "text") var RE = new RegExp(/[a-zA-Z]/);
if(pattern == "dob") var RE	= new RegExp(/[0-9]/);
if(pattern == "email") var RE = new RegExp(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/) ;
if(pattern == "zip") var RE = new RegExp(/[0-9]/);
if(pattern == "homePhone") var RE = new RegExp(/[0-9]{9}/);
if(pattern == "mobilePhone") var RE = new RegExp(/[0-9]{10,12}/);
	var REvalue = f.elements[i].value;
	if(RE.test(REvalue)){
		element.className = "pass";
	}else{
		element.className = "error";
	}
	return;
}

function addHandlers(){
// Loop through all the elements in the form.
var f = document.getElementById("infoForm");
for(var i = 0; i < f.elements.length; i++) {
var e = f.elements[i];
	if(e.type == "text"){
		e.onblur = function( ) { textCheck(this, f); }
	}else if(e.name == "next"){
		e.onclick = function( ) { nextPage(this, f); }
	}else if(e.name == "back"){
		e.onclick = function( ) { previousPage(this);}
	}
}
}

window.onload = function(){
addHandlers();
validateForm();

}

CSS

@charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;	
}
.activeForm {
display: block;
width: 400px; height: 250px;
position: relative;
}

.disabledForm {
display: none;
width: 400px; height: 300px;
position: relative;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
margin: 20px auto 0px auto;
}

#formContent {
position: relative;
margin: 0px auto 0px auto;
	border: solid 2px #333;
width: 400px;
height: 300px;
}

#formContent form#infoForm label {
font-size: .9em;
display: inline;
float: none;
}

#formContent form#infoForm input.text {
width: 200px;
height: 18px;
}

#formContent form#inforForm .select {
width: 200px;
height: 18px;
}

.table{
position: relative;
width: 400px;
margin: 0px auto 0px auto;
padding: 30px 30px 0px 0px;
}

.table tr td {
float: right;
padding: 0px 10px 0px 0px;	
}

.error{
border: solid 1px #C00;
background-color: #FFECEC;
width: 202px;
height: 20px;
}

.pass{
border: solid 1px #0C0;
background-color: #D8FECB;
width: 202px;
height:20px;
}
.form {
height: 270px;
}

.btn {
position: relative;
width: 100%;
top: 0px;
padding: 0px 0px 0px 0px;
height: auto;
}

.btnDisplay {
display: block;	
}

.btnHide {
display: none;
}

.subBtn {
float: right;
width: auto;	
}

UrbanDweller · January 30, 2012

Note: Form submits if u change the 1st div class to disabledForm and 4th too activeForm and display submit. This allows the form to submit without going through all hidden divs input if i don't validate them.

UrbanDweller · January 31, 2012

WOOT I solved it. For anyone who wants to know lol it was the pattern attribute i added to inputs was clashing with some html/browser syntax. The reason the page was working with at the last div was due to it not checking the inputs with pattern attribute.

Sign In

Form wont submit? Cant figure out why.

Recommended Posts

UrbanDweller

Link to comment

Share on other sites

UrbanDweller

Link to comment

Share on other sites

UrbanDweller

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information