jQuery: serializing array returns empty string

Question

I did not forget to add name attributes as is a common problem and yet my serialized form is returning an empty string. What am I doing wrong?

HTML/javascript:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
$( document ).ready( function() {
    $('#word_form').submit(function(e) {
        e.preventDefault();
        console.log($(this).serialize()); //returns an empty string
    });
});
</script>
</head>

<body>
    <div id="wrapper">
        <form name="word_form" id="word_form" method="POST">
            <input type="image" name="thumbsUp" id="thumb1" value="1" src="http://upload.wikimedia.org/wikipedia/commons/8/87/Symbol_thumbs_up.svg" style="width:50px;height:50px;">
            <input type="image" name="thumbsDown" id="thumb2" value="2" src="http://upload.wikimedia.org/wikipedia/commons/8/84/Symbol_thumbs_down.svg" style="width:50px;height:50px;">
        </form>
    </div>
</body>

it is because of the type="image"... see rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i then in .serialize() there is !rsubmitterTypes.test( type ) — Arun P Johny
– Arun P Johny, Commented Jun 10, 2014 at 3:27

Sudhir Bastakoti · Accepted Answer · 2014-06-10 03:40:32Z

3

dont know if this is a better way, but you could write your own plugin for this, something like:

(function($) {

    $.fn.serializeAll = function() {

        var toReturn    = [];
        var els         = $(this).find(':input').get();
            console.log("Elements:" + els);
        $.each(els, function() {
            if (this.name && !this.disabled && (this.checked || /select|textarea/i.test(this.nodeName) || /text|hidden|password/i.test(this.type) || this.src)) {
                var val = $(this).val();
                toReturn.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( val ) );
            }
        });

        return toReturn.join("&").replace(/%20/g, "+");    
    }

})(jQuery);
//and use it
var serialized = $('#word_form').serializeAll();
console.log(serialized);

Demo jsFiddle

answered Jun 10, 2014 at 3:40

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

1 Comment

nico Over a year ago

This is stupidly complicated for something that seems so simple but thanks!

Collectives™ on Stack Overflow

jQuery: serializing array returns empty string

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related