<!DOCTYPE html>
<!-- first form
-->
<html lang = "en">
<head>
<title> Our first form </title>
<meta charset = "utf-8" />
<style type = "text/css">
label, input {display: block; }
label { float: left; width:180px; text-align: right; margin-bottom: 15px; clear: left;}
input { margin-left:200px; margin-bottom: 30px;}
</style>
<script type = "text/javascript" src = "getInformation.js">
</script>
</head>
<body>
<h2>Enter your information</h2>
<form name= "myform">
<label>First name:</label> <input type="text" name="firstname" id="first" />
<label>Last name:</label> <input type="text" name="lastname" id="second" />
<input type = "button" value="Done"
onClick = "validateForm()" />
<input type ="reset" value = "reset the form" />
</form>
<p id="info"></p>
</body>
</html>
|
function getInfo(form)
{
var first = form.elements[0].value;
var last = form.elements[1].value;
var outString=first + " " + last + ", nice to meet you.";
document.getElementById("info").innerHTML = outString; //Write it on the same screen as the form
}
function validateForm()
{
var x=document.forms[0]["firstname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
var p=x.search(/^[A-Z][a-z]+$/);
if(p<0){
alert("First name starts with a capital letter followed by lower case.");
return false;
}
var y=document.forms[0]["lastname"].value;
if (y==null || y=="")
{
alert("Last name must be filled out");
return false;
}
p=y.search(/^[A-Z][a-z]+$/);
if(p<0){
alert("Last name starts with a capital letter followed by lower case.");
return false;
}
getInfo(myform);
}
|