Using ajax on my contact form

[lurtnowski]

On my contact form
http://new.coronadofol.org/new/contact.php
I’m trying to use AJAX to handle the form

<script>
$('#contact_fol').submit(function(e) {
    // prevent form submit
    e.preventDefault();

    formData = new FormData($(this)[0]);
    $.ajax({
		url: 'php/contact_engine.php',
		type: 'POST',
		dataType: 'json',
		data: formData,
		processData: false,
		contentType: false,
		success: function(data)
                {
			if(data.error) {
				// Show errors
				$('#contact_result').html(data.error);
			}
			else if(data.success) {
				// Show success message
				$('#contact_result').html(data.success);
                                //Put here the code to reset the fields of your form
			}
			else {
				window.location.reload();
			}
        },
        error: function(data)
        {
        	// Something went wrong
               $('#contact_result').html('<div class="error"><h4>Error</h4><p>Something went wrong.</p></div>');
        }
	});
});

</script>

When I submit the form

So I’m guessing there is an error somewhere.
But when I check the console, I see no mention of it.
How can I tell?

[WolfShade]

Hmm… well, clearly the error() is being triggered, but you’ve no error trapping or method of displaying what went awry. You’re using the data argument. Have you tried parsing it to see what went wrong?

V/r,

^ _ ^

[WolfShade]

Wait. Which version of jQuery are you using?

According to this article, .error() was replaced with .fail(function(jqXHR, textStatus, errorThrown){}) in v1.8.

HTH,

^ _ ^

[James_Hibbard]

I guess you got this sorted now? Form submission works for me. All you need to do now is clear the fields after a successful submission.

[lurtnowski]

yep, it works now (ill just make the fields required. Id like to replace the form with the success message
is it ok if I do it in the JavaScript like

<script>
$('#contact_fol').submit(function(e) {
    // prevent form submit
    e.preventDefault();

    formData = new FormData($(this)[0]);
    $.ajax({
		url: 'php/contact_engine.php',
		type: 'POST',
		dataType: 'json',
		data: formData,
		processData: false,
		contentType: false,
		success: function(data)
                {
			if(data.error) {
				// Show errors
				$('#contact_result').html(data.error);
			}
			else if(data.success) {
				// Show success message
				$('#contact_result').html(data.success);
                                //make the form dissapear
$('#contact_fol').hide();
			}
			else {
				window.location.reload();
			}
        },
        error: function(data)
        {
        	// Something went wrong
               $('#contact_result').html('<div class="error"><h4>Error</h4><p>Something went wrong.</p></div>');
        }
	});
});

</script>