• We just launched and are currently in beta. Join us as we build and grow the community.

How To Use Textbox And Radio Buttons Using JavaScript

JaKK0

Digital Twin Developer
J Rep
0
0
0
Rep
0
J Vouches
0
0
0
Vouches
0
Posts
102
Likes
110
Bits
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.

  1. <form

    id

    =

    "form_data"

    method

    =

    "post"

    action

    =

    "#"

    onSubmit

    =

    "return checkValue();"

    >

    <!-- you can pass the form here as well by doing: return checkValue(this); -->
  2. <table

    cellpadding

    =

    "5"

    cellspacing

    =

    "5"

    >
  3. <tr

    >
  4. <td

    >

    Enter your Full Name</

    td

    >
  5. <td

    width

    =

    "15px"

    ></

    td

    >
  6. <td

    ><input

    type

    =

    "text"

    class

    =

    "text_input"

    autofocus=

    "autofocus"

    name

    =

    "inputbox"

    value

    =

    ""

    required></

    td

    >
  7. </

    tr

    >
  8. <tr

    height

    =

    "15px"

    >
  9. <td

    ></

    td

    >
  10. <td

    ></

    td

    >
  11. <td

    ></

    td

    >
  12. </

    tr

    >
  13. <tr

    >
  14. <td

    ><input

    type

    =

    "radio"

    id

    =

    "1"

    name

    =

    "choose_lang"

    value

    =

    "1"

    ></

    td

    >
  15. <td

    width

    =

    "15px"

    ></

    td

    >
  16. <td

    ><label

    >

    Java </

    label

    ></

    td

    >
  17. </

    tr

    >
  18. <tr

    >
  19. <td

    ><input

    type

    =

    "radio"

    id

    =

    "2"

    name

    =

    "choose_lang"

    value

    =

    "2"

    ></

    td

    >
  20. <td

    width

    =

    "15px"

    ></

    td

    >
  21. <td

    ><label

    >

    C </

    label

    ></

    td

    >
  22. </

    tr

    >
  23. <tr

    >
  24. <td

    ><input

    type

    =

    "radio"

    id

    =

    "3"

    name

    =

    "choose_lang"

    value

    =

    "3"

    ></

    td

    >
  25. <td

    width

    =

    "15px"

    ></

    td

    >
  26. <td

    ><label

    >

    C++ </

    label

    ></

    td

    >
  27. </

    tr

    >
  28. <tr

    >
  29. <td

    ><input

    type

    =

    "radio"

    id

    =

    "1"

    name

    =

    "choose_lang"

    value

    =

    "4"

    ></

    td

    >
  30. <td

    width

    =

    "15px"

    ></

    td

    >
  31. <td

    ><label

    >

    C# </

    label

    ></

    td

    >
  32. </

    tr

    >
  33. <tr

    >
  34. <td

    ><input

    type

    =

    "radio"

    id

    =

    "2"

    name

    =

    "choose_lang"

    value

    =

    "5"

    ></

    td

    >
  35. <td

    width

    =

    "15px"

    ></

    td

    >
  36. <td

    ><label

    >

    PHP </

    label

    ></

    td

    >
  37. </

    tr

    >
  38. <tr

    >
  39. <td

    ><input

    type

    =

    "radio"

    id

    =

    "3"

    name

    =

    "choose_lang"

    value

    =

    "6"

    ></

    td

    >
  40. <td

    width

    =

    "15px"

    ></

    td

    >
  41. <td

    ><label

    >

    Python </

    label

    ></

    td

    >
  42. </

    tr

    >
  43. <tr

    >
  44. <td

    colspan

    =

    "3"

    ><input

    type

    =

    "submit"

    class

    =

    "btn_control"

    value

    =

    "Submit"

    title

    =

    "Click here to see the result."

    /

    ></

    td

    >
  45. </

    tr

    >
  46. </

    table

    >
  47. </

    form

    >

JavaScript Script

This script will display the alert message box to the user.

  1. <

    script type=

    "text/javascript"

    >
  2. function

    checkValue(

    )
  3. {

  4. var

    form =

    document.getElementById

    (

    'form_data'

    )

    ;
  5. var

    form1 =

    document.getElementById

    (

    'form_data'

    )

    .inputbox

    .value

    ;
  6. var

    f =

    form1.toUpperCase

    (

    )

    ;
  7. for

    (

    var

    i =

    0

    ;

    i <

    form.choose_lang

    .length

    ;

    i++

    )
  8. {
  9. if

    (

    form.choose_lang

    [

    i]

    .checked

    )
  10. {
  11. var

    selectedValue =

    form.choose_lang

    [

    i]

    .value

    ;
  12. }

  13. }

  14. if

    (

    form1.length

    ==

    0

    )

    {

  15. alert(

    "Name Cannot be empty"

    )

    ;
  16. form1.focus

    (

    )

    ;
  17. }
  18. else

    if

    (

    form.length

    ==

    0

    )

    {

  19. alert(

    "Please select a check box"

    )

    ;
  20. form1.focus

    (

    )

    ;
  21. }
  22. else

    if

    (

    selectedValue==

    1

    )

    {
  23. alert(

    "Hi "

    +

    f +

    " You have selected Java as your Programming Language."

    )

    ;
  24. }

  25. else

    if

    (

    selectedValue==

    2

    )

    {
  26. alert(

    "Hi "

    +

    f +

    " You have selected C as your Programming Language."

    )

    ;
  27. }
  28. else

    if

    (

    selectedValue==

    3

    )

    {
  29. alert(

    "Hi "

    +

    f+

    " You have selected C++ as your Programming Language."

    )

    ;
  30. }
  31. else

    if

    (

    selectedValue==

    4

    )

    {
  32. alert(

    "Hi "

    +

    f +

    " You have selected C# as your Programming Language."

    )

    ;
  33. }

  34. else

    if

    (

    selectedValue==

    5

    )

    {
  35. alert(

    "Hi "

    +

    f +

    " You have selected PHP as your Programming Language."

    )

    ;
  36. }
  37. else

    if

    (

    selectedValue==

    6

    )

    {
  38. alert(

    "Hi "

    +

    f +

    " You have selected Python as your Programming Language."

    )

    ;
  39. }
  40. return

    false

    ;
  41. }
  42. </

    script>

And, this is the style.
  1. <style type=

    "text/css"

    >
  2. body {
  3. font-family

    :

    arial;
  4. font-size

    :

    25px

    ;
  5. color

    :

    blue

    ;
  6. }
  7. label {
  8. color

    :

    red

    ;
  9. font-size

    :

    20px

    ;
  10. }
  11. input[

    type=

    "radio"

    ]

    {
  12. float

    :

    right

    ;
  13. }
  14. .text_input

    {
  15. font-size

    :

    18px

    ;
  16. border

    :

    blue

    1px

    solid

    ;
  17. background

    :

    azure

    ;
  18. text-indent

    :

    5px

    ;
  19. width

    :

    300px

    ;
  20. }
  21. .btn_control

    {
  22. font-size

    :

    18px

    ;
  23. border

    :

    blue

    1px

    solid

    ;
  24. color

    :

    blue

    ;
  25. background

    :

    skyblue

    ;
  26. padding

    :

    5px

    ;
  27. margin-right

    :

    20px

    ;
  28. border-radius

    :

    8px

    ;
  29. cursor

    :

    pointer

    ;
  30. }
  31. </style>

This is the output.
1_38.png


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.
 

452,292

323,348

323,357

Top