Serialize form not working in jQuery

user_534755 0
Viewed 76407

Can you please take a look and help me realize where am I going wrong with this? Here is the jsfiddle link: http://jsfiddle.net/Hitman666/QcEkj/1/ but also here is that code

HTML:

<form action="#" id="gamesForm">
    <p>                                                        
        <input id="gName" type="text" class="medium" />
        <span class="notification information">Game name</span>
    </p>

    <p>                            
        <span class="notification information">Enabled:</span>
        <input id="gEnabled" type="checkbox" />              
    </p>

    <br />
    <!--Additional data for extra type-->
    <div id="extraAdditionalData" class="hidden">                            
        <p>
            <input id="rRacers" type="text" class="medium" />
            <span class="notification information">Racers</span>
        </p>

        <p>
            <input id="rVideoSet" type="text" class="medium" />
            <span class="notification information">Video set</span>
        </p>                                                         
     </div>                
</form>

<a href="#" id="saveConfiguration" class="graybuttonBig">Save everything!</a>

JavaScript:

$(document).ready(function(){
    $("#saveConfiguration").click(function(){
        alert( $("form").serialize() );   
    });
});

All I'm getting is an empty string.

jquery
8 Answers

First of all, you need to give name attribute to all input controls like textboxes etc. Then please check whether your id's are clashing or not, I had the same id for form and the one section that's where my problem was.

user_46048110

You have not referenced the form correctly in your javascript

Try changing to this:

$('#gamesForm').serialize();
user_122294700

Be careful not to put a form inside another form.

Obviously op has not but this could easily happen with modules and partials been placed incorrectly

user_27235200

I must share my research, first of all, if you want to get all value from a form, please add:

<form method="post" name="MUST_ASSIGN" id="form">
...

name="MUST_ASSIGN" must be presented, and DO NOT duplicate form's ID.

Second: disable input can NOT be get. If you disable all input field before form.serialize(), you will get NOTHING.

This code is valid:

...
var Allinput = $('#form').serialize();
$(_self).find('input').prop('disabled', 'disabled');
...

But this code is get nothing:

$(_self).find('input').prop('disabled', 'disabled');
var Allinput = $('#form').serialize();

Good day!

user_75207710
Related