How to dissable and enable textbox on checkbox on checked unchecked using javascript

Hello, so today's tutorial is about form validations. We all know what is form validation if you don't, comment below I will create a tutorial and send the link to you on form validation. So now without wasting our time lets start the tutorial " How to disable and enable textbox on the checkbox on checked unchecked using javascript ".

In form, we have to show some textbox which is compulsory on if you agree with some condition. For Example:-

We have a form which takes information about the college student. some of them leave in the hostel and some of them leave out of the hostel. So we have to calculate the fee of the student. The Fee depends on

1. Students (which leave in hostel) = Tuition Charge + Hostel Charge.

2. Students (which leave out of hostel) = Tuition Charge.

So for this when we make a form, we have to take a hostel fee for students which leave in the hostel but not for students who leave out of the hostel. For this, we have to show hostel fee text box if student belongs to a hostel and if student belongs not belongs to the hostel they don't show the hostel fee box.

So Let us check how can we do that:---

To Run this Code Our Compiler CollegeSpike Courses Compiler

<!DOCTYPE html>
<html>
<head>
    <title>How to dissable and enable textbox on checkbox on checked unchecked  using javascript </title>
</head>
<body>

    <center>
        <h1>How to dissable and enable textbox on checkbox on checked unchecked  using javascript </h1> <hr>
        <center><h2>Hostel Form</h2><hr></center>

        <form action="" method="post">
            <label><b>Enter Student Name</b></label><br>
            <input type="text" name="student_name"><br><br>
            <label><b>Belongs To</b></label><br>
            <input type="checkbox" id="hostler" name="loc"> I am Hostler
            <input type="checkbox" name="loc"> I am Not Hostler <br><br>
            <label><b>Enter Fee</b></label><br>
            <input type="text" name="tution_fee" placeholder="Enter Tution Fee">
        
            <input type="text" style="display: none;" id="hostel_fee" placeholder="Enter Hostel Fee" name="hostel_fee"><br><br>
            <input type="button" value="submit" name="submit">
        </form>

    </center>
<script type="text/javascript">
      // assign function to onclick property of checkbox
    document.
getElementById('hostler').
onclick = function() {
    // access properties using this keyword
    if ( this.checked ) {
        // if checked ...
      //  alert( this.value );

         hostel_fee.style.display = "block";

    } else {
        // if not checked ...
          hostel_fee.style.display = "none";
    }
};
</script>
</body>
</html>

 

Here when we click on i am I am Hostler the one textbox is open with hostel fee but when check on  I am Not Hostler then only tution fee box is seen.

Step 1 : Create a HTML Form.

First of all we create a html form in which we take data. In this html form we take name , from where student belongs and their fee.

     <form action="" method="post">
            <label><b>Enter Student Name</b></label><br>
            <input type="text" name="student_name"><br><br>
            <label><b>Belongs To</b></label><br>
            <input type="checkbox" id="hostler" name="loc"> I am Hostler
            <input type="checkbox" name="loc"> I am Not Hostler <br><br>
            <label><b>Enter Fee</b></label><br>
            <input type="text" name="tution_fee" placeholder="Enter Tution Fee">
        
            <input type="text" style="display: none;" id="hostel_fee" placeholder="Enter Hostel Fee" name="hostel_fee"><br><br>
            <input type="button" value="submit" name="submit">
        </form>

Step 2 : Create JAVASCRIPT Code


Now We add Some JAVASCRIPT Code in which we take data from the html through id. In this code, if the checkbox is check then show the this option else show other.


<script type="text/javascript">
      // assign function to onclick property of checkbox
    document.
getElementById('hostler').
onclick = function() {
    // access properties using this keyword
    if ( this.checked ) {
        // if checked ...
      //  alert( this.value );

         hostel_fee.style.display = "block";

    } else {
        // if not checked ...
          hostel_fee.style.display = "none";
    }
};
</script>

 Step 3 : Finishing Up 
 

Now we add id  the chekbox and hostel fee.

      <input type="checkbox" id="hostler" name="loc"> I am Hostler
      <input type="text" style="display: none;" id="hostel_fee" placeholder="Enter Hostel Fee" name="hostel_fee"><br><br>

 

Run this code in your browser or u can also use pen


Please Share this course

Share

It Looks like you have completed your course!! We have created Online series based on the above content. You can give a test and check your skill.




Be a Part of CollegeSpike by giving your precious comment here and help us in improving our content.