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.
<?php
function ajaxOnValidateFunction(&$fields, &$vMsg, &$rMsg){
global $modx;
//check if this is an ajax call
if( $_REQUEST['ajax_call']=='whatever' ){
//build response
//required fields
if(count($rMsg)>0){
$response = '<requiredErrors>';
foreach($rMsg as $fldName ){
//do whatever you need here
$response .= '<field>'.$fldname.'</field>';
}
$response .= '</requiredErrors>';
}
//invalid fields
if(count($vMsg)>0){
$response .= '<validationErrors>';
foreach($vMsg as $errMsg){
//do whatever you need here
$response .= '<message>'.$errMsg.'<message>';
}
$response .= '</validationErrors>';
}
if($response) $fields['ajax_response'] = $response;
return true;
}
}
function ajaxOnBeforeMergeFunction(&$fields,&$templates){
if( isset($fields['ajax_response']) ){
$templates['tpl'] = "<responseObject>[+ajax_response+]</responseObject>";
}
return true;
}
?><?php
//find the OnBeforeFormMerge code around line 598 and make teh below changes
# invoke OnBeforeFormMerge event set by another script
# Remember to treat $fields parameter as a reference in function
if ($eFormOnBeforeFormMerge) {
if( $isDebug && !function_exists($eFormOnBeforeFormMerge))
$fields['debug'] .= "eFormOnBeforeFormMerge event: Could not find the function " . $eFormOnBeforeFormMerge;
else
//MOD! add the templates to the function call
$templates = array('tpl'=>$tpl,'report'=>$report,'thankyou'=>$thankyou,'autotext'=>$autotext);
if ($eFormOnBeforeFormMerge($fields,$templates)===false)
return;
elseif(is_array($templates))
extract($templates);
else
return '';
//end MOD
}
?>
Parse error: syntax error, unexpected T_STRING in /home/brilli5/public_html/acnease/assets/snippets/eformAjax/eform.inc.php on line 611
<p> [!eForm? &formid=`RCSContactForm` &to=`[email protected]` &tpl=`RCSContactForm` &report=`RCSContactFormReport` &thankyou=`RCSContactFormThanks` &vericode=`1` &subject=`RCS inquiry`!] </p>
<p class="error">[+validationmessage+]</p>
<p>For more information or assistance please fill out the form below.</p>
<form method="post" enctype="multipart/form-data" action="[~[*id*]~]">
<input type="hidden" name="formid" value="RCSInquiryForm" />
<p><label accesskey="n" for="Name">Your Name:</label><br />
<input type="text" name="Name" maxlength="60" eform="Your Name::1" />*</p>
<p><label accesskey="e" for="email">Your Email Address:</label><br />
<input type="text" name="email" size="40" maxlength="40" eform="Your Email Address:email::1" />*</p>
<p><label accesskey="w" for="workphone">Your work phone number:</label><br />
<input type="text" name="workphone" size="40" maxlength="80" eform="Your work phone number:workphone:1" />*</p>
<p><label accesskey="m" for="mobile">Your mobile phone number:</label><br />
<input type="text" name="mobile" size="40" maxlength="80" eform="Your mobile phone number:mobile:1" />*</p>
<p><label accesskey="c" for="company">Your company:</label><br />
<input type="text" name="company" size="40" maxlength="80" eform="Your company:company:1" />*</p>
<p><label accesskey="a" for="address">Address:</label><br />
<textarea cols="40" rows="10" name="address" eform="Address:textarea:1"></textarea>*</p>
<p><label accesskey="e" for="enquiry">Enquiry:</label><br />
<textarea cols="40" rows="10" name="enquiry" eform="Enquiry:textarea:1"></textarea>*</p>
<p>
Please enter the anti spam code below:<br />
<img src="[+verimageurl+]" alt="verification code" border="1"/>
</p>
<p>
<label accesskey="v" for="vericode">code</label>
<input type="text" name="vericode" size="20" />*
</p>
<input type="submit" name="frmGo" value="Send inquiry" />
</form>
<h3>Thank you for your inquiry.</h3> <p>an RCS staff member will be in contact with you very shortly.</p> <p>Below is a copy of your message:</p> <table> <tr><td>Name:</td><td>[+Name+]</td></tr> <tr><td>Email address:</td><td>[+email+]</td></tr> <tr><td>Work phone:</td><td>[+workphone+]</td></tr> <tr><td>Mobile phone:</td><td>[+mobile+]</td></tr> <tr><td>Company:</td><td>[+company+]</td></tr> <tr><td>Address:</td><td>[+address+]</td></tr> <tr><td>Enquiry:</td><td>[+enquiry+]</td></tr> </table>
<p>Below is the contents of an inquiry sent from the RCS website:</p> <table> <tr><td>Name:</td><td>[+Name+]</td></tr> <tr><td>Email address:</td><td>[+email+]</td></tr> <tr><td>Work phone:</td><td>[+workphone+]</td></tr> <tr><td>Mobile phone:</td><td>[+mobile+]</td></tr> <tr><td>Company:</td><td>[+company+]</td></tr> <tr><td>Address:</td><td>[+address+]</td></tr> <tr><td>Enquiry:</td><td>[+enquiry+]</td></tr> </table> <p>You can use this link to reply: <a href="mailto:[+email+]?subject=RE: [+subject+]">[+email+]</a></p>
☆ A M B ☆
This discussion is closed to further replies. Keep calm and carry on.