Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
margaux

Referencing The Event

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Thanks, Margaux. I'm glad you're liking the book and feel good about where you're at. Very nice of you to say!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...