run php script with ajax shows no result

Question

I'm trying to run a php script using ajax after a form submission. this is the form

<form id="form" class="form">
    <input id="email" type="email" required name="email" placeholder="Email" onchange="myUpdateFunction()" value="">
    <textarea id="message" type="text" value="" name="message" onchange="myUpdateFunction()" required placeholder="Comments" style="border:none;border-bottom:1px solid #424242; width:530px;"></textarea>
    <input id="submit" type="submit" class="submit" name="send_request" value="Submit" >
</form>

this is my script

$('.submit').on('click', function() {
        $.ajax({
          url: "send.php",
          method:'post',
          data: {'email': $('#email').val(), 'message': $('#message').val()}
        }).done(function() {
            alert('Message Sent.');

        });
   });

and this is my send.php file

<?php 

if(isset($_POST['send_request'])){
    //send email
}

?>

but it doens't work, the page is reloaded, the email is not sent and no "alert message" is displayed

there is no problem in php because if I delete the javascript and I add action="send.php" method="POST" as attributes in the form it works, so I think that the problem is the javascript

if I add else{ echo "Error"; } in the php page nothing change, same behaviour — Michael
– Michael, Commented Mar 1, 2015 at 15:34

Federico Ginosa · Accepted Answer · 2015-03-01 15:55:50Z

2

http://jsfiddle.net/o5xvpkmv/2/

You shouldn't use the onchange or the click event for this kind of stuff, but the submit event (preventing the default behaviour of submit button).

<form id="form" class="form">
    <input id="email" type="email" name="email" placeholder="Email" required>
    <textarea id="message" type="text" value="" name="message" placeholder="Comments" required></textarea>
    <input id="submit" type="submit" class="submit" name="send_request" value="Submit">
</form>


$("#form").on('submit', function(e) {
    e.preventDefault();
    $.ajax({
       url: "send.php",
       method:'post',
       data: $( this ).serialize()
     }).done(function() {
         alert('Message Sent.');
     });
});

or (both ways are good)

$(document).ready(function () {
    $('#submit').click(function () {
        $.ajax({
            url: "send.php",
            method: 'post',
            data: $(this).serialize()
        }).done(function () {
            alert('Message Sent.');
        });
        return false;
    });
});

Also, about the backend, you should make this kind of check:

if (
    isset($_POST["email"]) && 
    !empty($_POST["email"]) &&
    isset($_POST["message"]) && 
    !empty($_POST["message"])) {
        //send email   
}

edited Mar 1, 2015 at 15:55

answered Mar 1, 2015 at 15:43

Federico Ginosa

3162 silver badges6 bronze badges

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

6 Comments

Kamil Karkus Over a year ago

or instead of e.preventDefault() he can just return false at the end of annymous function

Michael Over a year ago

functions in the onchange are there because I display another div if all fields of the form are filled, anyway I tryed your solution but it does not give me any result, it behaves like before

Michael Over a year ago

there is no problem in php because if I delete the javascript and I add action="send.php" method="POST" as attributes in the form it works, so the problem is the javascript

Federico Ginosa Over a year ago

Open the console of Google Chrome (CMD+ALT+J) > Network, click on submit input and check that the request is sent.

Michael Over a year ago

it is quite strange because it is not a POST but a in the column method there is GET

|

Collectives™ on Stack Overflow

run php script with ajax shows no result

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related