Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript-How to Disable Html Button by JavaScript

    Hi Guys,
    I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled!
    I create the following code but it did not work

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    <script language="JavaScript" type="">
    function changeColor(){
    document.bgColor = "Gray";
    }
    </script>
    </head>
    <body>
    <script language="JavaScript" type="text/javascript">
    var person = "";
    person = prompt('What is Your Name:');
    if (person == "Foo") {
    document.write("<h1 />Welcome " + person);
    document.bgColor = "Yellow";
    }
    else {
    document.write("<h1 />Access Denied!!!!");
    document.bgColor = "Red";
    document.getElementById("gree").disabled = true;
    }
    </script>

    <div>
    <p/><input id="gree" type="button" value="Gray " onClick="changeColor();">
    </div>
    </body>
    </html>

    as you can see I used the:
    document.getElementById("gree").disabled = true;
    but it did not work , could you please give an idea how I can solve this problem?
    Thanks

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As you have not wrapped your script in a function the element with the id "gree" does not exist at the moment the script is run. Either wrap it in a function called by <body onload = ....> or place the script after the div.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    
    <script type = "text/javascript">
    
    function changeColor(){
    document.bgColor = "Gray";
    }
    </script>
    
    </head>
    <body>
    
    <div>
    <input type="button" id="gree" value="Gray " onClick="changeColor();">
    </div>
    
    <script type="text/javascript">
    var person = window.prompt('What is Your Name:', "");
    if (person == "Foo") {
    document.write("<h1 />Welcome " + person);
    document.bgColor = "Yellow";
    }
    else {
    document.write("<h1 />Access Denied!!!!");
    document.bgColor = "Red";
    document.getElementById("gree").disabled = true;
    }
    </script>
    
    </body>
    </html>
    I expect you realise that anyone can read the "secret" name "Foo" simply with View Source. And of course as Javascript is case-sensitive foo or FOO != Foo. Better would be if (person.toLowerCase() == "foo") {


    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.


    Merit points gained for placing your opening braces { on the same line as the if/else/while/do/function, and for ending each line properly with a semi-colon (but not after a { of course!!)

    BTW, when posting here please follow the posting guidelines and wrap your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.



    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Last edited by Philip M; 12-08-2010 at 11:34 AM. Reason: Typo

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Since HTML strict, XHTML and HTML5 need a value for any attribute, a disabled element should look like:
    Code:
    <input type="button" value="ClickMe" disabled="disabled">
    If so, the disabled should be treated rather as the HTML attribute of the element, not as a JavaScript property. Therefor my advice is to use a safer, cross-doctype, syntax:
    Code:
    element.setAttribute('disabled','disabled'); // disable
    element.removeAttribute('disabled'); // enable
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    As you have not wrapped your script in a function the element with the id "gree" does not exist at the moment the script is run. Either wrap it in a function called by <body onload = ....> or place the script after the div.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>
    
    <script type = "text/javascript">
    
    function changeColor(){
    document.bgColor = "Gray";
    }
    </script>
    
    </head>
    <body>
    
    <div>
    <input type="button" id="gree" value="Gray " onClick="changeColor();">
    </div>
    
    <script type="text/javascript">
    var person = window.prompt('What is Your Name:', "");
    if (person == "Foo") {
    document.write("<h1 />Welcome " + person);
    document.bgColor = "Yellow";
    }
    else {
    document.write("<h1 />Access Denied!!!!");
    document.bgColor = "Red";
    document.getElementById("gree").disabled = true;
    }
    </script>
    
    </body>
    </html>
    I expect you realise that anyone can read the "secret" name "Foo" simply with View Source. And of course as Javascript is case-sensitive foo or FOO != Foo. Better would be if (person.toLowerCase() == "foo") {


    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead.


    Merit points gained for placing your opening braces { on the same line as the if/else/while/do/function, and for ending each line properly with a semi-colon (but not after a { of course!!)

    BTW, when posting here please follow the posting guidelines and wrap your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.



    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Dear Philip
    Thanks for your help and hints, they were very useful.However I really did not understand the first part of your hints!
    Could you please give me more details about how I can wrap my script in a function ?I even tried to modify the code like:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Web Project</title>

    <script type = "text/javascript">

    function changeColor(){
    document.bgColor = "Gray";
    }
    function disab(){
    document.write("<h1 />Access Denied!!!!");
    document.bgColor = "Red";
    document.getElementById("gree").disabled = true;
    }
    </script>

    </head>
    <body>
    <script type="text/javascript">
    var person = window.prompt('What is Your Name:', "");
    if (person == "Foo") {
    document.write("<h1 />Welcome " + person);
    document.bgColor = "Yellow";
    }
    else {
    disab();
    }
    </script>

    <div>
    <input type="button" id="gree" value="Gray " onClick="changeColor();">
    </div>


    </body>
    </html>

    but it is still not working!

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You do not seem to have read the advice I gave you. I said

    As you have not wrapped your script in a function the element with the id "gree" does not exist at the moment the script is run. Either wrap it in a function called by <body onload = ....> or place the script after the div.

    By "wrap it in a function" I mean simply:

    Code:
    <script type="text/javascript">
    function myFunction () {
    var person = window.prompt('What is Your Name:', "");
    if (person == "Foo") {
    document.write("<h1 />Welcome " + person);
    document.bgColor = "Yellow";
    }
    else {
    document.write("<h1 />Access Denied!!!!");
    document.bgColor = "Red";
    document.getElementById("gree").disabled = true;
    }
    }
    </script>
    If you call the function with <body onload = "myFunction()"> the script will not run until the page has been rendered and the element with the id gree exists.

    There is no need to quote (repeat) the whole of a previous post.

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again
    Sorry about Coding style ! Honestly I I did not know how to put my code in code box
    I also figure out that I am not familiar with lots of terms and jargon which peole are using here.Could you please introduce me a good reference to get familiar with some concepts of JavaScript programming?
    By the way thanks for your help.
    Best Regards

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by Behseini View Post
    Could you please introduce me a good reference to get familiar with some concepts of JavaScript programming?
    What is the best book, online resource, and software for programming in JavaScript?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •