sonal Posted April 20, 2012 Share Posted April 20, 2012 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'; }; Link to comment Share on other sites More sharing options...
Larry Posted April 20, 2012 Share Posted April 20, 2012 You don't want to add the change event handler to the entire document, you want to add it to the form. Link to comment Share on other sites More sharing options...
Recommended Posts