In this article I would like to share with you how to use text box and radio buttons using Javascript to accept user input values and process it along the way. What does the program will do is to ask the users name and then the user will select which programming language he or she prefer to use and then by choosing the submit button the values given by the user will be process and will display user alert message box of JavaScript.
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.
Sample Program Output
Program Listing
<!doctype html>
<html>
<head>
<style>
body {
font-family:arial;
font-size:25px;
color:blue;
}
label{
color:red;
margin-left: 15px;
font-size:20px;
vertical-align: middle;
}
input[type="radio"]{
float:left;
}
</style>
<meta charset="UTF-8">
<title>Text Box and Radio Buttons in JavaScript</title>
<script type="text/javascript">
function checkValue()
{
var form = document.getElementById('formBuzType');
var form1 = document.getElementById('formBuzType').inputbox.value;
var f = form1.toUpperCase();
for(var i = 0; i < form.buztype.length; i++)
{
if(form.buztype[i].checked)
{
var selectedValue = form.buztype[i].value;
}
}
if (form1.length == 0 ) {
alert("Name Cannot be empty");
form1.focus();
}
else if (form.length == 0 ) {
alert("Please select a check box");
form1.focus();
}
else if (selectedValue==1) {
alert("Hi " + f + " You have selected Java.");
}
else if (selectedValue==2) {
alert("Hi " + f + " You have selected C.");
}
else if (selectedValue==3) {
alert("Hi " + f+ " You have selected C++.");
}
else if (selectedValue==4) {
alert("Hi " + f + " You have selected C#.");
}
else if (selectedValue==5) {
alert("Hi " + f + " You have selected Pascal.");
}
else if (selectedValue==6) {
alert("Hi " + f + " You have selected BASIC.");
}
return false;
}
</script>
</head>
<body>
<form id="formBuzType" method="post" action="#" onSubmit="return checkValue();" > <!-- you can pass the form here as well by doing: return checkValue(this); -->
Enter your name <INPUT TYPE="text" NAME="inputbox" VALUE="" required><P>
<input type="radio" id="1" name="buztype" value="1"> <label> Java </label><br>
<input type="radio" id="2" name="buztype" value="2"><label> C </label> <br>
<input type="radio" id="3" name="buztype" value="3"><label>C++ </label><br>
<input type="radio" id="1" name="buztype" value="4"><label>C# </label><br>
<input type="radio" id="2" name="buztype" value="5"> <label>Pascal</label> <br>
<input type="radio" id="3" name="buztype" value="6"><label>BASIC </label><br>
<br>
<input type="submit" value="Submit" title="Click here to see the result."/>
</form>
</body>
</html>
