73

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.

8 Answers 8

197

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).

2
  • I'm trying to use .serialize but with MVC 4 which already gave each control a name base on the model mapping, but i still have the serialized form = ""; what shall i do? :(
    – N0rA
    Mar 16, 2014 at 12:53
  • I had multiple forms on my page. Putting the specific id of the one I wanted to serialize made the difference for me. Something like $("#gamesForm").serialize(); solved it for me.
    – JakeMc
    Apr 10, 2021 at 13:22
47
+100

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

0
9

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.

1

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.

0

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.

0

You have not referenced the form correctly in your javascript

Try changing to this:

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

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

0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.