A simple program that will ask the user to give his or her name and the user select which of the two gender male or female using radio buttons after that when the user click the ok button our program will greet the user and then it will tell whether the user is a male or female.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
My mobile number here in the Philippines is 09173084360.
Sample Program Output
Program Listing
<html>
<head>
<title>Gender Checker</title>
<style>
body {
font-family:arial;
font-size:18px;
}
label{
width: 7em;
float: left;
text-align: right;
margin-right: 0.8em;
display: block
}
h1 {
font-family:arial;
font-size:25px;
padding-left: 75px;
}
.message {
color: blue;
font-family:arial;
font-size:18px;
font-weight:bolder;
padding-left: 38px;
}
.warning {
color: red;
font-family:arial;
font-size:18px;
font-weight:bolder;
padding-left: 38px;
}
.move {
padding-left: 10px;
}
.space {
padding-left: 38px;
}
</style>
<script>
function process_values() {
var genders = document.getElementsByName("gender");
var user = document.getElementById("user").value;
if (user=="") {
var msg = "<span class='warning'>Please write your name!</span>";
document.getElementById('msg').innerHTML = msg;
return false;
}
if (genders[0].checked == true) {
results = "<span class='message'> Hello "
+ user.toUpperCase() + ". Your gender is Male. </span>" ;
document.getElementById('msg').innerHTML = results;
return false;
} else if (genders[1].checked == true) {
results ="<span class='message'> Hello "
+ user.toUpperCase() + ". Your gender is Female. </span>";
document.getElementById('msg').innerHTML = results;
return false;
} else {
var msg = "<span class='warning'>You must select your gender!</span>";
document.getElementById('msg').innerHTML = msg;
return false;
}
return true;
}
function reset_msg() {
document.getElementById('msg').innerHTML = '';
}
function clear_all()
{
document.getElementById('msg').innerHTML = "";
genders="";
user="";
genders.focus();
}
</script>
</head>
<body>
<br>
<h1> Gender Checker </h1>
<form action="" method="POST">
<label for="name">Name </label>
<input type="text" name="user" id="user" size="30" autofocus>
<br><br>
<label class="move">Gender</label>
<br /><br>
<label class="move">
<input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
</label>
<label for="radio2">
<input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
</label>
<br><br>
<input type="submit" value="Ok" onclick="return process_values();" />
<input type="submit" value="Clear" onclick="return clear_all();" />
<br><br>
<div class="space" id="msg"></div>
</form>
</body>
</html>
No comments:
Post a Comment