I have a form: name, email, question
I applied ajax to it, using this tutorial http://nettuts.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/
Once I hit submit, it displays the message that it was submitted, but it does not actually store the data nor send the email w/ the data.
When I look at the source, it displays this for the form tag
<form id="freeform" action="http://www.website.com/" method="post" name="contact">This is the part I think I need to fix to get it to go to the appropriate template, to submit the info, or maybe it does not need to, but maybe this snippet of code needs to be modified to submit the info properly
$.ajax({
type: "POST",
url: "thankyou",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2><p>")<br />
.append("We will be in touch soon.")<br />
.hide()<br />
.fadeIn(1500, function() {<br />
$('#message').append("/images/uploads/images/check.png");<br />
});<br />
}<br />
});<br />
return false;<br />
});below is the entire code, just above this is the snippet of code that may to be modified to get this to submit properly.
$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var message = $("input#message").val();
if (message == "") {
$("label#message_error").show();
$("input#message").focus();
return false;
}
var dataString = 'name='+ name + '&email;=' + email + '&message;=' + message;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/thankyou",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2><p>")<br />
.append("We will be in touch soon.")<br />
.hide()<br />
.fadeIn(1500, function() {<br />
$('#message').append("/images/uploads/images/check.png");<br />
});<br />
}<br />
});<br />
return false;<br />
});<br />
});<br />
runOnLoad(function(){<br />
$("input#name").select().focus();<br />
});When I comment out a certain part, it does submit properly, but it loads it up the site/thankyou template, instead of ajaxifying the submission.
Here is the code for the form:
<div id="contact_form">
{exp:freeform:form name="contact" form_name="website_submitted_questions" return="site/thankyou" mailinglist="website_submitted_questions" notify="email@email.com" template="website_submitted_questions" mailinglist_opt_in="yes" required="name|email|message"}
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" id="name" name="name" value="" maxlength="27" class="required" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Email</label>
<input type="text" id="email" name="email" value="" maxlength="25" class="required" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="message" id="message_label">Any questions you have for us?</label>
<textarea name="message" cols="23" rows="6" class="required"></textarea>
<label class="error" for="message" id="message_error">This field is required.</label>
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" /></p>
</fieldset>
{/exp:freeform:form}
</div>Any help is appreciated
