<!--
/*
* testAJAXLoadContent.html
*
* @(#) $Id: testAJAXLoadContent.html,v 1.6 2014/07/08 04:29:15 mlemos Exp $
*
*/
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test for Manuel Lemos' AJAX Load Content JavaScript Object</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
// --></style>
<script src="ajaxLoadContent.js" type="text/javascript"></script>
<script type="text/javascript"><!--
var submitInput = "submit";
function SubmitViaAJAX()
{
var loadContent, success;
/*
* Create a ajaxLoadContent object
*/
loadContent = new ML.content.ajaxLoadContent();
/*
* Tell the object to parse the AJAX response and
* retrieve the out of band header information.
*/
loadContent.jsonResponseHeader = true;
success = loadContent.submitForm('subscription_form', submitInput,
/*
* Callback function in case it succeeded to get the response
*/
function(lc, response) {
var element;
/*
* Get the page element to insert the result
* from the response header element
*/
element = response.header.element;
/*
* Insert the HTML code in the feedback element
* and execute any JavaScript code it contains.
*/
lc.loadCode(element, response.body);
},
/*
* Callback function in case it failed to get the response
*/
function(lc)
{
alert(lc.error);
}
);
/*
* If it failed to send the AJAX request,
* return false to fallback to regular form submission
*/
if(!success)
{
alert('Error: ' + loadContent.error);
return false;
}
return true;
}
// --></script>
</head>
<body>
<center><h1>Test for Manuel Lemos' AJAX Load Content JavaScript Object</h1></center>
<hr />
<form method="POST" action="testAJAXLoadContent.php" id="subscription_form" onsubmit="return !SubmitViaAJAX();">
<div id="feedback" style="text-align: center;"></div>
<br />
<div id="wholeform">
<center><table summary="Form table" border="1" bgcolor="#c0c0c0" cellpadding="2" cellspacing="1">
<tr>
<td bgcolor="#000080" style="border-style: none;"><font color="#ffffff"><b>Form class test</b></font></td>
</tr>
<tr>
<td style="border-style: none;"><center><table summary="Input fields table">
<tr>
<th align="right"><label for="email" accesskey="E"><u>E</u>-mail address</label>:</th>
<td><input type="text" name="email" maxlength="100" onchange="new_value=value; if(new_value.toLowerCase) new_value=new_value.toLowerCase() ; if(new_value!=value) value=new_value ;" id="email" accesskey="E" /></td>
</tr>
<tr>
<th align="right"><label for="credit_card_number" accesskey="n">Credit card <u>n</u>umber</label>:</th>
<td><input type="text" name="credit_card_number" size="20" id="credit_card_number" accesskey="n" /></td>
<td>[Optional]</td>
</tr>
<tr>
<th align="right"><label for="credit_card_type" accesskey="y">Credit card t<u>y</u>pe</label>:</th>
<td><select name="credit_card_type" id="credit_card_type" size="1">
<option value="pick" selected="selected">Pick a credit card type</option>
<option value="unknown">Unknown</option>
<option value="mastercard">Master Card</option>
<option value="visa">Visa</option>
<option value="amex">American Express</option>
<option value="dinersclub">Diners Club</option>
<option value="carteblanche">Carte Blanche</option>
<option value="discover">Discover</option>
<option value="enroute">enRoute</option>
<option value="jcb">JCB</option>
</select></td>
<td></td>
</tr>
<tr>
<th align="right">
<label for="user_name" accesskey="P"><u>P</u>ersonal name</label>:</th>
<td><input type="text" name="user_name" maxlength="60" id="user_name" accesskey="P" /></td>
<td></td>
</tr>
<tr>
<th align="right">
<label for="age" accesskey="A"><u>A</u>ge</label>:</th>
<td><input type="text" name="age" id="age" accesskey="A" /></td>
<td></td>
</tr>
<tr>
<th align="right">
<label for="weight" accesskey="W"><u>W</u>eight</label>:</th>
<td><input type="text" name="weight" id="weight" accesskey="W" /></td>
<td></td>
</tr>
<tr>
<th align="right">
<label for="home_page" accesskey="o">H<u>o</u>me page</label>:</th>
<td><input type="text" name="home_page" id="home_page" accesskey="o" /></td>
<td></td>
</tr>
<tr>
<th align="right">
<label for="alias" accesskey="s">Acce<u>s</u>s name</label>:</th>
<td><input type="text" name="alias" maxlength="20" id="alias" accesskey="s" /></td>
<td></td>
</tr>
<tr>
<th align="right">
<label for="password" accesskey="d">Passwor<u>d</u></label>:</th>
<td><input type="password" name="password" id="password" accesskey="d" /></td>
<td rowspan="2"></td>
</tr>
<tr>
<th align="right">
<label for="confirm_password" accesskey="C"><u>C</u>onfirm password</label>:</th>
<td><input type="password" name="confirm_password" id="confirm_password" accesskey="C" /></td>
</tr>
<tr>
<th align="right">
<label for="reminder" accesskey="r">Password <u>r</u>eminder</label>:</th>
<td><input type="text" name="reminder" id="reminder" accesskey="r" /></td>
<td></td>
</tr>
<tr>
<th align="right" valign="top"><label for="interests" accesskey="I"><u>I</u>nterests</label>:</th>
<td><select name="interests[]" multiple="multiple" id="interests" size="4">
<option value="arts">Arts</option>
<option value="business">Business</option>
<option value="computers">Computers</option>
<option value="education">Education</option>
<option value="entertainment">Entertainment</option>
<option value="health">Health</option>
<option value="news">News</option>
<option value="politics">Politics</option>
<option value="sports">Sports</option>
<option value="science">Science</option>
<option value="other" selected="selected">Other</option>
</select></td>
<td></td>
</tr>
<tr>
<th colspan="3">When approved, receive notification by:</th>
</tr>
<tr>
<th align="right">
<label for="email_notification" accesskey="m">E-<u>m</u>ail</label>:</th>
<td><input type="checkbox" name="notification[]" value="email" id="email_notification" accesskey="m" /></td>
<td rowspan="2"></td>
</tr>
<tr>
<th align="right">
<label for="phone_notification" accesskey="h">P<u>h</u>one</label>:</th>
<td><input type="checkbox" name="notification[]" value="phone" id="phone_notification" accesskey="h" /></td>
</tr>
<tr>
<th colspan="3">Subscription type:</th>
</tr>
<tr>
<th align="right">
<label for="administrator_subscription" accesskey="i">Adm<u>i</u>nistrator</label>:</th>
<td><input type="radio" name="subscription_type" value="administrator" id="administrator_subscription" accesskey="i" /></td>
<td rowspan="3"></td>
</tr>
<tr>
<th align="right">
<label for="user_subscription" accesskey="U"><u>U</u>ser</label>:</th>
<td><input type="radio" name="subscription_type" value="user" id="user_subscription" accesskey="U" /></td>
</tr>
<tr>
<th align="right">
<label for="guest_subscription" accesskey="G"><u>G</u>uest</label>:</th>
<td><input type="radio" name="subscription_type" value="guest" id="guest_subscription" accesskey="G" /></td>
</tr>
<tr>
<th align="right">
<label for="toggle" accesskey="b">Toggle <u>b</u>utton</label>:</th>
<td><input type="button" name="toggle" value="On" id="toggle" accesskey="b" /></td>
<td > </td>
</tr>
<tr>
<th align="right">
<label for="upload" accesskey="f">Upload <u>f</u>ile</label>:</th>
<td><input type="file" name="upload" id="upload" accesskey="f" /></td>
<td > </td>
</tr>
<tr>
<td colspan="3" align="center"><hr /></td>
</tr>
<tr>
<th align="right">
<label for="agree" accesskey="t">Agree with the <u>t</u>erms</label>:</th>
<td><input type="checkbox" name="agree" value="Yes" id="agree" accesskey="t" /></td>
<td ></td>
</tr>
<tr>
<td colspan="3" align="center"><hr /></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" name="submit" value="Regular submit button" onclick="submitInput='submit'" /></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="image" name="image" src="http://files.phpclasses.org/graphics/add.gif" alt="Submit subscription" id="button_subscribe" accesskey="u" align="top" onclick="submitInput='image'"/> Image Submit button</td>
</tr>
<tr>
<td colspan="3" align="center"><button type="submit" name="button" id="button_subscribe_with_content" accesskey="c" onclick="submitInput='button'"><img align="top" src="http://files.phpclasses.org/graphics/add.gif" style="border-width: 0px;" alt="Submit button with content"/> Submit button with <u>c</u>ontent</button><input type="hidden" name="doit" value="1"/></td>
</tr>
</table></center>
</td>
</tr>
</table></center>
</div></form>
</body>
</html>
|
Download
