JQUERY validation plugin + AJAX + PHP not working

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.

You're POSTing the data, and then printing out the GET query string data in your PHP. Try print_r($_POST) — Adam Williams
– Adam Williams, Commented Mar 25, 2017 at 14:16
Yeah, thats just a typo, i already tried both ways, mybad for not fixing that. — drpzz
– drpzz, Commented Mar 25, 2017 at 15:22

Akashii · Accepted Answer · 2017-03-25 16:15:31Z

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

answered Mar 25, 2017 at 16:15

Akashii

2,2815 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

drpzz Over a year ago

Thank you man! Something similar to this worked for me, thanks again!

Collectives™ on Stack Overflow

JQUERY validation plugin + AJAX + PHP not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related