Garg Garg - 5 months ago 24
Ajax Question

No response for success call after form submiting

I'm making simple contact form which now send successfully each message but I don't see response after function success i.e. message that the mail is sent.. errors.. etc.
This is my js

var submitContact = $('#submit'),
message = $('#msg');

submitContact.on('click', function(e){
e.preventDefault();

var $this = $(this);

$.ajax({
type: "POST",
url: 'contact.php',
dataType: 'json',
cache: false,
data: $('#contact-form').serialize(),
success: function(data) {

if(data.info !== 'error'){
$this.parents('form').find('input[type=text],textarea,select').filter(':visible').val('');
message.hide().removeClass('success').removeClass('error').addClass('success').html(data.msg).fadeIn('slow').delay(5000).fadeOut('slow');

} else {
message("Thank you!");
message.hide().removeClass('success').removeClass('error').addClass('error').html(data.msg).fadeIn('slow').delay(5000).fadeOut('slow');
}
}
});
});


And this is my form

<form id="contact-form" method="post">
<div class="row">
<div class="col-md-4">
<input class="form-field" name="name" id="name" type="text" placeholder="Name">
</div>
<div class="col-md-4">
<input class="form-field" name="mail" id="mail" type="text" placeholder="Email">
</div>
<div class="col-md-4">
<input class="form-field" name="subjectForm" id="subjectForm" type="text" placeholder="Subject">
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="form-field" name="messageForm" id="messageForm" rows="6" placeholder="Message"></textarea>
<div class="submit-area">
<button type="submit" id="submit" class="button button3">Send</button>
<div id="msg" class="message"></div>
</div>
</div>
</div>
</form>


Why
<div id="msg" class="message"></div>
doesn't display anything? I've received emails in my inbox from the form so it is working..?

General
Request URL:http://example.com/contact.php
Request Method:POST
Status Code:200 OK
Remote Address: IP
Response Headers

Response Headers view source
Connection:Keep-Alive
Content-Length:0
Content-Type:text/html
Date:Tue, 28 Jun 2016 09:40:19 GMT
Keep-Alive:timeout=5, max=5
Server:Apache

Request Headers view source
Accept:application/json, text/javascript, */*; q=0.01
Accept-Encoding:gzip, deflate, lzma
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:220
Content-Type:application/x-www-form-urlencoded; charset=UTF-8

Host:example.com
Origin:http://example.com
Referer:http://example.com/contact.html
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36 OPR/38.0.2220.31
X-Requested-With:XMLHttpRequest

Form Data view source view URL encoded
name:fsdfsdfdsfsd
mail:my@email.com
subjectForm:fsfsdfsf
messageForm:fsdfdsfds

Answer

What is message("Thank you!"); in success function ?

The error is in the code replace success function with this:

success: function(data) { 
     var message = $('#msg'); 
     if(data.info !== 'error'){ 
        message.show().removeClass('error').addClass('success').html(data.msg).fadeIn('s‌​low').delay(5000).fadeOut('slow'); 
     } 
     else {
        message.show().removeClass('success').addClass('error').html(data.msg).fadeIn('s‌​low').delay(5000).fadeOut('slow'); 
     } 
}