Contact Form Issue: Confirmation message does not appear when submit button pressed

[iceloop]

I'm using a simple contact form that I've used for other projects but I does not seem to be working properly for my current project. The problem is that it will not show the confirmation message

 result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';$("#fields").hide();

when you hit the submit button. When i test it on my computer using xampp i don't have this problem. It works fine but when i upload it to the host server and test the contact form it doesn't show the confirmation message. Is this a problem with the host server? or something with with code?

Here is the code for the contact form:

<!-- JQuery: Contact form -->
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">                                                  		   
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax({
type: "POST",
url: "contact.php",
data: str,
success: function(msg){
			
$("#note").ajaxComplete(function(event, request, settings){

if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
{
result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
$("#fields").hide();
}
else
{
result = msg;
}

$(this).html(result);

});

}

});

return false;

});

});
</script>

   <div id="contact_form">

      <fieldset class="info_fieldset"><legend>Inquiry</legend>

         <div id="note"></div>
						
	     <div id="fields">

		<form id="ajax-contact-form" action="javascript:alert('success!');">
		<p><label>Name</label>
		<input class="textbox" type="text" name="name" value="" /><br />

		<label>E-Mail</label>
		<input class="textbox" type="text" name="email" value="" /><br />

		<label>Subject</label>
		<select name="reason">
		<option value="">Select...</option>
		<option value="Option 1">Option 1</option>
		<option value="Option 2">Option 2</option>
		<option value="Option 3">Option 1</option>
		<option value="Option 4">Option 1</option>
		</select><br />
		<label>Best Time:</label>
		<select name="time">
		<option value="">Select...</option>
		<option value="Morning">Morning</option>
		<option value="Afternoon">Afternoon</option>
		</select><br />
		<label>Comments</label>
		<textarea class="textbox" name="message" rows="5" cols="25"></textarea><br />
										
		<label>&nbsp;</label>
		<input class="button" type="submit" name="submit" value="Send Message" />
		<input class="button" type="reset" name="reset" value="Reset" />
	        </p>
                </form>
							
             </div>

      </fieldset>

  </div>

 

[jpadie]

minor adjustments to give some better debug output

<!-- JQuery: Contact form -->
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">                                                  		   
$(document).ready(function(){
	$("#ajax-contact-form").on('submit', function(){
		$.ajax({
			type: "POST",
			url: "contact.php",
			data: $(this).serialize(),
			success: function(data){
				if(data == 'OK'){
					$("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
					$('#fields').hide();
				} else {
					$("#note").html(data);
				}
			},
			error: function(data){
				$("#note").html(data);
			},
			dataType: 'html'
		});
	});
});
</script>

 

[iceloop]

i made the adjustment and ran it using firebug to debug. I am now getting the pop-up alert message "success"

<form id="ajax-contact-form" action="javascript:alert('success!');">

but it is not still not giving the confirmation message on the page:

$("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
$('#fields').hide();

When i debug and add breakpoints at the following part:

success: function(data){
if(data == 'OK'){
$("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
$('#fields').hide();
} else {
$("#note").html(data);
}
},

I notice that when i step into the next line of code it does not execute the code in the if-statement but instead jumps to the code in the else-statement and stops.

If i switch the code inside the if-statement to the else-statement it appears to work but is this really the answer?

 

[jpadie]

add this to the ajax call to examine the data response

$.ajax({
			type: "POST",
			url: "contact.php",
			data: $(this).serialize(),
[red]                        complete: function (data, status){ console.log('data', data); console.log('status',status);},
[/red]
			success: function(data){
				if(data == 'OK'){
					$("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
					$('#fields').hide();
				} else {
					$("#note").html(data);
				}
			},
			error: function(data){
				$("#note").html(data);
			},
			dataType: 'html'
		});

 

[iceloop]

It prints out the following:

data Object { readyState=4, status=200, statusText="OK"}
status success

Why does it say it was a success when it is not working? Also is there any particular reason why the contact form works on my local host but fails on the server?

 

[jpadie]

change this as shown:

success: function(data){
				if(data.responseText == 'OK'){
					$("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
					$('#fields').hide();
				} else {
					$("#note").html(data.responseText);
				}
			},

the issue is that you are sending html back rather than json, so the format of the argument passed to the success handler is different. at least, that's what i think - i never exchange ajax data via html so have not tested this.

what I would do is this

<?php
 /* process the request */
 echo json_encode(array('result'=>'OK', 'message'=>'some message'));
 die;
?>

success: function(data){
 if(data == 'OK'){
   $("#note").html('<div class="notification_ok">Your message has been sent. Thank you!</div>');
   $('#fields').hide();
 } else {
   $("#note").html(data.message);
 }
},

it's a personal thing. i like being able to send structured data to javascript, and the consistency of the format etc.