JaKK0
Digital Twin Developer
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
200 XP
In our previous article, we create an If, Else, Else If Statement. Now, I want to share this with you on How To Use Textbox And Radio Buttons Using JavaScript. The program run is to accept the user input values in the text box and radio buttons then it will show after clicking the “Submit” button.
In the example below is to ask the users their full name and put into the textbox then they can select a programming language that they want to prefer to use for their project using our radio button, after clicking the “Submit” button it will display the data given by the users.
Form Field - HTML
This is the form field where the user types their name and choose their programming language.
JavaScript Script
This script will display the alert message box to the user.
And, this is the style.
This is the output.
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Download
In the example below is to ask the users their full name and put into the textbox then they can select a programming language that they want to prefer to use for their project using our radio button, after clicking the “Submit” button it will display the data given by the users.
Form Field - HTML
This is the form field where the user types their name and choose their programming language.
- <form
id
=
"form_data"
method
=
"post"
action
=
"#"
onSubmit
=
"return checkValue();"
>
<!-- you can pass the form here as well by doing: return checkValue(this); -->
- <table
cellpadding
=
"5"
cellspacing
=
"5"
>
- <tr
>
- <td
>
Enter your Full Name</
td
>
- <td
width
=
"15px"
></
td
>
- <td
><input
type
=
"text"
class
=
"text_input"
autofocus=
"autofocus"
name
=
"inputbox"
value
=
""
required></
td
>
- </
tr
>
- <tr
height
=
"15px"
>
- <td
></
td
>
- <td
></
td
>
- <td
></
td
>
- </
tr
>
- <tr
>
- <td
><input
type
=
"radio"
id
=
"1"
name
=
"choose_lang"
value
=
"1"
></
td
>
- <td
width
=
"15px"
></
td
>
- <td
><label
>
Java </
label
></
td
>
- </
tr
>
- <tr
>
- <td
><input
type
=
"radio"
id
=
"2"
name
=
"choose_lang"
value
=
"2"
></
td
>
- <td
width
=
"15px"
></
td
>
- <td
><label
>
C </
label
></
td
>
- </
tr
>
- <tr
>
- <td
><input
type
=
"radio"
id
=
"3"
name
=
"choose_lang"
value
=
"3"
></
td
>
- <td
width
=
"15px"
></
td
>
- <td
><label
>
C++ </
label
></
td
>
- </
tr
>
- <tr
>
- <td
><input
type
=
"radio"
id
=
"1"
name
=
"choose_lang"
value
=
"4"
></
td
>
- <td
width
=
"15px"
></
td
>
- <td
><label
>
C# </
label
></
td
>
- </
tr
>
- <tr
>
- <td
><input
type
=
"radio"
id
=
"2"
name
=
"choose_lang"
value
=
"5"
></
td
>
- <td
width
=
"15px"
></
td
>
- <td
><label
>
PHP </
label
></
td
>
- </
tr
>
- <tr
>
- <td
><input
type
=
"radio"
id
=
"3"
name
=
"choose_lang"
value
=
"6"
></
td
>
- <td
width
=
"15px"
></
td
>
- <td
><label
>
Python </
label
></
td
>
- </
tr
>
- <tr
>
- <td
colspan
=
"3"
><input
type
=
"submit"
class
=
"btn_control"
value
=
"Submit"
title
=
"Click here to see the result."
/
></
td
>
- </
tr
>
- </
table
>
- </
form
>
JavaScript Script
This script will display the alert message box to the user.
- <
script type=
"text/javascript"
>
- function
checkValue(
)
- {
- var
form =
document.getElementById
(
'form_data'
)
;
- var
form1 =
document.getElementById
(
'form_data'
)
.inputbox
.value
;
- var
f =
form1.toUpperCase
(
)
;
- for
(
var
i =
0
;
i <
form.choose_lang
.length
;
i++
)
- {
- if
(
form.choose_lang
[
i]
.checked
)
- {
- var
selectedValue =
form.choose_lang
[
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 as your Programming Language."
)
;
- }
- else
if
(
selectedValue==
2
)
{
- alert(
"Hi "
+
f +
" You have selected C as your Programming Language."
)
;
- }
- else
if
(
selectedValue==
3
)
{
- alert(
"Hi "
+
f+
" You have selected C++ as your Programming Language."
)
;
- }
- else
if
(
selectedValue==
4
)
{
- alert(
"Hi "
+
f +
" You have selected C# as your Programming Language."
)
;
- }
- else
if
(
selectedValue==
5
)
{
- alert(
"Hi "
+
f +
" You have selected PHP as your Programming Language."
)
;
- }
- else
if
(
selectedValue==
6
)
{
- alert(
"Hi "
+
f +
" You have selected Python as your Programming Language."
)
;
- }
- return
false
;
- }
- </
script>
And, this is the style.
- <style type=
"text/css"
>
- body {
- font-family
:
arial;
- font-size
:
25px
;
- color
:
blue
;
- }
- label {
- color
:
red
;
- font-size
:
20px
;
- }
- input[
type=
"radio"
]
{
- float
:
right
;
- }
- .text_input
{
- font-size
:
18px
;
- border
:
blue
1px
solid
;
- background
:
azure
;
- text-indent
:
5px
;
- width
:
300px
;
- }
- .btn_control
{
- font-size
:
18px
;
- border
:
blue
1px
solid
;
- color
:
blue
;
- background
:
skyblue
;
- padding
:
5px
;
- margin-right
:
20px
;
- border-radius
:
8px
;
- cursor
:
pointer
;
- }
- </style>
This is the output.

So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Download
You must upgrade your account or reply in the thread to view hidden text.