margaux Posted May 10, 2012 Share Posted May 10, 2012 I don't understand how to use e - so I've created a small form to test my understanding of event handling. The form requires a radio button to be checked. If I submit the form without checking a button the error message appears but then the form appears to be locked and I can't check a button. Firebug stops at this line U.stopDefault(e); which seems correct. Do I need to reset something? HTML <body> <form id="optInForm" method="post" action="optIn.php"> <fieldset><legend>Agree</legend> <label for="yes">Yes </label><input type="radio" name="optIn" value="TRUE" /> <label for="no">No </label><input type="radio" name="optIn" value="FALSE" /> <input type="submit" value="submit" id="submit"/> <input type="hidden" name="submitted" value="TRUE" /> <div id="errMsg"></div> </fieldset> </form> <script type="text/javascript" src="optIn.js"></script> <script type="text/javascript" src="utilities.js"></script> </body> optIn.js function checkForm() { 'use strict'; var optIn = document.getElementsByName('optIn'); var msg = ''; var chosen = null; for (var i=0, il = optIn.length; i<il; i++) { if (optIn[i].checked){ chosen = optIn[i].value; } } if (chosen === null) { msg='Please select Yes or No'; U.setText('errMsg', msg); U.stopDefault(e); } else { return true; } } // end checkForm function window.onload=function(){ 'use strict'; U.addEvent(U.$('optInForm'),'submit', checkForm); }; utilities.js var U = { $: function(id) { 'use strict'; if (typeof id =='string'){ return document.getElementById(id); } }, // end $ method setText: function(id, message) { 'use strict'; if ((typeof id == 'string') && (typeof message == 'string')) { var output = this.$(id); if (!output) return false; if (output.textContent !== undefined) { output.textContent = message; } else { output.innerText = message; } return true; } }, //end setText method addEvent: function(obj, type, fn) { 'use strict'; if (obj && obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj && obj.attachEvent) { obj.attachEvent('on' + type, fn); } }, //end addEvent method removeEvent: function(obj, type, fn) { 'use strict'; if (obj && obj.removeEventListener) { obj.removeEventListener(type, fn, false); } else if (obj && obj.detachEvent) { obj.detachEvent('on' + type, fn); } }, //end removeEvent method stopDefault: function(e) { 'use strict'; e = e || window.event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } return false; } // end stopDefault method }; // end U class def Link to comment Share on other sites More sharing options...
Larry Posted May 11, 2012 Share Posted May 11, 2012 You're close, but the checkForm() function is the one that receives the event object and it's in that function that you have to determine where e comes from: function checkForm(e) { 'use strict'; e = e || window.event; Then you would pass e to U.stopDefault() and that method could use it accordingly. Link to comment Share on other sites More sharing options...
margaux Posted May 15, 2012 Author Share Posted May 15, 2012 ahh - this makes sense. Thanks Larry and thanks for another excellent book. Its the first book I've come across that explains the code and the theory behind it rather than just showing the code to perform a specific task. I think I may start believing that I can program with javascript and learn oop. Link to comment Share on other sites More sharing options...
Larry Posted May 15, 2012 Share Posted May 15, 2012 Thanks, Margaux. I'm glad you're liking the book and feel good about where you're at. Very nice of you to say! Link to comment Share on other sites More sharing options...
Recommended Posts