ajax js serialize not reading form elements

Question

Have a form that is not being read by serialize() function.

 <script type="text/javascript">
 function submitTrans1(){
  var formData = $('form1').serialize();
  var options = {
   method:'post',
   postBody:'formData',
   onCreate: function(){alert(formData)},
      onSuccess: function(transport){alert("onSuccess alert \n" + transport.responseText);},
   onComplete: function(){alert('complete');},
   onFailure: function(){alert('Something went wrong...')}
   }

  new Ajax.Request('/clients/addTrans/<?=$clientID123?>/',options);
 }
 </script>
  <?php
  $datestring = "%Y-%m-%d";
  $time = time();
  $clid1 = $this->uri->segment(3);
  ?>
  <form name="form1" id="form1">
   <div id="addTransDiv" style="display:none">

     <div class="">
      <label for="transDesc" id="transDesc" value="sadf" class="preField">Description</label>
      <textarea cols="40" rows="3" id="transDesc" value="" name="transDesc" class=""></textarea>
     </div>
     <div class="">
      <label for="date" class="preField">Date</label>
      <input type="date" id="transDate" name="date" value="<?=mdate($datestring, $time);?>" size="40" class=""/><br/>
     </div>
     <div class="">
      <label for="userfile" class="preField">File</label>
      <input type="file" name="transFile" id="userfile" size="20" /><br>
     </div>
     <input type="button" id="submitTrans" name="submitTrans" value="Submit" onclick="submitTrans1()">

   </div>
  </form>

Uh, I have an alert in the onSuccess parameter of the Ajax.Request that would ideally alert the variable assigned to the serialized form. However, when it alerts, it alerts nothing. I also have the processing url printing out the $_POST data just in case, but that as well returns an empty array in the responseText, so indeedidly nothing is being posted to the form.

Thx.

Edit1

it seems that the problem might be related to the fact that the form is inside a div. If I remove everything on the page except for the form and js, it works ok. But the form is in a div that is hidden by default and uses another function to be displayed. Is there some kind of magic needed to get form data via serialize if it's in a div?

---

Edit 2

Tried adding quotes and pound signs and all that other jazz. I am using web developer toolbar, firebug, etc... it isn't throwing any js errors and doesn't afraid of anything.

Answer 1

Try removing the quotes from around the variable name formData in the postBody field.

The web developer toolbar in Firefox is as useful as anything for debugging client-side javascript.

BTW, the snippet contains a few undefined items, like the JS function showTransAdd(), several PHP variables, the PHP function mdate(), and the inclusion of the prototype library.

Answer 2

Change this line:

var formData = $('form1').serialize();

to this:

var formData = $('#form1').serialize();

I had to change several other things to make a working copy, but I'm not sure about what all code you withheld or how your environment may differ. If that doesn't work, I can send you the full code snippet I used.

Answer 3

Erroneous table does the breaking.

I had the form within a table with no tr's or td's (not sure if the last part matters) and upon removing the table tags, everything is working.

The relevant js now looks like:

var formData = $('form1').serialize();
var options = {
   method:'post',
   postBody:formData,
 [...]

I'd like to thank the Academy, and all those that helped me.