Rich Ajax Application Framework

Form Post Back

Demo showing how to handle form post and validation checks.



PHP Source:
<?php

require_once("raxan/pdi/gateway.php");

class MyPage extends RaxanWebPage {

    protected $frm;
    protected $preserveFormContent = true; // redisplay form values

    protected function _init() {
        // load the html page
        $this->source('views/signup-form.html');
        $this->loadCSS('master');
    }

    protected function signup($e) {    // event callback
        $msg = array();
        $data = $this->sanitizePostBack();
        $pwd = $data->value('password'); $cpwd = $data->value('cpassword');

        // validate user input
        if (!$data->value('name')) $msg[] ='Please enter your user name.';
        if (!$data->isEmail('email')) $msg[] ='Please enter a valid email adress.';
        if (!$pwd) $msg[] ='Please enter a valid password.';
        else if ($pwd!=$cpwd) $msg[] ='Password typed mismatched.';
        if (!$data->isUrl('website')) $msg[] ='Please enter a valid website.';
        if (count($msg)>0) {
            $msg = '<strong>'.implode('<br />',$msg).'</strong>';
            $this['#msg']->html($msg)->show();
        }
        else {
            // ... code save form data here ...

            // display success message
            $this['form fieldset']->html('<div class="success">Signup was successfull.</div>');
        }
    }
}


RaxanWebPage::Init('MyPage');

?>

Plugin Source:

HTML Source (views/signup-form.html):
<style type="text/css">
    label {display:block; float:left;width:120px}
</style>
<div class="container c35">
    <h2>Sign up</h2>
    <form class="c20" method="post">
        <fieldset>
            <legend>Sign up form</legend>
                <div id="msg" class="notice hide bmm"></div>
                <label>User name:</label><input type="text" name="name" class="textbox c10" /><br />
                <label>Password:</label><input type="password" name="password" class="textbox c10" /><br />
                <label>Retype Password:</label><input type="password" name="cpassword" class="textbox c10" /><br />
                <label>Email:</label><input type="text" name="email" class="textbox c10" /><br />
                <label>Website:</label><input type="text" name="website" class="textbox c10" /><br />
                <hr />
                <input type="submit" value="Submit" xt-bind="click,signup"/>
        </fieldset>
    </form>
</div>

Data Source: