Question

Has been a long night am struggling here.

I have a form which is loaded into a div via ajax.

The button on the form makes another ajax call serialising the data, but when I call serialise it does not get the form data.

I cant understand why?

THE FORM:

<form id="orderData">
        <table border="1" cellpadding="2" cellspacing="0" bordercolor="#d9d1cb" bgcolor="#666666" class="contact"  style="margin-top:10px;"s="s">
           <tr>
              <td colspan="2" bgcolor="#666666"><input type="text" name="name" id="name" style="width:250px;  border:0;" class="required contact"/></td>
              <td width="116" class="contact">Name:</td>
           </tr>
           <tr>
              <td colspan="2" bgcolor="#666666"><input type="text" name="surname" id="surname" style="width:250px;  border:0;" class="required contact"/></td>
              <td class="contact"><label for="name">Surname:</label></td>
           </tr>
           <tr>
              <td colspan="2" bgcolor="#666666"><input type="text" name="email" id="email" style="width:250px;  border:0;" class="required email contact"/></td>
              <td class="contact"><label for="email">Email:</label></td>
           </tr>
           <tr>
              <td colspan="2" bgcolor="#666666"><input type="text" name="telephone"  style="width:250px;  border:0;" id="telephone" class="contact"/></td>
              <td class="contact"><label for="telephone">Telephone:</label></td>
           </tr>
           <tr>
              <td colspan="2" bgcolor="#666666"><input name="mobile" type="text" id="mobile" style="width:250px;  border:0;" class="contact" /></td>
              <td class="contact">Mobile:</td>
           </tr>

           <tr>
              <td colspan="2" bgcolor="#666666"><textarea name="address" id="address" style="width:250px; height:50px; border:0; font-family:Arial, Helvetica, sans-serif;" cols="50" rows="2" class="required contact"></textarea></td>
              <td valign="top" class="contact"><label for="address">Address:</label></td>
           </tr>
           <tr>
              <td colspan="2" bgcolor="#666666"><input type="text" name="city" id="city" style="width:250px;  border:0;" size="32" class="required contact"/></td>
              <td class="contact"><label for="city">City:</label></td>
           </tr>
           <tr>
              <td colspan="2" bgcolor="#666666"><input type="text" name="postcode" style="width:250px;  border:0;" id="postcode" size="32" class="required contact"/></td>
              <td class="contact"><label for="postcode">Postcode:</label></td>
           </tr>
           <tr>
             <td colspan="2" align="right" valign="top" bgcolor="#666666"><select name="hearabout" id="hearabout" class="contact">
               <option value="Google">Google</option>
               <option value="Other search engine">Other Search Engine</option>
               <option value="ES Magazine">ES Magazine</option>
               <option value="Telegraph">Telegraph</option>
               <option value="Guardian Magazine">Guardian Magazine</option>
               <option value="Passesd by">Passed By</option>
               <option value="From a friend">From a friend</option>
               <option value="Other">Other</option>
             </select></td>
             <td valign="top" class="contact">How did you hear about us?</td>
           </tr>

           <tr>
              <td width="47" class="contact"><input name="send_email" type="hidden" value="send" /><input name="brochure" type="checkbox" id="brochure" value="1" /></td>
              <td width="197" class="contact"><div align="left"><strong>Request Brochure:</strong></div></td>
              <td class="contact"><input name="ordersamples" type="submit" class="button_contact" id="ordersamples" value="Order Samples" /></td>
           </tr>
        </table>
        </form>

the ajax call attached to the submit button:

$("body").delegate("#ordersamples", "click", function(e){
        e.preventDefault();
        var formData = $('#orderData').serializeObject();
            console.log(formData);
        if (swatchArray.length <=0){
            //alert('no samples');
            jQuery.facebox('<table width="100%" border="0" cellspacing="2" cellpadding="2"><tr><td>No samples selected.<br>To select a fabric sample simply click once on it and your selection will appear in the samples panel at the right of the page.<br>When you have made your selection (maximum 7 samples), fill out the form and click on ‘Order Samples’</td></tr><tr><td></td></tr></table>');
            //Prevent the submit event and remain on the screen

            return false;
        } else {
            //alert('has samples');
            var myUrl = 'sendswatch-data2.php';
            var formData = $('#orderData').serializeObject();
            console.log(formData);
            $.ajax({
                url: myUrl,
                data: {'swatchid[]':swatchArray, 'formdata':$('#orderData').serializeObject()},
                type: "POST",
                error: function(xhr, statusText, errorThrown){
                    // Work out what the error was and display the appropriate message
                },
                success: function(myData){
                    $('#tabsampleorder').html(myData);
                    $('.tabber').hide();
                    $('#tabsampleorder').show();
                }
            });
        }
    });

and here is the function I use to serialise the data:

$.fn.serializeObject = function(){
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

Answer 1

i did say it was a late night!!!

stupid/tired me did not put in a name for the form added that and its working!!!!