Couldn't establish an ajax connection using jQuery, form automatically submits? - php

Question

I am quite a newbie on Jquery and just faced a problem that I'm not able to get over.
I, simply, have an HTML form with a few elements on a page. I want to validate the form values upon clicking the submit button, and then insert some of the form values to a db using JQuery. Right after the insert process completed successfully, I want the form to be submitted naturally.
I made the validation work, and get all to values successfully from the form, but I am not able to connect to the PHP page. I have two pages.
Here is the JQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#odeme").submit(function() {
$('#ok').attr('disabled', 'disabled');
$("#ok").after('<span id="info" style="font-size:8pt;color:green;padding-left:5px;"><img align="absmiddle" src="loading.gif" border="0" /> Ödemeniz Yapılıyor</span>');
//değişkenler
var jad = $("#ad").val().length;
var jsoyad = $("#soyad").val().length;
var jadres = $("#adres").val().length;
var jeposta = $("#eposta").val().length;
var isEposta = $("#eposta").val();
var epostaReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
var jsehir = $("#sehir").val();
var jtaksit = $("#taksit").val();
var jkartisim = $("#kartisim").val().length;
var jkartno = $("#kartno").val().length;
var jkartay = $("#kartay").val();
var jkartyil = $("#kartyil").val();
var jkartcvv = $("#kartcvv").val().length;
var hasError = false;
// kontrollere başla
if (jad < 6) {
$('#ad').css('border', 'solid 1px red');
hasError = true;
}
if (jsoyad < 2) {
$('#soyad').css('border', 'solid 1px red');
hasError = true;
}
if (jadres < 10) {
$('#adres').css('border', 'solid 1px red');
hasError = true;
}
if (jeposta < 6) {
$('#eposta').css('border', 'solid 1px red');
hasError = true;
}
if (jsehir == 0) {
$('#sehir').css('border', 'solid 1px red');
hasError = true;
}
if (jtaksit == 20) {
$('#taksit').css('background', '#FF9494');
hasError = true;
}
if (jkartisim < 6) {
$('#kartisim').css('border', 'solid 1px red');
hasError = true;
}
if (jkartno < 15) {
$('#kartno').css('border', 'solid 1px red');
hasError = true;
}
if (jkartay == 0) {
$('#kartay').css('border', 'solid 1px red');
hasError = true;
}
if (jkartyil == 0) {
$('#kartyil').css('border', 'solid 1px red');
hasError = true;
}
if (jkartcvv != 3) {
$('#kartcvv').css('border', 'solid 1px red');
hasError = true;
}
if ($('#sozlesme').is(':checked')) {
hasError = false;
} else {
$('#sozlesme').css('outline-color', 'red');
$('#sozlesme').css('outline-style', 'solid');
$('#sozlesme').css('outline-width', 'thin');
hasError = true;
}
if (!epostaReg.test(isEposta)) {
$('#eposta').css('border', 'solid 1px red');
hasError = true;
}
if (hasError == true) {
$("#info").remove();
$("#ok").after('<span id="errorSpan" style="color:red;padding-left:5px;">Lütfen formu eksiksiz doldurunuz.</span>');
$("#errorSpan").delay(3000).fadeOut(2000);
$('#ok').removeAttr("disabled");
return false;
} else {
// form verilerini db ye at
var form_ad = $("#ad").val();
var form_soyad = $("#soyad").val();
var form_adres = $("#adres").val();
var form_eposta = $("#eposta").val();
var form_sehir = $("#sehir").val();
var form_taksit = $("#taksit").val();
var form_telno = $("#telno").val();
var form_cinsiyet = $("#cinsiyet").val();
var dataString = 'ad='+ form_ad +
'&soyad=' + form_soyad +
'&adres=' + form_adres +
'&eposta=' + form_eposta +
'&sehir=' + form_sehir +
'&taksit=' + form_taksit +
'&telno=' + form_telno +
'&cinsiyet=' + form_cinsiyet;
alert(dataString);
JQuery.ajax({
type: "POST",
url: "form.php",
data: dataString,
cache: false,
success: function(result){
if(result == 1) {
alert(result);
return false; }
else {
$("#ok").after('<span id="errorSpan" style="color:red;padding-left:5px;">Lütfen formu eksiksiz doldurunuz.</span>');
}
}
});
}
});
});
</script>
and here is the code of the form.php
<?php
If (!isset($_POST['ad'])) {
echo 0;
}
else {
$ad = $_POST['ad'];
If ($ad == "asdasd") {
echo 1;
} else {
echo 0;
}
}
?>
I have read all the questions asked about this issue and try to apply all the solutions, but I'm stucked :/

Answer 1

Try this:
$(document).ready(function() {
$("#odeme").submit(function() {
//validation
//and
//ajax
return false; //this suppresses default form submission behaviour
});
});