Hi,
I’m building a jQuery email form using the
http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ tutorial but need to find the form URL so I can post information via an AJAX call.
How do I find the URL used to post information from a EFORM?
Thanks
The details I’m looking to set would be:
$.ajax({
type: "POST",
url: "bin/process.php", // EFORM URL
data: dataString,
success: function() {
//display message back to user here
}
});
return false;
eform doesn’t have a json response mode, so I don’t think that will work without intercepting the code flow before the page is redrawn - perhaps using an eform event? You may be able to use eFormOnValidate to retrieve any error messages thta have been generated and return them as JSON to your ajax call.
at current using the "url: "page-alias-of-your-form.html", // EFORM URL" fails to send a message to my email address?
I have a live Ajax error warning setup so that empty input boxes are flaged before the form is submitted. However I would ideally like a copy of the posted information displayed within the thank you message.
the full code to my form
jQuery
// NEW PROJECT FORM
jQuery('.error').hide();
jQuery("#NewProjectForm input[type=submit]").click(function(){
// validate and process form here
jQuery("input").removeClass("errorField");
var name = jQuery("#NewProjectForm input[name=name]").val();
if (name == "") {
jQuery("#NewProjectForm input[name=name]").focus().addClass("errorField");
return false;
}
var email = jQuery("#NewProjectForm input[name=email]").val();
if (email == "") {
jQuery("#NewProjectForm input[name=email]").focus().addClass("errorField");
return false;
}
var phone = jQuery("#NewProjectForm input[name=telephone_number]").val();
var organisation_name = jQuery("#NewProjectForm input[name=organisation_name]").val();
if (organisation_name == "") {
jQuery("#NewProjectForm input[name=organisation_name]").focus().addClass("errorField");
return false;
}
var current_website = jQuery("#NewProjectForm input[name=current_website]").val();
var project_type = jQuery("#NewProjectForm select[name=project_type]").val();
var established_brand = jQuery("#NewProjectForm select[name=established_brand]").val();
var site_will = jQuery("#NewProjectForm select[name=site_will]").val();
var project_objective = jQuery("#NewProjectForm textarea[name=project_objective]").val();
var project_pages = jQuery("#NewProjectForm input[name=project_pages]").val();
var startproject = jQuery("#NewProjectForm input[name=startproject]").val();
var projectlaunch = jQuery("#NewProjectForm input[name=projectlaunch]").val();
var market_site = jQuery("#NewProjectForm textarea[name=market_site]").val();
var special_features = jQuery("#NewProjectForm textarea[name=special_features]").val();
var all_project_budget = jQuery("#NewProjectForm input[name=all_project_budget]").val();
var brand_project_budget = jQuery("#NewProjectForm input[name=brand_project_budget]").val();
var print_project_budget = jQuery("#NewProjectForm input[name=print_project_budget]").val();
var site_project_budget = jQuery("#NewProjectForm input[name=site_project_budget]").val();
var cms_project_budget = jQuery("#NewProjectForm input[name=cms_project_budget]").val();
var ecommerce_project_budget = jQuery("#NewProjectForm input[name=ecommerce_project_budget]").val();
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&organisation_name=' + organisation_name + '¤t_website=' + current_website + '&project_type=' + project_type + '&established_brand=' + established_brand + '&site_will=' + site_will + '&project_objective=' + project_objective + '&project_pages=' + project_pages + '&startproject=' + startproject + '&projectlaunch=' + projectlaunch + '&market_site=' + market_site + '&special_features=' + special_features + '&all_project_budget=' + all_project_budget + '&brand_project_budget=' + brand_project_budget + '&print_project_budget=' + print_project_budget + '&site_project_budget=' + site_project_budget + '&cms_project_budget=' + cms_project_budget + '&ecommerce_project_budget=' + ecommerce_project_budget;
//alert (dataString);return false;
jQuery.ajax({
type: "POST",
url: "contact-us#new-project",
data: dataString,
success: function() {
jQuery("form").after("display message to user here")
}
});
return false;
});
HTML
<p class="error">[+validationmessage+]</p>
<form id="NewProjectForm" method="post" action="[~[*id*]~]" class="contactForm">
<input name="formid" type="hidden" value="NewProjectForm" />
<h3>New Project Enquiry</h3>
<div class="contactDetails">
<h4>contact details:</h4>
<fieldset class="userDetails">
<label>your name: <input name="name" class="text required" type="text" eform="your name::1:" /> </label>
<label>email address: <input name="email" class="text required" type="text" eform="email address:1" /></label>
<label>contact telephone number: <input name="telephone_number" class="text optional" type="text" eform="contact telephone number::0" /></label>
</fieldset>
<h4>organisation details:</h4>
<fieldset class="clientDetails">
<label>organisation name: <input name="organisation_name" class="text required" type="text" eform="organisation name::1" /></label>
<label>current website: <input name="current_website" class="text optional" type="text" eform="current website::0" /></label>
</fieldset>
</div>
<fieldset class="mainDetails">
<h4>project details</h4>
<label>project type:
<select name="project_type" id="project_type">
<option value="all">new project</option>
<option value="brand">brand, logotype design</option>
<option value="print">design for print</option>
<option value="site">brochure, campaign website</option>
<option value="cms">content management system website</option>
<option value="ecom">e-commerce website</option>
</select></label>
<fieldset class="projectFields">
<div class="brand">do you have an established brand identity:
<select name="established_brand" id="established_brand">
<option value="">please select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select></div>
<div class="site cms ecom">will this site be:
<select name="site_will" id="site_will">
<option value="">please select</option>
<option value="a new concept">a new concept</option>
<option value="an addition to an existing site">an addition to an existing site</option>
<option value="remodelling an existing site">remodelling an existing site</option>
<option value="in association with an existing site">in association with an existing site</option>
</select></div>
<div class="all brand print site cms ecom">please briefly describe he ojbective of your project: <textarea name="project_objective" id="project_objective" rows="10" cols="40" eform="project objective:textarea:0" class="optional"></textarea></div>
<div class="site">how many pages will you require:
<div class="slider_amount">Price range (£): <input type="text" class="slider_value amount" name="project_pages" value="" eform="number_of_pages::0" />
<div class="slider"></div>
</div>
</div>
<div class="all brand print site cms ecom">when would you like to launch your new project: <input type="text" class="datepicker" name="startproject" /> <input type="text" class="datepicker" name="projectlaunch" /></div>
<div class="site cms ecom">how will/do you market the website (will you need additional help?): <textarea name="market_site" id="market_site" rows="10" cols="40" eform="how will/do you market your site:textarea:0" class="optional"></textarea></div>
<div class="site">will you require website hosting:
<select name="hosting" id="hosting">
<option value="">please select</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select></div>
<div class="cms ecom">any additional information, such as will the site require special features?: <textarea name="special_features" id="special_features" rows="10" cols="40" eform="additional information:textarea:0" class="optional"></textarea></div>
<div class="all">
<div class="slider_amount">Price range (£): <input type="text" class="all_amount" name="all_project_budget" value=" " eform="project budget::0" />
<div class="all_slider"></div>
</div>
</div>
<div class="brand">
<div class="slider_amount">Price range (£): <input type="text" class="brand_amount" name="brand_project_budget" value="from £200 " eform="brand project budget::0" />
<div class="brand_slider"></div>
</div>
</div>
<div class="print">
<div class="slider_amount">Price range (£): <input type="text" class="print_amount" name="print_project_budget" value="from £200" eform="print project budget::0" />
<div class="print_slider"></div>
</div>
</div>
<div class="site">
<div class="slider_amount">Price range (£): <input type="text" class="site_amount" name="site_project_budget" value="from £200" eform="site project budget::0" />
<div class="site_slider"></div>
</div>
</div>
<div class="cms">
<div class="slider_amount">Price range (£): <input type="text" class="cms_amount" name="cms_project_budget" value="from £1500" eform="content managed website budget::0" />
<div class="cms_slider"></div>
</div>
</div>
<div class="ecom">
<div class="slider_amount">Price range (£): <input type="text" class="ecom_amount" name="ecommerce_project_budget" value="from £2000" eform="e-commerce website budget::0" />
<div class="ecom_slider"></div>
</div>
</div>
</fieldset>
<input type="submit" name="submit" class="button" value="send message" />
</fieldset>
</form>
