467,076 Members | 981 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,076 developers. It's quick & easy.

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..thanks guys in advance i'm really having a hard time right now:(
Apr 19 '12 #1

✓ answered by Bharat383

Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <script type="text/javascript">
  3.     function kk1()
  4.     {
  5.         document.getElementById("txt1").disabled  = true;
  6.     }
  7.     function kk2()
  8.     {
  9.         document.getElementById("txt1").disabled  = false;
  10.  
  11.     }
  12. </script>
  13. </head>
  14. <body>
  15.     <input type="button" name="btn1" id="btn1" onclick="kk1()"  value="Disable" />
  16.     <input type="button" name="btn2" id="btn2" onclick="kk2()" value="Enable" />
  17.     <br />
  18.     <input type="text" name="txt1" id="txt1" value="" />
  19. <body>

  • viewed: 16328
Share:
6 Replies
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.
Expand|Select|Wrap|Line Numbers
  1.  <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:

Expand|Select|Wrap|Line Numbers
  1. $('#VerifyCD).blur(function() {
  2.     if ($('#VerifyCD).val() <> "ng075" ) {
  3.         $('input:text').attr('disabled', true);
  4.         $('#VerifyCD).removeAttr('disabled');
  5.     } else {
  6.         $('input:text').removeAttr('disabled');
  7.     }
  8.  
  9. });
How it works:
$('#VerifyCD).blur(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
Expand|Select|Wrap|Line Numbers
  1. $('#VerifyCD).removeAttr('disabled');
alweays re-enable our VerifyCD text box

Expand|Select|Wrap|Line Numbers
  1. } else {
$('input:text') take all text input boxes
.removeAttr('disabled'); and remove their disable attr
}

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

Sean
Apr 19 '12 #2
YIKES ...
Everywhere I said $('#VerifyCD)
it should be: $('#VerifyCD')
sorry, I missed the closing quote.
Apr 19 '12 #3
thanks Sean for the rply i'll be in touch with you i'll try it first if it will work..thanks again
Apr 20 '12 #4
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <script type="text/javascript">
  3.     function kk1()
  4.     {
  5.         document.getElementById("txt1").disabled  = true;
  6.     }
  7.     function kk2()
  8.     {
  9.         document.getElementById("txt1").disabled  = false;
  10.  
  11.     }
  12. </script>
  13. </head>
  14. <body>
  15.     <input type="button" name="btn1" id="btn1" onclick="kk1()"  value="Disable" />
  16.     <input type="button" name="btn2" id="btn2" onclick="kk2()" value="Enable" />
  17.     <br />
  18.     <input type="text" name="txt1" id="txt1" value="" />
  19. <body>
Apr 21 '12 #5
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.
Feb 18 '20 #6
128KB
I wrote the code as requested by ehpratah.
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <script type="text/javascript">
  3. function changeDisabled(){
  4.   var obj_1 = document.getElementById("txt1");
  5.   var obj_2 = document.getElementById("txt2");
  6.   var obj_3 = document.getElementById("txt3");
  7.   if(obj_1.value == "ng075"){
  8.     obj_2.disabled = false;
  9.     obj_3.disabled = false;
  10.   }else{
  11.     obj_2.disabled = true;
  12.     obj_3.disabled = true;
  13.   }
  14. }
  15. </script>
  16. </head>
  17. <body>
  18.   <input type="text" value="" id="txt1" />
  19.   <input type="text" value="" id="txt2" disabled />
  20.   <input type="text" value="" id="txt3" disabled />
  21.   <input type="button" value="Button" id ="btn1" onclick="changeDisabled();" />
  22. </body>
Feb 18 '20 #7

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Bob Bedford | last post: by
3 posts views Thread by Alphonse Giambrone | last post: by
1 post views Thread by hortoristic@gmail.com | last post: by
6 posts views Thread by M O J O | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.