Using bind(this) on an event handler

Question

I have an object. It has some attributes, an initialization function for a DOM element, and an event handler for that DOM element.

I want my event handler to have access to the object's properties. I am using .bind(this), but it says "cannot call method "bind" of undefined". What am I doing wrong?

var SignUpForm2 = {
    eForm: null,
    eEmailInput: null,
    ePasswordInput: null,
    signUpURL: null,
    email: null,
    password: null,

    handleFormSubmit: function() {
        e.preventDefault();

        this.email = this.eEmailInput.val();
        this.password = this.ePasswordInput.val();

        $.ajax({
            type: "POST",
            url: this.signUpURL,
            data: {
                email: this.email,
                password: this.password
            },
            success: function(response){

            }
        });
    },

    init: function(eForm) {
        this.eForm = eForm;
        this.eEmailInput = this.eForm.find('input[name="email"]');
        this.ePasswordInput = this.eForm.find('input[name="password"]');
        this.signUpURL = "/index.php/ajax/user-sign-up-via-email";

        this.eForm.submit(this.handleFormSubmit.bind(this));
    },
}

Answer 1

i have a jsfiddle working with a few minor adjustments to your code:

http://jsfiddle.net/nickadeemus2002/8sX75/

html:

<form id="test">
    <p>test form</p>
    <label>email</label>
    <input type="text" value="" name="email"/>
    <br />
    <label>password</label>
    <input type="text" value="" name="password"/>
    <input type="submit" />
</form>

javascript:

var SignUpForm2 = {
    eForm: null,
    eEmailInput: null,
    ePasswordInput: null,
    signUpURL: null,
    email: null,
    password: null,
    handleFormSubmit: function() {
    var formEmail = this.eEmailInput.val();
        var formPassword = this.ePasswordInput.val();
        var formSignUpUrl = this.signUpURL;

        console.log(formEmail);   
        console.log(formPassword);   
        console.log(formSignUpUrl);    
       console.log('ajax POST to server');

    /*
      //notice new vars to pass along
    $.ajax({
        type: "POST",
        url: formSignUpURL,
        data: {
            email: formEmail,
            password: formPassword
        },
        success: function(response){

        }
    });
    */        
    },
    init: function(eForm) {       
        var parentObj = SignUpForm2;        
        this.eForm = eForm;
        this.eEmailInput = this.eForm.find('input[name="email"]');
        this.ePasswordInput = this.eForm.find('input[name="password"]');
        this.signUpURL = "/index.php/ajax/user-sign-up-via-email";
//this.eForm.submit(this.handleFormSubmit.bind(this));                 

        this.eForm.submit(function(e){
           e.preventDefault();       
            parentObj.handleFormSubmit();
        });
    },
}

$(document).ready(function(){
    //create instance
    SignUpForm2.init($('#test'));

});

so here was my approach.

1.) Use your SignUpForm2 object to pass a valid jquery selector ("test" form) to the init() method.

2.) Inside init, you store current form input values to SignUpForm2 properties. The submit event handler takes over and passes control over to "handleFormSubmit" via the parentObj variable. Notice -- I placed the e.preventDefault() method here instead of placing it in "handleFormSubmit" as it made more sense to me.

3.) Inside "handleFormSubmit", I used "this" to reference stored object properties. I assigned them to local vars so we don't have "this" scope headaches inside the ajax method. I then used the local vars to make your ajax POST.

BTW: Paul's approach should work as well. I think the way a developer creates objects is a matter of preference based on the situation. Since you created a literal object structure, I stayed with that approach.