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.

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.

• javascript
• php
• jquery
• ajax
• forms

• are you disabling any of the tags in the form at any time? – pythonian29033 Commented Oct 15, 2013 at 9:24
• @pythonian29033 All tags in my form are always enabled, i didn't disabled any of those – James Commented Oct 15, 2013 at 9:26
• 3 If you don't have a name attribute in the input element, serialize doesn't know what to name it. – Steve Commented Oct 15, 2013 at 9: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 ment that serialize won't include a field without a name! Makes sense. Thank you very much for leaving your ment. – user1801810 Commented May 9, 2016 at 6:03

4 Answers 4

you have two issues.

1. Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)

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

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

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

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.