<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Web Form</title>
<script src="raxan/startup.js" type="text/javascript"></script>
<script src="views/scripts/css-webform.js" type="text/javascript"></script>
<style type="text/css">
.impress {
background: #DDE8AE;
border: 1px solid #fff;
border-left:2px solid #C6D880;
border-top:2px solid #C6D880;
padding:5px;
}
</style>
</head>
<body>
<div class="container c30 tpm">
<form id="frmStudent">
<div class="rax-box success c23">
<h4 class="box-title">General</h4>
<div class="pad clear">
<div id="pnlError" class="rax-box alert bmm hide clip">
The following fields are required:
</div>
<div>
<label class="left">First Name:<br /><input id="txtFName" name="txtFName" type="text" size="30" /></label>
<label class="left ltm">Last Name:<br /><input id="txtLName" name="txtLName" type="text" size="30" /></label><br />
<label class="left">Street:<br /><input id="txtStreet" name="txtStreet" type="text" size="40" /></label>
<label class="left ltm">City:<br /><input id="txtCity" name="txtCity" type="text" size="20" /></label><br />
<label class="left">State:<br />
<select name="lstCountry" class="c8">
<option>Brazil</option>
<option>Canada</option>
<option>France</option>
<option>Jamaica</option>
<option>United States</option>
<option>United Kingdom</option>
</select></label>
<label class="left ltm">State:<br /><input id="txtState" name="txtState" type="text" size="20" /></label>
<label class="left ltm">Zip:<br /><input id="txtZip" name="txtZip" type="text" size="11" /></label>
</div>
<hr class="space" />
<div class="impress" align="right">
<strong>Contact Via: </strong>
<label><input name="chkFeatures" type="checkbox" value="phone" /> Phone</label>
<label><input name="chkFeatures1" type="checkbox" value="email" /> Email</label>
<label><input name="chkFeatures2" type="checkbox" value="fax" /> Fax</label>
</div>
<div class="clear"></div>
</div>
<div class="hlf-pad " align="right">
<div id="status" class="left"></div>
<input id="btnSave" class="button process" type="button" value="Save" />
<input id="btnCancel" class="button cancel" type="button" value="Cancel" />
</div>
</div>
</form>
</div>
</body>
</html>
/**
* Web Form Code-Behind script
*/
Raxan.include('jquery');
Raxan.css('master').css('default/theme');
Raxan.bind('#btnSave','click',function(){
var pnl = $('#pnlError');
pnl.show('fast');
pnl.html('Sending data to sever. Click Cancel to continue.');
// include webform-part2.js
Raxan.include('scripts/css-webform-part2.js',true,function(){
showStatus(); // from webform-part2.js
// post data to server
var data = [];
d = $('#frmStudent').serializeArray()
$.each(d,function(i,f){ data[f.name] = f.value});
data.id = 12;
// Raxan.post('someurl.php',data);
})
return false;
})
Raxan.bind('#btnCancel','click',function(){
var pnl = $('#pnlError');
pnl.hide('fast');
// check if the clearStatus() function was loaded
if(self.clearStatus) clearStatus();
return false;
})