success message not displaying on form after submission
Hi, I am testing a form locally that uses PHP and MySQL to submit the info into a database and JQuery for styling, and message display. The form works, b/c I can see the data in the DB, but the success message does not appear. I just get the spinning circle, with no message.
The code is as follows.
[code]
<form id="ContactForm" action="">
<p>
<label>First Name</label>
<input id="FirstName" name="FirstName" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none;"></span>
</p>
<p>
<label>Last Name</label>
<input id="LastName" name="LastName" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none;"></span>
</p>
<p>
<label>User Name</label>
<input id="UserName" name="UserName" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none;"></span>
</p>
<p>
<label>Email</label>
<input id="email" name="email" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
<span class="error" style="display:none;"></span>
</p>
<p>
<label>Website<span>(optional)</span></label>
<input id="website" name="website" class="inplaceError" maxlength="120" type="text" autocomplete="off"/>
</p>
<p>
<label>Your message<br /> <span>300 characters allowed</span></label>
<textarea id="message" name="message" class="inplaceError" cols="6" rows="5" autocomplete="off"></textarea>
<span class="error" style="display:none;"></span>
</p>
<p class="submit">
<input id="send" type="button" value="Submit"/>
<span id="loader" class="loader" style="display:none;"></span>
<span id="success_message" class="success"></span>
</p>
<input id="newcontact" name="newcontact" type="hidden" value="1"></input>
</form>
[/code]
JQuery
[code]
$(document).ready(function() {
contact.initEventHandlers();
});
var contact = {
initEventHandlers : function() {
/* clicking the submit form */
$('#send').bind('click',function(event){
$('#loader').show();
setTimeout('contact.ContactFormSubmit()',500);
});
/* remove messages when user wants to correct (focus on the input) */
$('.inplaceError',$('#ContactForm')).bind('focus',function(){
var $this = $(this);
var $error_elem = $this.next();
if($error_elem.length)
$error_elem.fadeOut(function(){$(this).empty()});
$('#success_message').empty();
});
/* user presses enter - submits form */
$('#ContactForm input,#ContactForm textarea').keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("#send").click();
return false;
}
else
return true;
});
},
ContactFormSubmit : function() {
$.ajax({
type : 'POST',
url : 'php/contact.php?ts='+new Date().getTime(),
dataType : 'json',
data : $('#ContactForm').serialize(),
success : function(data,textStatus){
//hide the ajax loader
$('#loader').hide();
if(data.result == '1'){
//show success message
$('#success_message').empty().html('Message sent');
//reset all form fields
$('#ContactForm')[0].reset();
//envelope animation
$('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
});
}
else if(data.result == '-1'){
for(var i=0; i < data.errors.length; ++i ){
if(data.errors[i].value!='')
$("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
}
}
},
error : function(data,textStatus){}
});
}
};
[/code]