CODEWITHSUNDEEP
javascriptphpjqueryajax
Dorvalla
Dorvalla

Reputation: 5240

AJAX call not being executed

I just come arround the corner with AJAX calls and trying to learn it. I have a form i am trying to push through an AJAX call, but getting a constant error it can't send, and I cant wrap my head arround it why it doesn't work.

Form: 

<form class="form-horizontal" id="contact-form"  method="post">
      <div class="control-group">
            <div class="controls">
                <input type="text" name="name" id="name" placeholder="Naam" class="form-control input-lg">                                
             </div>
      </div>
      <div class="control-group">
             <div class="controls">
                <input type="text" name="email" id="email" placeholder="Email adres" class="form-control input-lg">
             </div>
      </div>
      <div class="control-group">
             <div class="controls">
                 <textarea name="message" id="message" rows="8" class="form-control input-lg" placeholder="Bericht"></textarea>
             </div>
       </div>
       <div class="form-actions">
              <button type="submit" id="submit" class="btn btn-default btn-lg btn-block">Verstuur Bericht</button>
       </div>
       <div id="succes">
       </div>
</form>

The Ajax Call

$('form').bind('submit',function(){
    $.ajax({
        type    : 'POST',
        url     : 'inc/actions/sendmail.php',
        data    : $(this).serialize(),
        cache   : false,
        dataType: 'text',
        success : function (serverResponse) { alert('mail sent successfully.'); },
        error   : function (jqXHR, textStatus, errorThrown) {alert('error sending mail');}
    });
})

And the sendmail.php

$name = mysqli_real_escape_string($con,$_POST["naam"]);
$from = mysqli_real_escape_string($con,$_POST["email"]);                                    
$message = mysqli_real_escape_string($con,$_POST["bericht"]);

$message = wordwrap($message, 70);  
$to = "[email protected]";
$subject = "Een gebruiker heeft een vraag of opmerking";

$body = "Some messages and colloring, to much to paste cause it's inline-markup";

$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
$headers .= "From: [email protected]";

if ($name == ''){
    echo '<p>U heeft geen naam ingevuld</p>';    
}else if($from == ''){
    echo '<p>U heeft geen emailadres achter gelaten</p>';
}else if($body == ''){
    echo '<p>U heeft geen bericht ingevuld niet ingevuld';
}else {
    if (mail ($to, $subject, $body, $headers)) {
        echo '<p>Uw bericht is verzonden.</p>';
    } else {
        echo '<p>Er is iets mis gegaan bij het verzenden van de data, probeer het opnieuw.</p>';
    }
}

Everytime it returns me the error alert from the AJAX call and doesnt execute anything. My console doesn't spot an error either and remains competely blank.

I checked the console as per suggestion on the network tab and it doesnt even get on the page itself. There is no 404 error on that part. It seems the request gets canceled.

Screendump of console / network

Upvotes: -1

Views: 339

Answers (4)

MrCode
MrCode

Reputation: 64526

Your AJAX request is being cancelled because immediately after the AJAX is initiated, your form does its standard form submission, with the browser reloading the page. You need to either return false or prevent default, in the submit event:

$('form').bind('submit',function(){
    ...
    ...
    return false;
});

Or capture the event and prevent default:

$('form').bind('submit',function(e){
    e.preventDefault();
    ...
    ...
});

Either of the above will stop the form from submitting and allow your AJAX request to complete.

Upvotes: 1

Ragnar
Ragnar

Reputation: 4578

In addition to other answers, I think you can't use this in this line:

data : $(this).serialize(),

Try using:

data : $('form').serialize(),

Upvotes: 1

anvanza
anvanza

Reputation: 83

Edit this

$('#contact-form').bind('submit',function(){

The ajax-function did not bind to the element.

Upvotes: 1

Steve
Steve

Reputation: 20469

Your input name attributes dont match with your php:

$name = mysqli_real_escape_string($con,$_POST["name"]); //<-- not 'naam'
$from = mysqli_real_escape_string($con,$_POST["email"]);                                    
$message = mysqli_real_escape_string($con,$_POST["message"]); //<-- not 'bericht'

Upvotes: 2

Related Questions