Backbone this.model.set undefined

Question

I am trying to create a model from a form and when I run it and put data into the form I get an error saying

uncaught typeError: cannot call method 'set' of undefined

I have used this method for other views and I have double and triple checked that everything is the same, can anyone see what I am doing wrong?

Function:

this.model.set({
    fname: $('#fname').val(),
    lname: $('#lname').val(),
    email: $('#email').val(),
    password: $('#password').val(),
    mobile: $('#mobile').val()
});
console.log('test');
this.model.create(this.model, {
    success: function(){
        $('#step-1').css({'display':'none'});
        $('#step-2').css({'display':'initial'});
        $("#circle-1").removeClass("btn-primary").addClass("btn-default");
        $("#circle-2").removeClass("btn-default").addClass("btn-primary");
    }
});

HTML:

 <form class="form-horizontal">
            <fieldset> 
                <!-- full-name input-->
                <div class="control-group">
                    <br>
                    Step 1
                    <br>
                    <label class="control-label">First Name</label>
                    <div class="controls">
                        <input id="fname" name="fname" type="text" placeholder="first name">
                        <p class="help-block"></p>
                    </div>
                </div>
                  <div class="control-group">
                  <label class="control-label">Second Name</label>
                    <div class="controls">
                        <input id="lname" name="lname" type="text" placeholder="second name">
                        <p class="help-block"></p>
                    </div>
                </div>


                   <div class="control-group">
                    <label class="control-label">E-mail</label>
                    <div class="controls">
                        <input id="email" name="email" type="text" placeholder="E-mail"
                       >

                    </div>
                </div>

                 <div class="control-group">
                    <label class="control-label">Mobile</label>
                    <div class="controls">
                        <input id="mobile" name="mobile" type="text" placeholder="Mobile"
                        >

                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label">Password</label>
                    <div class="controls">
                        <input id="password" name="password" type="password" placeholder="Password"
                       >

                    </div>
                </div>

                   <div class="control-group">
                    <label class="control-label">Retype Password</label>
                    <div class="controls">
                        <input id="Rpassword" name="Rpassword" type="password" placeholder="Retype Password"
                       >

                    </div>
                </div>




            </fieldset>
        </form>

Answer 1

this.model only works if you provided a model to the view, which doesn't seem to be the case. Instead, you seem to want to create a new model:

var model = new MyModel({
    fname: $('#fname').val(),
    lname: $('#lname').val(),
    email: $('#email').val(),
    password: $('#password').val(),
    mobile: $('#mobile').val()
});
console.log('test');
model.save({
    success: function(){
        $('#step-1').css({'display':'none'});
        $('#step-2').css({'display':'initial'});
        $("#circle-1").removeClass("btn-primary").addClass("btn-default");
        $("#circle-2").removeClass("btn-default").addClass("btn-primary");
    }
});