how to enable/disable textbox in JavaScript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ehpratah
    New Member
    • Mar 2012
    • 35
    #1

    how to enable/disable textbox in JavaScript

    Javascript help

    hi guyz i have a question how can i disable all my textbox in my form if my verification code is not correct? e.g(my verification code is " ng075 " if ng075 is not put in my textbox then the other textbox must be disable..all suggestion are well appreciated..th anks guys in advance i'm really having a hard time right now:(
    Tags: None
    • SeanPD
      New Member
      • Apr 2012
      • 4
      #2
      I will offer a JQuery script as the Javascript is a bit long and it is SO simple in JQuery.

      First lets include the JQuery Library from Google.
      Code:
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      Next lets assume you verification code input box has an attribute ID="VerifyCD".

      We add a functiuon to fire OnBlur (when you leave the verification text box) that will check the code and enable/disable all other input text boxes:

      Code:
      $('#VerifyCD).blur(function() {
    if ($('#VerifyCD).val() <> "ng075" ) {
        $('input:text').attr('disabled', true);
        $('#VerifyCD).removeAttr('disabled');
    } else {
        $('input:text').removeAttr('disabled');
    }
    
});
      How it works:
      $('#VerifyCD).b lur(function() just means when the user leaves the VerifyCD textbox, run this function.

      if ($('#VerifyCD). val() <> "ng075" ) just says if the value they entered is NOT your verify code then
      $('input:text') take all text input boxes
      .attr('disabled ', true); and set their disable attribute to true
      Code:
      $('#VerifyCD).removeAttr('disabled');
      alweays re-enable our VerifyCD text box

      Code:
      } else {
      $('input:text') take all text input boxes
      .removeAttr('di sabled'); and remove their disable attr
      }

      I know it is not quite what you asked for, but I hope that helps.

      Sean

        Comment

        • SeanPD
          New Member
          • Apr 2012
          • 4
          #3
          YIKES ...
          Everywhere I said $('#VerifyCD)
          it should be: $('#VerifyCD')
          sorry, I missed the closing quote.

            Comment

            • ehpratah
              New Member
              • Mar 2012
              • 35
              #4
              thanks Sean for the rply i'll be in touch with you i'll try it first if it will work..thanks again

                Comment

                • Bharat383
                  New Member
                  • Aug 2011
                  • 93
                  #5
                  Code:
                  <head>
<script type="text/javascript">
	function kk1()
	{
		document.getElementById("txt1").disabled  = true;
	}
	function kk2()
	{
		document.getElementById("txt1").disabled  = false;
	
	}
</script>
</head>
<body>
	<input type="button" name="btn1" id="btn1" onclick="kk1()"  value="Disable" />
	<input type="button" name="btn2" id="btn2" onclick="kk2()" value="Enable" />
	<br />
	<input type="text" name="txt1" id="txt1" value="" />
<body>
                  Last edited by Niheel; Apr 21 '12, 09:41 AM. Reason: Please post explanations with code

                    Comment

                    • SHANIKA
                      New Member
                      • Feb 2020
                      • 1
                      #6
                      First Create html page with 2 button and 1 textbox.this tutorial learn about the Text box disable using javascript.if Yes Button is click, the TextBox enabled and if No Button is click the TextBox disabled.

                      this article I will Learn with an example, How to Enable or Disable TextBox on Button Click using JavaScript. if Yes Button is click, the TextBox enabled and if No Button is click the TextBox disabled.
                      Last edited by Rabbit; Feb 19 '20, 10:18 PM.

                        Comment

                        • SioSio
                          Contributor
                          • Dec 2019
                          • 272
                          #7
                          I wrote the code as requested by ehpratah.
                          Code:
                          <head>
<script type="text/javascript">
function changeDisabled(){
  var obj_1 = document.getElementById("txt1");
  var obj_2 = document.getElementById("txt2");
  var obj_3 = document.getElementById("txt3");
  if(obj_1.value == "ng075"){
    obj_2.disabled = false;
    obj_3.disabled = false;
  }else{
    obj_2.disabled = true;
    obj_3.disabled = true;
  }
}
</script>
</head>
<body>
  <input type="text" value="" id="txt1" />
  <input type="text" value="" id="txt2" disabled />
  <input type="text" value="" id="txt3" disabled />
  <input type="button" value="Button" id ="btn1" onclick="changeDisabled();" />
</body>

                            Comment

                            Previous template Next
                            Working...