Mysterious behavior of ajax jquery request inside jquery tabs

Mysterious behavior of ajax jquery request inside jquery tabs

I have jquery tabs created and inside of a tab there is a form where at
the bottom of it, there is this button.
<button id="submitForm" onclick="formSubmition();">Submit</button>
Here are the headers
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/lib.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="css/style.css" />
formSubmition() exists in lib.js file and here is its code
function formSubmition(){
$recId = $("#recId").val();
$collectionDate = $("#collectionDate").val();
$collectorsName = $("#collectorsName").val();
$donorsName = $("#donorsName").val();
$sciName = $("#sciName").val();
$family = $("#family").val();
$comName = $("#comName").val();
$variety = $("#variety").val();
$area = $("#area").val();
$location = $("#location").val();
$altitude = $("#altitude").val();
$geoOrientation = $("#geoOrientation").val();
$geoCoordinates = $("#geoCoordinates").val();
$soilDescription = $("#soilDescription").val();
$habitatDescription = $("#habitatDescription").val();
$plantPopulation = $("#plantPopulation").val();
$photoDate = $("#photoDate").val();
$photoId = $("#photoId").val();
$photoComments = $("#photoComments").val();
$soilTaken = 0;
$seedQuantity = $("#seedQuantity").val();
$plantQuantity = $("#plantQuantity").val();
$graftQuantity = $("#graftQuantity").val();
$moreInfo = $("#moreInfo").val();
if($('#soilTaken').is(':checked')) // Checking if Checkbox
was checked.
$soilTaken = 1;
jQuery.ajax({
type: 'POST',
async: true,
url: 'classes/classController.php',
data: {method: "recNewPlant", recId: $recId, collectionDate:
$collectionDate, collectorsName: $collectorsName, donorsName:
$donorsName, sciName: $sciName, family: $family, comName:
$comName, variety: $variety, area: $area, location: $location,
altitude: $altitude, geoOrientation: $geoOrientation,
geoCoordinates: $geoCoordinates, soilDescription:
$soilDescription, habitatDescription: $habitatDescription,
plantPopulation: $plantPopulation, photoDate: $photoDate, photoId:
$photoId, photoComments: $photoComments, soilTaken: $soilTaken,
seedQuantity: $seedQuantity, plantQuantity: $plantQuantity,
graftQuantity: $graftQuantity, moreInfo: $moreInfo},
contentType: ('application/x-www-form-urlencoded'),
dataType: "json",
success : function(json){
if(json.status == '1'){
alert("Added!");
}else{
alert("Problema!");
}
}
});
}
The problem is that i have use this method so many times but this is the
first time that it behaves like this. What i mean. If i press the button ,
nothing happens at most of the time and some times (rare) in chromium only
(not in firefox) it sends a request to the server and it returns
"Problema" messagage.
I ve erased the cache of two browsers but nothing changed. Also i'm using
OWASP ZAP to see the traffic and indeed , doesn't send any POST request. I
thought that maybe the tabs cause that problem but i cannot find the why.
Here is the way i setup tabs:
$("#mainTabs").tabs();