Hey, did you get any success with this? If so could you post your experience?
I’ve had success using eform with jQuery ajax forms plugin... but if I use eform validation (server side) It has issues... I’m planning on using client side validation for now and investigating how to modify eform server side to just provide the validation message as the response rather than merge it with the placeholder.... which is the problem I’m having... the browser goes into a loop when it tries to load itself into itself ;p
Here is eform snippet call:
[!eForm? &formid=`newsLetterSignup` &tpl=`form_newsLetterSignup`
&report=`formReport_newsLetterSignup` &gotoid=`166`
&subject=`Example subject` &to=`[email protected]`
&from=`[email protected]` &fromname=`Example Namet`
&replyto=`[email protected]` &automessage=`157`
&autosender=`[email protected]` &sendAsHTML=`report,automessage`
&protectSubmit=`0` &vericode=`1` !]
Here is an example form:
<script type="text/javascript" src="/assets/js/jQuery/jquery.js"></script>
<script type="text/javascript" src="/assets/js/jQuery/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
target: '#ajaxResponse', // target element(s) to be updated with server response
//beforeSubmit: showRequest, // pre-submit callback
//success: showResponse // post-submit callback
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind form using 'ajaxForm'
$('#newsLetterSignup').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
alert('About to submit: \n\n' + queryString);
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
</script>
[+phx:if=`[+validationmessage+]`:isnot=``:then=`<div style="color: #ff0000;">[+validationmessage+]</div>`+]
<form action="[~[*id*]~]" method="post" id="newsLetterSignup" name="newsLetterSignup" >
<table cellspacing="0" cellpadding="3" border="0">
<tr>
<td width="100"><label>Name: </label></td><td><INPUT name="name" "id="name" size="20" eform="Name:string:1:Name is a required field"></td>
</tr>
<tr>
<td><label>Email: </label></td><td><INPUT name="email" id="email" size="20" maxsize="50" eform="Email:email:1:Email is a required field"></td>
</tr>
<tr>
<td><label style="line-height: 1.2em;">Type in the code shown to verify your input.</label></td>
<td><input type="text" name="vericode" size="20"></td>
<tr>
<td> </td><td>
<img src="[+verimageurl+]" alt="verification code" border="1">
</td>
<tr>
<td>
</td>
</tr>
<tr>
<td> </td><td><INPUT type="submit" name="Send" value="Sign Up!" ></td>
</tr>
</table>
</form>
Here is example report:
<h3>Newsletter Signup Form Information</h3>
<table>
<tr>
<td>Name :</td><td>[+name+]</td>
</tr><tr>
<td>E-mail :</td><td>[+email+]</td>
</tr>
</table>
Then I use a document with ’blank’ template and some content, which is used to update the target div #ajaxResponse on teh page with the snippet call
Example response message to let the user know that they've successfully submitted the form.
