AndyPet74 AndyPet74 - 2 years ago 165
Javascript Question

Jquery/Ajax .serialize() not working fully

I am trying to send data off from a form to another page to be processed but the problem is my jquery to serialize to form and send the information off to the page is only sending one of the 2 form fields. The form is gnerated from php and looks like this:

echo "<td>{$_SESSION['givenname']}</td><td><form id='commentAdd' method='POST' action='javascript:void(0);'><textarea name='Description' id='description' rows='2' cols='50'></textarea></td><td><input type='text' id='time' name='time'/></td><td><input type='submit' class='btn btn-info' id='addComment'></form></td>";

Broken down it looks like:

<td><form id='commentAdd' method='POST' action='javascript:void(0);'><textarea name='Description' id='description' rows='2' cols='50'></textarea></td>
<td><input type='text' id='time' name='time'/></td>
<td><input type='submit' class='btn btn-info' id='addComment'></form></td>";

I believe the problem is that the placement of the
within the
's restricts which fields get serialized. If I move the
tag over to right before the time input I get that data but when I move it to the first
I get nothing and when I keep it where I have it I get only description. I tried to figure out how to use jquery to tell it exactly which fields to send as data but I was only getting errors and I tried a half dozen ways. I believe that could be a solution but I am not quite sure on implementation. To explain what I mean please look at my current code for serialization below:

$.ajax({type: 'post', data: { myData: $('#commentAdd').serialize() }, url: "addComment.php", success: function(info){

What I tried to do is change the information inside
to be something like
but I kept getting errors in console about unexpected strings. I also tried using this method:

var time = $('#time').val();
var desc = $('#description').val();
$.ajax({type: 'post', data: {'desc=' +desc, 'time=' +time } , url: "addComment.php", success: function(info){

This gives me an
unexpected token +
I do this above but only with one field so I don't need
surrounding it. Any ideas how to fix this? I have been trying for a few hours now and I think it's close but I feel a few extra sets of eyes may be able to point me in the right direction.


Answer Source

I use serializeArray() method. For some reason it doesnt work for disabled inputs, that's why i make sure i disable disabled attribute before.

Hope it will help.

sample is below.

		var formName = "commentAdd";
    var myForm = $('#'+ formName);
    var disabled = myForm.find(':input:disabled').removeAttr('disabled');
    var formVals = myForm.serializeArray();
<script src=""></script>
<td><form id='commentAdd' method='POST' action='javascript:void(0);'>
 <textarea name='Description' id='description' rows='2' cols='50'> aaaaaaaaa</textarea></td>
<td><input type='text' id='time' name='time' value="12:00"/></td>
<td><input type='submit' class='btn btn-info' id='addComment'></form></td>";

<div id="result"></div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download