...

View Full Version : JavaScript-How to Disable Html Button by JavaScript



Behseini
12-08-2010, 10:57 AM
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

Philip M
12-08-2010, 11:18 AM
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.


<!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)

Kor
12-08-2010, 12:05 PM
Since HTML strict, XHTML and HTML5 need a value for any attribute, a disabled element should look like:


<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:


element.setAttribute('disabled','disabled'); // disable
element.removeAttribute('disabled'); // enable

Behseini
12-09-2010, 12:08 AM
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.


<!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!

Philip M
12-09-2010, 09:25 AM
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:



<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. :(

Behseini
12-10-2010, 12:10 AM
Thanks again
Sorry about Coding style ! Honestly I I did not know how to put my code in code box:o
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

Philip M
12-10-2010, 08:47 AM
Could you please introduce me a good reference to get familiar with some concepts of JavaScript programming?


http://www.codingforums.com/showthread.php?t=211281



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum