Jump to content

UrbanDweller

Members
 View Profile  See their activity

  • Posts

    123

  • Joined

  • Last visited

 Content Type 

Everything posted by UrbanDweller

  1. UrbanDweller
    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; }
  2. UrbanDweller
    its just that i when i go through form to test it once i get to the final div when the submit becomes unhidden its wont even register the onsubmit eventhandler.
  3. UrbanDweller
    Hey, Are you just wanting to check and deselect ALL of your checkboxes in the form or per day only?
  4. UrbanDweller
    Hey, Since working on a form I thought i could make it easier to just create a single from with hidden divs ontop of each other so each time u finishing fill that inputs divs out u pres next to show next div and hide the other and so on untill the last div where i submit it. But it seems as if it doesnt want to submit this and i was wondering if this was for security reasons or is my brain dumb? Thanks
  5. UrbanDweller
    Oh thanks a lot man that made everything work smoothly, Im trying to figure out exactly why that made such a big difference?
  6. UrbanDweller
    Hey the script in the second code box is the whole lost of code that runs after a button click and the for loop below in first code box is where Im currently having trouble. The loop runs though fine checking the if statement and executing the code but once the loop finishes the script wont continue not even a simple alert. The anouying thing is that if i put a break at the end of the if statment and end the loop that way it will continue through the rest of the script fine, unfortunately i need the loop to finish Could someone please help a brother out no google search is helping me. Buggy for loop: 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("pppp"); return false; }else{ Whole script executed by button onClick: 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("pppp"); 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"; return; } } } Thanks for your time!
  7. UrbanDweller
    Check out this w3schools reference. http://www.w3schools.com/jsref/met_win_open.asp
  8. UrbanDweller
    Oh bugger sorry bout double post quote not modify
  9. UrbanDweller
    <h1 id="getH1"><?php echo JHTML::link($product->link, $product->product_name); ?></h1> var text = document.getElementById("getH1").innerHTML; alert(text); see if that works?
  10. UrbanDweller
    Well congratulations you just made me as confused as you
  11. UrbanDweller
    Hey, I have been playing around with forms a Javascript validation scripts for the past week and have hit a few brick walls when coming to the onsubmit event. Below I have an anonymous function for the submission of the form. // JavaScript Document var valid = "valid"; function validateForm(){ var f = document.getElementById("infoForm"); f.onsubmit = function() { errorCheck(f); if(valid == "valid"){ return true; }else { document.getElementById("form_1").className = "activeForm"; document.getElementById("form_4").className = "disabledForm"; valid = "valid"; previousPage(); return false; } } } function errorCheck(f){ for(var i = 0; i < f.elements.length; i++) { var e = f.elements[i]; if(f.elements[i].type == "text" && f.elements[i].className == "text" || f.elements[i].type == "text" && f.elements[i].className == "error"){ f.elements[i].className = "error"; valid = "invalid"; }else{ continue; } } return; } window.onload = function(){ addHandlers(); validateForm(); } Bugs/question The main issue is that my form will never submit, it will only submit if variable valid == "valid" else it returns false and returns user to first form. I check each text input on the fly and change its css class to "pass" if its value is not empty else it will change to error or stay as text if not touched. So im pretty sure the issue isn't the error checker. In my week of learning javascript form submission has been my greatest enemy!! On that note is there so many functions/code that can be used on and onsubmit event? How safe is javascript from hacking/injecting when using it for form validation etc or should i stick to php for the safer option for it and bugger the frilly js? Thanks for taking the time to read, any help would be great to help me master this form business!!
  12. UrbanDweller
    http://www.youtube.com/watch?NR=1&feature=endscreen&v=hTP31OTZxtU
  13. UrbanDweller
    Hey all the variables are valid and not empty its just that it seems that "WHERE `unit`='$id' " doesnt like $id to be two words with a spaces thats the ONLY problem. Im not going to post the whole code in as the rest of the code works fine when using single word variable $id. I have change a single word column that works fine and changed it to two words which it will then not input the data in the update query. i just want to know how to allow it to use it.
  14. UrbanDweller
    Hey, Like my title says I cant get a mysql update to fetch and update row depending on what the where clause is equal too. it updates fine if the variable is one word but 2+ words it just doesnt input the data. $num=0; foreach($_SESSION['colid'] as &$id){ if($num > 2){ $data = $_POST[$id]; mysql_query("UPDATE `$table` SET `$colname`='$data' WHERE Unit='$id'") or die("error".mysql_error()); } $num++; $_SESSION['colid'] is an array of all the table column names which i have made the same for each row of data under Unit. so wen $id = word, it updates fine but $id = two words, it wont update. Ive tried `$id` | '`$id `' | ('$id') pretty much everything thats worked before. Is this fixable or do i need to create columns with underscores instead of spaces eg. two_words then use a php function to swap _ to a space? Thanks
  15. UrbanDweller
    Thanks for the tips guys, I think i might start off by writing each page and what its functionallity, main variables it will use and what pages it passes variables to. Kind of like a sequence diagram. I would just like to have a plan in front of me when starting probably my biggest project just to know where variable are used, variables that are passed to start other pages and a overall final idea to refer back to.
  16. UrbanDweller
    Hey, I did a coding course for an OOP called Jade, we got taught to plan the layout of the code using UML diagrams and sequence diagrams. I checked Visio but doesn't seem to support PHP at a glance. What i would like to know is there any kind of way to plan a PHP project using techniques like UML etc. Plus what kind of planning do you do before jumping head first into coding unless your into that If you know of any useful sites or software for ways to plan a PHP project please post. Thanks a lot
  17. UrbanDweller
    Resolved: Found the code i was looking for javascript now looks like soo. <script type="text/javascript"> function radio(radioObject) { var value = null for (var i=0; i<radioObject.length; i++) { if (radioObject[i].checked) { value = radioObject[i].value; document.links["editlink"].href = "edit_row.php?rowid="+radioObject[i].value; document.links["deletelink"].href = "index.php?delete="+radioObject[i].value; break ; } } return value } </script> was looking for "document.links["deletelink"].href" i think i now have a new love for javascript really makes forms and submissions easy.
  18. UrbanDweller
    thanks for posting that code but i found this javascript code last night before i saw this post and have got it to alert the result once button is clicked but i need to know how to now send that radio variable thru the button url via onclick. Example: <input type=button value='Edit' onclick='location.href=\"edit_row.php?row=javascript:getRadioValue(value)\"'> This is of course wrong as Ive now been working with js for 3 hours. code: function getRadioValue(radioObject) { var value = null for (var i=0; i<radioObject.length; i++) { if (radioObject[i].checked) { value = radioObject[i].value; break ; } } return value } echo "<td><input type='radio' id='rowid' value='".$row."' name='row'></td>"; echo "<input type=button value='Edit' onclick="[b]Unknown_JS_Code[/b]">";
  19. UrbanDweller
    I unfortunetly dont know js, but from other validators ive seen around im sure its not to hard to modify one with a bit of work. I use this one to send new column name to another page but dont know how to modify for multipule radio buttons <script type="text/javascript"> function ftest(){ window.location="add_row.php?name="+document.getElementById('name').value; } function getRadioValue(id) { var radioBtn = document.getElementById(id); } </script>
  20. UrbanDweller
    Hey all, I have a radio button for each table row with a value corresponding to the row, I then have two hrefs edit/delete which goes to different pages. What i want to do is send the corresponding clicked radio button value with either the edit or delete href. At the moment im trying to send the value through the url using the get method but the value doesnt pass to the url once clicked. How can i instantly validate a radio button clicked on the default page so i can send it through to the url before its clicked? The variable i want to send through the radio button value is $row Note: This is not the whole script only the loop that creates the radio buttons and hrefs. So the form tags etc are all included in the whole script. function row_loop(){ $rownum = 0; $row = 1; for($currentrow=0; $currentrow < $_SESSION['rows']; $currentrow++){ echo "<tr>"; echo "<td><input type='radio' name='rowid' value='$row'></td>"; foreach($_SESSION['colid'] as &$value){ $column = mysql_query("SELECT $value FROM weight_con ORDER BY UID"); $data = mysql_result($column, $rownum); if(empty($data)){ echo "<td></td>"; }else{ echo "<td>".$data."</td>"; } } echo "</tr>"; $rownum++; $row++; } echo "</table>"; add_unit($row); } function add_unit($row){ echo "<a href='edit_row.php'>Edit</a> / <a href='index.php'>Delete</a>"; echo "</form>"; } This is what it looks likes to give an idea of what i mean
  21. UrbanDweller
    Hey ive been wanting to know how to make a function call another function which will then create a variable which i can send back to first function where i can use it. I tried somthing like this <?php a(); function a($wall) { b(); echo $wall; } function b() { $wall = "test"; #a($wall); } ?> Thats what i tried but ofcourse didnt work, how would i go about doing this? Thanks.
  22. UrbanDweller
    Thanks for that, one extra thing is how can i send a variable made inside the executed function back to the parent function loop without resetting the while loop?
  23. UrbanDweller
    Hey Before I start playing around with some code I want to know if it is possible to call a function inside a while loop that will call echo a some stuff then return to the loop it got called by? thanks
  24. UrbanDweller
    Hey, Im trying make a way to check an input to make sure it only consists of "1,2,3,4,5,6,7,8,9,0 and . " I thought i could explode the number and check it to an array that has "1,2,3,4,5,6,7,8,9,0 and . " I havent worked with arrays before so i dont quite know how they work or to go about this? Any ideas cause im sure im not the first to ask for something like this Thanks
  25. UrbanDweller
    Hey guys, Im was trying to put the finishing touches on my site last night with css when I noticed nothing is changing when i save and view in chrome. Its even is using images i had ages ago that don't exist in the location anymore. Code used: HTML CSS PHP Software used: Dreamweaver cs5 WAMP Google Chrome any help would be great as ive hit a brick wall
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.