jQuery form serialize - just returns an empty string

Question

I am not getting any data from serializing my html form. Here is the form

<form method="post" action="#" name='basicForm' id='basicForm'>

<input type="text" name="n_username" id="id_username" class="form-control uname" placeholder='Username' value='test_user' data-msg-required='The input field is required.' data-rule-required='true'/>

<input type="password" name="n_password" id="id_password" class="form-control pword" placeholder='Password' value='xxxx' data-msg-required='The input field is required.' data-rule-required='true'/>                  

<button class="btn btn-success btn-block">Sign In</button> </form>

and here is the jquery

jQuery(document).ready(function(){
    $("#basicForm").validate({

        submitHandler: function (form) {
            var request;
            var $form = $(this);

            var $inputs = $form.find("input, select, button, textarea");

            var serializedData = $form.serialize();
            alert (serializedData);  <==empty

            $inputs.prop("disabled", true);

            request = $.ajax({
                url: "./ajax/login.php",
                type: "post",
                data: serializedData
            });

            request.done(function (response, textStatus, jqXHR) {
                // log a message to the console
                console.log("Hooray, it worked!");
                alert(response);
                //window.location.replace("success.php");
             });
        }


    }); //validate

});//ready
</script>

The data in the form is not serialised. I get an empty alert box. Also on the ajax page i postback to i print_r the $_post array and get this: Array()

I have checked the form elements have names which seems to be the common problem. I am using this jquery version

The validation works fine. This also works

var x = $("#id_username").val();
 var y = $("#id_password").val();
request = $.ajax({
                url: "./ajax/login.php",
                type: "post",
                //data: serializedData
                data : {
                    username : x,
                    password: y
                    }

thanks in advance for any help you can give

@RoryMcCrossan, the problem is that there will be no $(this) within the callback function, so his $form is empty. — Sparky
– Sparky, Commented Dec 2, 2014 at 16:36
i;ll check it on monday, im sure it will fix it.what do i write? form_name.serlize? — user2274191
– user2274191, Commented Dec 7, 2014 at 19:10

Sparky · Accepted Answer · 2014-12-02 16:45:14Z

4

You are breaking it here...

submitHandler: function (form) {
    ...
    var $form = $(this); // <- '$(this)' is meaningless
    ...
    var serializedData = $form.serialize();
    ...

There is no $(this) within this context, so your $form is empty.

Since the form argument representing the form object has already been provided by the developer, this version works fine...

submitHandler: function (form) {
    var serializedData = $(form).serialize();
    ...

Working DEMO: http://jsfiddle.net/gpaf8187/

Note: you'll also need a type="submit" within your <button> element or the validation plugin will not pick up this event.

edited Dec 2, 2014 at 16:45

answered Dec 2, 2014 at 16:32

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery form serialize - just returns an empty string

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related