mirror of
https://gitlab.com/harald.mueller/aktuelle.kurse.git
synced 2024-11-24 18:51:56 +01:00
134 lines
4.8 KiB
HTML
134 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script type="text/javascript" src="ajax_form.js"></script>
|
|
<style>
|
|
.error {
|
|
display: none;
|
|
color: #a00000;
|
|
font-weight: bold;
|
|
}
|
|
#progress {
|
|
visibility: hidden;
|
|
color: #00a000;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
function HideAllErrorFields () {
|
|
for (var i = 1; i <= 4; i++) {
|
|
var field = document.getElementById ("error" + i);
|
|
field.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function ShowErrorFields (idsStr) {
|
|
var ids = idsStr.split (",");
|
|
for (var i = 0; i < ids.length; i++) {
|
|
var field = document.getElementById ("error" + ids[i]);
|
|
if (field) {
|
|
field.style.display = "block";
|
|
}
|
|
}
|
|
}
|
|
|
|
var registering = false;
|
|
|
|
function OnReadyStateChanged (httpRequest, form) {
|
|
if (httpRequest.readyState == 0 || httpRequest.readyState == 4) {
|
|
|
|
registering = false;
|
|
StopAnim ();
|
|
|
|
// prevent memory leaks
|
|
httpRequest.onreadystatechange = null;
|
|
|
|
if (IsRequestSuccessful (httpRequest)) { // defined in ajax_form.js
|
|
if (httpRequest.responseText === "ok") { // registration is successful
|
|
alert ("Thank you for registering");
|
|
/*
|
|
// if redirection is required
|
|
location.href = "/index.php";
|
|
*/
|
|
}
|
|
else { // some fields are invalid
|
|
ShowErrorFields (httpRequest.responseText);
|
|
}
|
|
}
|
|
else {
|
|
alert ("An error occurred while registering. Please try it again.");
|
|
}
|
|
}
|
|
}
|
|
|
|
function AjaxSend (form, url, method) {
|
|
// avoid resend data while registering
|
|
if (registering) {
|
|
return;
|
|
}
|
|
// hide all error fields
|
|
HideAllErrorFields ();
|
|
|
|
// get message data
|
|
var data = GetMessageBody (form); // defined in ajax_form.js
|
|
|
|
// send the request
|
|
var httpRequest = CreateRequestObj (); // defined in ajax_form.js
|
|
// try..catch is required if working offline
|
|
try {
|
|
httpRequest.open (method, url, true); // asynchron
|
|
httpRequest.onreadystatechange = function () {OnReadyStateChanged (httpRequest, form)};
|
|
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
|
httpRequest.send (data);
|
|
}
|
|
catch (e) {
|
|
alert ("Cannot connect to the server!");
|
|
return;
|
|
}
|
|
|
|
registering = true;
|
|
StartAnim ();
|
|
}
|
|
|
|
// blinking text
|
|
var animTimerId = 0;
|
|
function StartAnim () {
|
|
var progress = document.getElementById ("progress");
|
|
progress.style.visibility = "visible";
|
|
animTimerId = setInterval (RegAnim, 100);
|
|
}
|
|
function RegAnim () {
|
|
var progress = document.getElementById ("progress");
|
|
progress.style.visibility = (progress.style.visibility == "visible") ? "hidden" : "visible";
|
|
}
|
|
function StopAnim () {
|
|
var progress = document.getElementById ("progress");
|
|
progress.style.visibility = "hidden";
|
|
clearInterval (animTimerId);
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
This is a sample registration form.
|
|
The username must be between 2 and 20 characters, the password must be between 6 and 20 characters.
|
|
A user named Dottoro is already registered.
|
|
<br />
|
|
Try to register both valid and invalid values!
|
|
<br /><br />
|
|
<form onsubmit="AjaxSend (this, 'register_delay.php', 'post'); return false;">
|
|
User Name: <input type="text" name="userName" />
|
|
<div class="error" id="error1">Must be between 2 and 20 characters.</div>
|
|
<div class="error" id="error2">A user already exists with the same name.</div>
|
|
<br /><br />
|
|
Password: <input type="password" name="password" />
|
|
<div class="error" id="error3">Must be between 6 and 20 characters.</div>
|
|
<br /><br />
|
|
Repeat Password: <input type="password" name="repassword" />
|
|
<div class="error" id="error4">Must be the same as the password.</div>
|
|
<br /><br />
|
|
<input type="submit" value="Register" />
|
|
<div id="progress">Registering</div>
|
|
</form>
|
|
</body>
|
|
|
|
</html> |