Ajax serialize() method is not reading all data fields of html form

Question

I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.

Form:

  <form class="form-horizontal" id="addpost" method="GET" action="">
        <div class="control-group">
            <label class="control-label" for="form-field">Post Title</label>
            <div class="controls">
                <input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
             </div>
         </div>
         <div class="control-group">
         <label class="control-label" for="form-field-11">Content Here</label>
            <div class="controls">
            <textarea name="post-content"  value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
            </div>
           </div><!-- Insert Image Code -->
           <div class="control-group">
            <div class="widget-main">
                <div class="controls">
                    <div class="ace-file-input">
                        <input id="id-input-file-2" type="file">
                        <a class="remove" href="#"></a>
                    </div>
                 </div>
                 <div class="controls">
                    <div class="ace-file-input ace-file-multiple">
                        <input id="id-input-file-3" type="file" multiple="">
                        <a class="remove" href="#">
                        <i class="icon-remove"></i>
                        </a>
                    </div>
                    <label>
                    <input id="id-file-format" type="checkbox" name="file-format">
                        <span class="lbl"> Allow only images</span>
                    </label>
                </div>
              </div>
             </div><!-- Insert Image Code -->
            <div class="space-4"></div>
            <div class="control-group">
                <label class="control-label" for="form-field-tags">Tag input</label>
                <div class="controls">
                    <input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
                </div>
            </div>

            <div class="space-4"></div>
            <div class="control-group">
                <label class="control-label" for="form-field-select-3">Select Category</label>
                <div class="controls">
                <label for="form-field-select-3">Chosen</label>
                <select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
                <option value="">
                </option><option value="Blog">Blog
                </option><option value="News Letter">News Letter
                </option></select>
             </div>
           </div>

     <div class="control-group" style="float:left; margin-right:25px">
        <div class="controls"><button type="submit" class="btn btn-info">
        <i class="icon-ok bigger-110"></i>
        <input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
        <button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
        </div>
     </div> 
     <div id="resp" style="float:left; margin-top:5px">
        <img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
      </div>
     </form>

JavaSccript:

 $('#addpost').submit(function(e){ 
 if(use_ajax)
        {
            $('#loading').css('visibility','visible');
            $.get('test.php',$(this).serialize(),

                function(data){
                    if(parseInt(data)==-1)
                        $.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");

                    else
                    {
                        $("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
                    }

                    $('#loading').css('visibility','hidden');
                     setTimeout( "jQuery('#resp').hide('slow');",3000 );
                     setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
                    });
        }
        e.preventDefault();
}
 )};

In this only 3 field values where sent to server. That is Post-title, post-content and tags I don't know why this happening. Any help would be appreciated.

@pythonian29033 All tags in my form are always enabled, i didn't disabled any of those — James, Oct 15 '13 at 09:26
If you don't have a `name` attribute in the input element, `serialize` doesn't know what to name it. — Steve, Oct 15 '13 at 09:29
@Steve - I don't recall the last time I didn't include a `name` attribute... until tonight. Beat my head on the wall for an hour before I came across your comment that `serialize` won't include a field without a `name`! Makes sense. Thank you very much for leaving your comment. — user1801810, May 09 '16 at 06:03

score 4 · Accepted Answer · edited May 23 '17 at 12:07

you have two issues.

Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.

following is a note in jquery serialize documentation page -

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

damn you! I was typing so fast! – pythonian29033 Oct 15 '13 at 09:32 — pythonian29033, Oct 15 '13 at 09:32

score 4 · Answer 2 · answered Oct 15 '13 at 09:32

4

Its because you have missed "name" attribute in select element

<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">

I have checked in my local, and now this is working fine.

Please check and let me know if any issue.

Thanks

answered Oct 15 '13 at 09:32

Chandresh M

3,808
1
24
48

It works but file won't be sent. That because serialize won't support file (from Mohit Jain's Answer). Thanks – James Oct 15 '13 at 09:40
For that you can check this ans : [how-to-do-file-upload-using-jquery-serialization](http://stackoverflow.com/questions/4545081/how-to-do-file-upload-using-jquery-serialization) – Chandresh M Oct 15 '13 at 09:44

score 2 · Answer 3 · answered Oct 15 '13 at 09:26

I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:

 <select class="chzn-select" name="your-elem-name">
 //--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr

score 1 · Answer 4 · answered Oct 15 '13 at 09:31

ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"

this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.

Ajax serialize() method is not reading all data fields of html form

4 Answers4

Linked