Hey, I trying to understand how to build an Ajax Formit Form and how it works. Here is my illustration and what I'm trying to do:
1) I have a resource with the Formit Snippet and form html
[[!FormIt?
&hooks=`spam,email`
&customValidators=`PhoneValidate`
&emailTpl=`MyFormChunk`
&emailSubject=`New Message from No0b`
&emailTo=`[email protected]`
&emailFrom=`[email protected]`
&validate=`title:required,
yourname:required,
email:email:required,
address:required,
phone:PhoneValidate`
&successMessage=`Thank you for your request. We will follow up with you within 24 hours.`
]]
<form action="[[~[[*id]]]]" method="post" class="ajax_form">
<label class="label_title">Title:[[!+fi.error.title]]</label>
<input type="radio" name="title[]" value="Mr" [[!+fi.title:FormItIsChecked=`Mr`]] id="mr">
<label for="mr">Mr.</label>
<input type="radio" name="title[]" value="Mrs" [[!+fi.title:FormItIsChecked=`Mrs`]] id="mrs">
<label for="mrs">Mrs.</label>
<input type="radio" name="title[]" value="Other" [[!+fi.title:FormItIsChecked=`Other`]] id="other"> <label for="other">Other</label>
<label class="label_title" id="popup_yourname">Full Name:[[!+fi.error.yourname]]</label>
<input type="text" name="yourname" id="yourname" class="inputField required" value="[[+fi.yourname]]">
<label class="label_title" id="popup_email">Email Address:[[!+fi.error.email]]</label>
<input type="text" name="email" id="email" class="inputField required" value="[[+fi.email]]">
<label class="label_title" id="popup_phone">Telephone #:[[!+fi.error.phone]]</label>
<input type="text" name="phone" id="phone" class="inputField required" value="[[+fi.phone]]">
<label class="label_title" id="popup_address">Address:[[!+fi.error.address]]</label>
<textarea rows="4" cols="5" name="address" id="address" class="textareaField required">[[!+fi.address]]</textarea>
[[!+formit.recaptcha_html]]
[[!+fi.error.recaptcha]]
<input type="submit" value="SEND MESSAGE" class="ajax_submit" >
</form>
2) I have a .js to run validation on the form and submit the form to another resource
jQuery(document).ready(function(){
ajax_form();
});
function ajax_form(){
var error;
var request;
$(".ajax_submit").click(function() {
// validate and process form here
// abort any pending request
if (request) {
request.abort();
}
var $form = $(this);
var $inputs = $form.find("input");
error = false;
jQuery(".test_drive_ajax_form input, .test_drive_ajax_form textarea, .test_drive_ajax_form radio").each(function(i)
{
var surrounding_element = jQuery(this);
var value = jQuery(this).attr("value");
var check_for = jQuery(this).attr("id");
var required = jQuery(this).hasClass("required");
});// END OF FUNCTION
//ONLY ONE EXAMPLE OF VALIDATION CHECK
if(check_for == "yourname"){
surrounding_element.removeClass("error valid");
baseclases = surrounding_element.attr("class");
if(value == "" || value == "Name" || value == "name"){
surrounding_element.attr("class",baseclases).addClass("error");
document.getElementById('popup_yourname').innerHTML = 'Full Name: <span class="error">Required</span>';
error = true;
}
else{
surrounding_element.attr("class",baseclases).addClass("valid");
document.getElementById('popup_yourname').innerHTML = 'Full Name:';
yourname = value;
}
}
//ADD REMAINING VALIDATION CHECKS HERE
if (error == false)
{
//Serialize Form
var serializedData = $('form.ajax_form').serialize();
//Submit Form to another resource with same Formit Snippet
$.post('http://www.randomsite.com/index.php?id=50', serializedData, function(data){
try {
var jsd = $.parseJSON(data);
} catch (e) {
//There is an error
alert('You have an error');
return false;
}
//IF NO ERRORS, THE FORM WAS SUCCESSFULLY SUBMITTED
alert('success');
});// END OF .post
}// END OF "if error"
return false;
});
}
3) I have an empty resource (id = 50) with below Formit Snippet
[[!FormIt?
&hooks=`spam,email`
&customValidators=`PhoneValidate`
&emailTpl=`MyFormChunk`
&emailSubject=`New Message from No0b`
&emailTo=`[email protected]`
&emailFrom=`[email protected]`
&validate=`title:required,
yourname:required,
email:email:required,
address:required,
phone:PhoneValidate`
&successMessage=`Thank you for your request. We will follow up with you within 24 hours.`
]]