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

Pursue Problem From Chap. 8. Ex. Membership.Js

Recommended Posts

Last question of pursue section from chap. 8.

 

I'm trying to update membership.js script to understand event handling. I'have come up with following solution, it works fine, both for checking data and calculating cost. But, once that is done, the page is not enabled upon refresh. (Pressing refresh button on keyboard does not make the page active again.) What is the problem for that?

 

And, I would also like to know, is this the right answer? I mean, is it what is called as delegating event handling? Just want to make sure.........

 

I have used functions from utility file, to get reference to the form elements. ( those U.$() thing in the code).

 

 

function showData() {

'use strict';

var type = U.$('type');

var years = U.$('years');

var cost = U.$('cost');

console.log(type.value);

console.log(years.value);

console.log(cost.value);

}

 

 

function disableButton() {

'use strict';

U.$('submit').disabled = true;

}

 

function calculate(e) {

'use strict';

if (typeof e == 'undefined') e = window.event;

var cost;

var type = U.$('type');

var years = U.$('years');

 

if(years && years.value) {

years = parseInt(years.value, 10);

}

if(type && type.value && years && (years > 0))

{

//console.log(type.value);

//console.log(years.value);

switch (type.value) {

case 'basic' :

cost = 10.00;

break;

case 'premium' :

cost = 15.00;

break;

case 'gold' :

cost = 20.00;

break;

 

} //End of switch.

 

cost *= years;

if(years > 1) {

cost *= 0.80;

}

 

U.$('cost').value = '$' + cost.toFixed(2);

U.$('submit').value = 'Submit your order';

U.addEvent(U.$('membership'), 'submit', showData);

U.addEvent(U.$('submit'), 'click', disableButton);

} else {

U.$('cost').value = 'Please enter valid values.';

}

if(e.preventDefault) {

e.preventDefault();

} else {

e.returnValue = false;

}

return false;

} //End of calculate function.

 

 

window.onload = function() {

'use strict';

 

U.addEvent(U.$('membership'), 'submit', calculate);

U.addEvent(document, 'change', calculate);

U.$('submit').disabled = false;

U.$('submit').value = 'Calculate';

 

};

Share this post


Link to post
Share on other sites

You don't want to add the change event handler to the entire document, you want to add it to the form.

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