I'm looking to streamline my form element access using the Module pattern. The goal is to eliminate redundancy by organizing everything under a single module.
How can I achieve this without having to directly call the Anonymous function within the module itself?
For example, rather than writing: FormData.LastName(),
I'd like to simplify it to: FormData.LastName;
Here's an attempt:
'use strict';
FormData = (function() {
var formElement = document.forms.signup;
return {
LastName: function(){
return formElement.lName.value;
},
SendBtn: function(){
return formElement.submitSignupForm;
}
};
})();
The objective is to interact with the module and retrieve its internal values without resorting to Global or exposure.
FormData.SendBtn().addEventListener('click', function(e){
document.getElementById('result').innerHTML = FormData.LastName();
e.preventDefault();
}, false);
Another approach:
'use strict';
FormData = (function() {
var formElement = document.forms.signup;
var LName = function(input){
return input.lName.value;
};
var SendBtn = function(input){
return input.submitSignupForm;
};
return {
LastName: LName(formElement),
SendBtn: SendBtn(formElement)
};
})();
FormData.SendBtn.addEventListener('click', function(e){
document.getElementById('result').innerHTML = FormData.LastName;
e.preventDefault();
}, false);