Ajax query not returning data - php

Question

I am using jquery serialize and Ajax to capture form values and process them with Ajax using json as data Type, but no values are being returned. I have tried various ways to try and see why this is happening, but to no avail. There is no errors being returned in firebug or chrome. I would be grateful if someone could check my code and point out my error. Thanks
html code
<!--- Form to add box -->
<div id="boxaddform" style="display:none;">
<div class="dialogTop_padd"></div>
<form id="BA_boxform" name="BA_boxform" method="post">
<fieldset>
<legend><span></span>Select Company</legend>
<div class="spacer"></div>
<div class="formMessage">Click again to open</div>
<div class="fld_fld">
<div>
<label for="BA_customer">Company:</label><br />
<select name="BA_customer" id="BA_customer">
<option SELECTED VALUE="">Select a Company</option>
<?php
do {
?>
<option value="<?php echo $row_Recordsetcust['customer']?>"><?php echo $row_Recordsetcust['customer']?></option>
<?php
}
while ($row_Recordsetcust = mysql_fetch_assoc($Recordsetcust));
$rows = mysql_num_rows($Recordsetcust);
if($rows > 0)
{
mysql_data_seek($Recordsetcust, 0);
$row_Recordsetcust = mysql_fetch_assoc($Recordsetcust);
}
?>
</select>
<div class="spacer"></div>
<!--- displays the address and dept from the change function -->
<div id="BA_dept"></div>
<br />
<div id="BA_address"></div>
</div>
</fieldset>
<div class="dialogTop_padd"></div>
<!--- fieldset for service level -->
<fieldset>
<legend>Service Level</legend>
<div class="spacer"></div>
<div>
<label for="BA_service">Service level:</label>
<select name="BA_service" id="BA_service">
<option SELECTED VALUE="">Select an option</option>
<option value="Standard">Standard</option>
<option value="Rapid">Rapid</option>
</select><br />
</div>
</fieldset>
<div class="dialogTop_padd"></div>
<!--- fieldset for box # -->
<fieldset>
<legend>Box Details</legend>
<div class="spacer"></div>
<div>
<label for="BA_box">Box#:</label><br />
<input id="BA_box" name="BA_box" type="text" size="32" maxlength="128" value = "" /><br />
</div>
<div>
<label for="BA_destdate">Destroy date:</label>
<input id="BA_destdate" name="BA_destdate" type="text" size="32" maxlength="128" value = "" /><br />
</div>
</fieldset>
<div class="dialogTop_padd"></div>
<!--- fieldset for authorisation -->
<fieldset>
<legend>Authorisation</legend>
<div class="spacer"></div>
<div>
<label for="BA_authorised">Requested By:</label>
<input id="BA_authorised" name="BA_authorised" type="text" value="<?php echo $_SESSION['kt_name_usr']; ?>"><br />
</div>
</fieldset>
<!--- div to show callback result from ajax via dialog -->
<div id="BA_addbox"></div>
<br />
<input type="submit" name="submit" value="Submit Intake" />
<input type="reset" name="cancel" value="Clear Form" />
<!--- buttons to submit form and reset form to default status -->
<!-- <button id="BA_submit" class="submitbutton icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Add Box</button>
<button type="reset" id="BA_reset" class="resetbutton icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Reset</button>
--><br />
</form>
</div>
jquery code
$(function() {
$("#BA_customer").live('change', function() {
if($(this).val()!="")
$.get("/domain/admin/getDept.php?BA_customer=" + $(this).val(), function(data) {
$("#BA_dept").html(data).show();
});
$.get("/domain/admin/getOptions.php?BA_customer=" + $(this).val(), function(data) {
$("#BA_address").html(data).show();
});
});
});
//Begin function to submit box intake form
$(function() { // Function to add box
$("#boxaddform").dialog({
autoOpen: false,
resizable: false,
modal: true,
title: 'Submit a box intake request',
width: 550,
height: 400,
beforeclose: function (event, ui) {
$("#BA_addbox").html("");
$("#BA_dept").hide();
$("#BA_address").hide();
},
close: function (event, ui) {
//$("#BA_boxform").get(0).reset();
$("#BA_addbox").html("");
}
});
});
$(function(){
$("#boxaddform").submit(function(){
var formdata = $(this).serialize();
$.ajax({
type: "POST",
url: "/domain/admin/requests/boxes/boxesadd.php",
data: formdata,
dataType: 'json',
success: function(msg){
//$("#confirm_department").hide();
/*
var $dialog = $('<div id="dialog"></div>')
.html('Your intake was successfully submitted and will be viewable in the reporting area.<br /><br />Thank you.');
$dialog.dialog({
autoOpen: true,
modal: true,
title: 'Box intake submission successfull',
width: 400,
height: 200,
draggable: false,
resizable: false,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
*/
//alert('You have succesfully submitted your ' + msg.company + ' report. Thank you.');
//console.log(msg);
//$("#BA_addbox").html("You may now close this window.");
//$("#formImage .col_1 li").show();
$("#BA_boxform").get(0).reset();
$("#boxaddform").hide();
}
});
return false;
});
});
// End function to submit box intake form
php code
<?php
$dept = mysql_real_escape_string($_POST['BA_dept']);
$company = mysql_real_escape_string($_POST['BA_customer']);
$address = mysql_real_escape_string($_POST['BA_address']);
$service = mysql_real_escape_string($_POST['BA_service']);
$box = mysql_real_escape_string($_POST['BA_box']);
$destroydate = mysql_real_escape_string($_POST['BA_destdate']);
$authorised = mysql_real_escape_string($_POST['BA_authorised']);
$form = array('dept'=>$dept, 'company'=>$company, 'address'=>$address, 'service'=>$service, 'box'=>$box, 'destroydate'=>$destroydate, 'authorised'=>$authorised);
$result = json_encode($form);
echo $result;
?>

Answer 1

The problem in your code is that you are serializing a DIV, what is incorrect.
The solution would be to serialize only the FORM included in your DIV with a Javascript code like:
...
$(function(){
$("#boxaddform").submit(function(){
var formdata = $('#BA_boxform').serialize();
$.ajax({
type: "POST",
url: "/domain/admin/requests/boxes/boxesadd.php",
data: formdata,
dataType: 'json',
success: function(msg){
...
}
});
return false;
});
....
Also, remember that serialize will only care for INPUT, SELECTand TEXTAREA controls as a normal FORM submit would do (http://api.jquery.com/serialize/).