CODEWITHSUNDEEP
jquery
Nikola
Nikola

Reputation: 15048

Serialize form not working in jQuery

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.

Upvotes: 74

Views: 83575

Answers (8)

Jamviet.com
Jamviet.com

Reputation: 306

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!

Upvotes: 0

Harry Bosh
Harry Bosh

Reputation: 3800

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

Upvotes: 0

user12229470
user12229470

Reputation: 1

You have not referenced the form correctly in your javascript

Try changing to this:

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

Upvotes: 0

pranav shinde
pranav shinde

Reputation: 1650

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.

Upvotes: 0

whoknows
whoknows

Reputation: 197

Please add a name to your input field:

<input type='text' name='give_some_name' />

In this fiddle I have added a name and it is working fine.

Upvotes: 9

Liam
Liam

Reputation: 29760

Something else that prevents serializeArray() from serializing properly is disabled inputs. serializeArray does not serialise disabled inputs, in much the same way that disabled inputs are not submitted with the form.

A successful control is "valid" for submission.

  • Controls that are disabled cannot be successful.

Source

Upvotes: 48

ssi-anik
ssi-anik

Reputation: 3714

I think the problem is that you're trying to select form like 

$("form");

But this is equivalent to 

getElementsByTagName("form");

This returns an array of objects.
So, instead you can use the #id selector, or use the index to access the form. Hope this helps.

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 817238

You have to give your form elements names!

This is independent of jQuery. Every form element must have a name to be considered for form submission as successful control:

A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a FORM element and must have a control name.

jQuery just ignores those elements that don't have a name (or, depending on how it gets the elements, it might not even see them as the form itself has no reference to them).

Upvotes: 198

Related Questions