Question

I’m using Jquery and backbone for building my app. Recently i rewrite project in AMD architecture with require.js.. Then starts the problems with posting the forms. This is my form:

*<div data-role="page" id="login" data-theme="a">
    <form class="loginPageForm">
        <div data-role="content" style="padding: 15px">
            <h3 id="login_heading">
                Login
            </h3>
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" id="email_fieldset">
                    <label for="email_textinput" >
                        Email
                    </label>
                    <input id="email_textinput" placeholder="[e-mail]" value="" type="text" />
                </fieldset>
            </div>
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" id="password_fieldset">
                    <label for="password_textinput">
                        Password
                    </label>
                    <input id="password_textinput" placeholder="Secret Password" value="" type="password" />
                </fieldset>
            </div>
            <input type="submit" class="btn" value="Login"/>
            <a data-role="button" data-transition="none" data-theme="f" href="#register" id="registerButton">Register</a>
        </div>
    </form>
</div>*  

and I’m using :

  **$.fn.serializeObject = function(){
            var arrayData, objectData;
            arrayData = $(this).serializeArray();
            objectData = {};
            $.each(arrayData, function() {
                var value;

                if (this.value != null) {
                    value = this.value;
                } else {
                    value = '';
                }

                if (objectData[this.name] != null) {
                    if (!objectData[this.name].push) {
                        objectData[this.name] = [objectData[this.name]];
                    }

                    objectData[this.name].push(value);
                } else {
                    objectData[this.name] = value;
                }
            });

            return objectData;
        }**

for creating Json.. Problem is the line $(this).serializeArray(); which returns an Empty array:
$(this).serializeArray(): Array[0]
length: 0
proto: Array[0]

My object “this” looks like:

arrayData: Array[0]
objectData: undefined
this: v.fn.v.init[1]
0: form.loginPageForm
0: fieldset#email_fieldset
1: input#email_textinput
2: fieldset#password_fieldset
3: input#password_textinput
4: input.btn

Do you have any idea how should I avoid this problem, this form works before I played with AMD architecture ?

Answer 1

Your form elements doesn’t have name attributes. When you submit the form the elements’ values are posted to server with their name as key. So the name is important.

According to jQuery serializeArray Docs

The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute. No submit button value is serialized since the form was not submitted using a button. Data from file select elements is not serialized.