Referencing The Event

margaux · 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

Larry · 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.

margaux · 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.

Larry · 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!

Sign In

Referencing The Event

Recommended Posts

margaux

Link to comment

Share on other sites

Larry

Link to comment

Share on other sites

margaux

Link to comment

Share on other sites

Larry

Link to comment

Share on other sites

Browse

Activity