JQUERY validation plugin + AJAX + PHP not working - php

Question

I recently started learning AJAX for form submitting, but it seems that i'm still missing something essential, because the submitted data won't go to the PHP file like it's suppose to. I don't understand why it won't work.
HTML:
<div class="col-md-6">
<form class="form" action="../wp-content/themes/tempo/cfgs/js/scrollmagic/contact.php">
Eesnimi:
<input name="eesnimi" id="eesnimi" class="required" type="text">
Perekonnanimi:
<input name="pernimi" id="pernimi" class="required" type="text">
E-Post:
<input name="email" id="email" class="required" type="email">
Telefoni number:
<input name="nr" id="nr" class="required" type="text">
Teema:
<input name="teema" id="teema" class="required" type="text">
Sõnumi sisu:
<textarea name="sisu" id="sisu" class="required"></textarea>
<div></div>
<input type="submit" id="sub" value="Edasta">
</form>
</div>
JQUERY/AJAX
$('#sub').click(function(){
$('.form').submit();
var eesnimi = $('#eesnimi').val();
var pernimi = $('#pernimi').val();
var email = $('#email').val();
var nr = $('#nr').val();
var teema = $('#teema').val();
var sisu = $('#sisu').val();
$('.form').validate({
rules:{
eesnimi: {
required: true,
nowhitespace: true,
lettersonly: true
},
pernimi: {
required: true,
nowhitespace: true,
lettersonly: true
},
email: {
required: true,
email: true
},
nr: {
required: false,
integer: true
},
teema: {
required: true
},
sisu: {
required: true
}
},
messages:{
eesnimi: {
required: valituhiErr,
nowhitespace: tuhikErr,
lettersonly: nonumbersErr
},
pernimi: {
required: valituhiErr,
nowhitespace: tuhikErr,
lettersonly: nonumbersErr
},
email: {
required: valituhiErr,
email: emailErr
},
nr: {
required: valituhiErr,
integer: onlynumbersErr
},
teema: {
required: valituhiErr,
},
sisu: {
required: valituhiErr,
}
},
submitHandler: function(){
$.ajax({
type: "POST",
url: "../wp-content/themes/tempo/cfgs/js/scrollmagic/contact.php",
data: $('.form').serialize(),
success: function (o) {
console.log(o);
}
});
}
});
return false;
});
PHP:
<?php
print_r($_POST);
?>
I'm just experimenting, it seems that validation works correctly but the submit function won't, beceause the server won't recieve anything from my ajax request and it won't display anything on console either.

Answer 1

try this : jquery
var data = {
eesnimi = $('#eesnimi').val();
pernimi = $('#pernimi').val();
email = $('#email').val();
nr = $('#nr').val();
teema = $('#teema').val();
sisu = $('#sisu').val();
};
$.ajax({
type : "post",
dataType : "JSON",
url : "register.php",
data : data,
success : function(result)
{
if (result.hasOwnProperty('error') && result.error == '1'){
var html = '';
$.each(result, function(key, item){
if (key != 'error'){
html += '<li>'+item+'</li>';
}
});
//show in html
php
eesnimi = $_POST['eesnimi']
pernimi = ...
email =...
nr = ...
teema = ...
sisu = ...
//connect db
//sqlquery you want validate
if (mysqli_num_rows($result) > 0)
{
$row = mysqli_fetch_assoc($result);
if ($row['eesnimi']==$eesnimi ){
$errors['eesnimi '] = ...;
}
// like this
if (count($errors) > 1){
$errors['error'] = 1;
die (json_encode($errors));
}
//insert into db
}
hope this help