My $.post function doesn't return any data

Question

I'm new to Php and Ajax, and I've been banging my head over this problem. I'm trying to get my simple form to update with ajax using the $.post shorthand function, but my script just doesn't return anything. I've tried with $.ajax as well, and used different data types like json objects, json variable, serialize() .. etc.

HTML

    <section class="contact" id="contact">



  <h2>Do you have a project in mind? Let's discuss it</h2>

    <div id="form-messages">

    </div>


   <form action="" method="post" id="contact-form">

        <div class="row">
            <div class="col span-1-of-4"><label for="name">Your name</label></div>
            <div class="col span-3-of-4"><input type="text" name="name" id="name" placeholder="Enter your name ..."></div>
        </div>

        <div class="row">
            <div class="col span-1-of-4"><label for="email">Your email</label></div>
            <div class="col span-3-of-4"><input type="email" name="email" id="email" placeholder="Enter your email ..."></div>
        </div>

        <div class="row">
            <div class="col span-1-of-4"><label for="message">Your message</label></div>
            <div class="col span-3-of-4"><textarea name="message" id="message" placeholder="Type in your message ..."></textarea></div>
        </div>

        <div class="row">
        <div class="col span-1-of-4"></div>
            <div class="col span-3-of-4"><input type="submit" name="submit" id="submit" value="Send your message"></div>

        </div>
    </form>




</section>

PHP

<?php           

$name= $_POST['name'];
$email= $_POST['email'];
$message= $_POST['message'];
$error="";
$result="";

if (isset($_POST["submit"])) {
if (!$name) {
    $error="<br />Please enter your name";
}
if (!$email) {
    $error.="<br />Please enter your email address";
}
if (!$message) {
    $error.="<br />Please enter a message";
}

if ($_POST['email']!="" AND !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $error.="<br />Please enter a valid email address";
    }                       
if ($error) {
    $result='<div class="error-message"><p id="alert"><strong>There were error(s) in your form:</strong>'.$error.'</p></div>';
} else {
    if (mail("abderrahim.gadmy@gmail.com", "Gadmy Visions: Someone sent you a message!", 
    "Name: ". $_POST['name']."
    Email: ".$_POST['email']."
    Comment: ".$_POST['message'])) {
        $result='<div class="success-message"><p id="alert"><strong>Thank you!</strong> I\'ll be in touch</p></div>';
    } else {                                                 
        $result='<div class="error-message"><p id="alert">Sorry, there was an error sending your message. Please try again later.</p></div>';
    }
}

 echo $result;
}

?>

JS

$(document).ready(function(){
            $('#contact-form').on('submit',function(event){



    $.post('contact.php',$('form').serialize(), function(data){
        $('#form-messages').html(data);        
    });

    //Prevent refresh
    event.preventDefault();      

    });

});

Try to `var_dump($_POST)` in your php file and check if you're actually posting data. Also: What does your browsers console / network tools say? Is the requets happening? Is the data posted? — ccKep, Jan 05 '16 at 10:01
Obviously, the function executes, and when I log the result to console, it just gives an empty string. — Abderrahim Gadmy, Jan 05 '16 at 10:03
Your php file only outputs something if `$_POST["submit"]` is set, hence the idea to var_dump it's contents since it seems to not execute. Also: log `$('form').serialize()` to the JS console for further debugging. — ccKep, Jan 05 '16 at 10:05
Possible duplicate of [Ajax post serialize() does not include button name and value](http://stackoverflow.com/questions/9866459/ajax-post-serialize-does-not-include-button-name-and-value) — ccKep, Jan 05 '16 at 10:08
After putting in this: $('#contact-form').on('submit',function(event){ console.log($('form').serialize()); event.preventDefault(); I did get the form inputs on the console — Abderrahim Gadmy, Jan 05 '16 at 10:11
Thanks a lot for your assistance. The problem is now solved. — Abderrahim Gadmy, Jan 05 '16 at 10:18

score 1 · Answer 1 · edited May 23 '17 at 11:44

Long story short:

jQuery serialize() does not serialize buttons (since it doesn't know which button was used to submit the form). See: Link aswell as the jQuery serialize documentation:

Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button.

Since your PHP-File only generates output if $_POST["submit"] is set (which isn't the case since it's not serialized along with the rest of the form) nothing is actually returned.

Either use a different condition in your php file to check if the form was actually POSTed successfully or manually append the submit button to the serialized data.

score 0 · Accepted Answer · answered Jan 05 '16 at 10:11

0

Try checking whether the form can be submitted by using

if($_SERVER['REQUEST_METHOD'] == "POST") instead of using isset($_POST["submit"])) .

answered Jan 05 '16 at 10:11

Kamal

486
1
6
14

Thank you very much. This fixed it. – Abderrahim Gadmy Jan 05 '16 at 10:18

My $.post function doesn't return any data

2 Answers2