Была долгая ночь, я борюсь здесь.
У меня есть форма, которая загружается в div через ajax.
Кнопка на форме выполняет еще один вызов ajax, сериализуя данные, но когда я вызываю serialise, она не получает данные формы.
Не могу понять, почему?
ФОРМА:
<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>
вызов ajax, прикрепленный к кнопке отправки:
$("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();
}
});
}
});
а вот функция, которую я использую для сериализации данных:
$.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;
};