[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpform
/
zpform
/
demo
/
[
Home
]
File: ajax_submit.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" This form uses the Zapatec Transport module to send its content to server without refreshing the page. Specify asyncSubmitFunc config parameter in Zapatec.Form constructor to determine that you want to submit form using AJAX. asyncSubmitFunc must be a reference to function. This function will be called after successful form submit. You can use it for hiding <FORM> element, for example. While submiting, all submit buttons in a form will be disabled. Server must respond with JSON object of following structure: { 'success': true, 'callbackArgs': {...} } If callbackArgs are given - they will be passed to asyncSubmitFunc function. If submit was unsuccessful then following result will be returned { 'success': false, 'generalError': 'These Login Name and Email Address already exist in database', 'fieldErrors': { 'name': 'Please enter another Login Name' } } generalError will be displayed using submitErrorFunc function and error message for each field will be displayed as well. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Form Widget - Submit form to server using AJAX</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type='text/javascript' src='../src/form.js'></script> <script type='text/javascript' src='demo.js'></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <!-- Theme css --> <link href="../themes/winxp.css" rel="stylesheet" type="text/css"> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Submit form to server using AJAX</div> <div class='zpCalDemoText'> <ul> <li>This demo uses the <b>winxp theme</b>.</li> <li>This form uses the Zapatec Transport module to send its content to server without refreshing the page.</li> <li>Specify <i>asyncSubmitFunc</i> config parameter in Zapatec.Form constructor to determine that you want to submit form using AJAX.</li> <li><i>asyncSubmitFunc</i> must be a reference to function. This function will be called after successful form submit. You can use it for hiding <FORM> element, for example.</li> <li>While submiting, all submit buttons in a form will be disabled.</li> <li>Server must respond with JSON object of following structure: <pre>{ "success": true, "callbackArgs": {...} }</pre> If <i>callbackArgs</i> are given - they will be passed to <i>asyncSubmitFunc</i> function.<br /> If submit was unsuccessful then following result will be returned <pre>{ "success": false, "generalError": "These Login Name and Email Address already exist in database", "fieldErrors": { "name": "Please enter another Login Name" } }</pre> <i>generalError</i> will be displayed using <i>submitErrorFunc</i> function and error message for each field will be displayed as well. </li> </ul> </div> <form action="validate_ajax.php" id='userForm' class="zpFormWinXP" method="get"> <div id='errOutput' class="errOutput"></div> <fieldset> <legend>Personal information</legend> <label class='zpFormLabel'>Login Name</label> <input class='zpFormRequired' value="" size="40" name="name" type="text" /> <br /> <br /> <label class='zpFormLabel'>Password</label> <input class='zpFormRequired' value="" size="40" name="password1" type="password" /> <br /> <br /> <label class='zpFormLabel'>Password Again</label> <input class='zpFormRequired' value="" size="40" name="password2" type="password" /> <br /> <br /> <label class='zpFormLabel'>Email Address</label> <input value="" size="40" name="email" type="text" class='zpFormRequired zpFormEmail' /> <br /> </fieldset><br /> <input value="Submit" name="Submit" onclick="" type="submit" class="button" /> <input value="Clear" name="Clear" onclick="" type="reset" class="button" /> </form> <script type="text/javascript"> // Run this to auto-activate all "zpForm" class forms in the document. Zapatec.Form.setupAll({ showErrors: 'afterField', showErrorsOnSubmit: true, submitErrorFunc: testErrOutput, asyncSubmitFunc: myOnSuccess, busyConfig: { busyContainer: "userForm" } }); checkIfLoadedFromHDD(); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Form Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>