Menu
Hi, I’m really new to javascript, just started yesterday. I have a simple login form with a radio button, a username text box, and a password text box. I think I have the javascript for validating the form, it gives an alert when a user does not select a radio button and fill in the other 2 fields.
If the user selects a radio button and fill in the other 2 fields,I want them to get a confirmation asking if they want to login. I think I have that also. What I do not know how to do is:
If they click the “OK” button in the confirmation box, can I get an alert that captures what they are submitting as the login, shows it in the alert then give them the option to click “OK” before submitting the form.
Here is the javascript and HTML I’ve got so far. Any help and suggestion would be greatly appreciated.
Thanks. kky
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Form 1</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link href=”form.css” rel=”stylesheet” type=”text/css”>
<script language=”javascript” type=”text/javascript”>
<!–
function isValidRadio(radio)
{
var valid = false;
for (var i = 0; i < radio.length; i++)
{
if (radio[i].checked)
{
return true;
}
}
alert(“Please enter all fields.”);
return false;
}
function isNotEmpty(elem)
{
var str = elem.value;
var re = /.+/;
if(!str.match(re))
{
alert(“Please enter all fields.”);
return false;
}
else
{
return true;
}
}
function validate(form)
{
if (isValidRadio(form.status))
{
if (isNotEmpty(form.username))
{
if (isNotEmpty(form.password))
{
window.confirm(“Do you want to login?”);
return true;
}
}
}
return false;
}
//–>
</script>
</head>
<body>
<form name=”frm1″ onSubmit=”return validate(this)”>
<table>
<tr>
<td colspan=”2″><h1>Form 1 </h1>
<table class=”border”>
<tr>
<td colspan=”2″><h2>Select your UVic Status</h2></td>
</tr>
<tr>
<td>
<input type=”radio” name=”status” value=”student”> Student
</td>
<td>
<input type=”radio” name=”status” value=”staff”> Staff
</td>
</tr>
<tr>
<td>Username:
</td>
<td>
<input type=”text” name=”username”>
</td>
</tr>
<tr>
<td>Password:
</td>
<td>
<input type=”password” name=”password”>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”image” src=”login.gif” name=”imgLogin”>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>