UrbanDweller Posted January 30, 2012 Share Posted 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; } Link to comment https://forums.phpfreaks.com/topic/256024-form-wont-submit-cant-figure-out-why/ Share on other sites More sharing options...
UrbanDweller Posted January 30, 2012 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/256024-form-wont-submit-cant-figure-out-why/#findComment-1312501 Share on other sites More sharing options...
UrbanDweller Posted January 31, 2012 Author Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/256024-form-wont-submit-cant-figure-out-why/#findComment-1312821 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.