Why Won't Disable Button Work

Question

OK, so I have a button that needs to be disabled. I wrote a JavaScript function that is meant to detect if a field is blank/null, and if it is disable the save button next to a field. It would appear to be working as far as detecting the blank field, and throwing the alert, but no matter what I try as far as setting the button to disable. I cannot get it to do so.

Here is what I'm currently trying...

function validateBlank(){
  var x = document.forms["FuForm"]["Field1"].value;
  if (x=null || x == "") {
    alert("Must Be Between 1 and 300 Characters");
    document.getElementById("saveTest").setAttribute("disabled", "disabled");
    return false;
  }
}

I've also tried this variant...

document.getElementById("saveTest").disabled

and the button/link is setup like this.

<a href="#">
 <img id="saveButton" src="${contextPath}/img/icon_sav.gif" name="saveTest" " alt="Disk icon. Save change" title="Save change"/>
</a>

That's not a button, it's an image. You can't disable an image — Rob G, Nov 04 '15 at 22:43
It's neither - `saveTest` isn't the `id` of *anything*. `saveButton` is the `id` of an image, though. — Paul Roub, Nov 04 '15 at 22:47
Another typo: `if (x = null) ...` should be `if (x == null) ...` — Paul Roub, Nov 04 '15 at 22:48
What you *want* is to disable the `a` surrounding the `img`. That's [tricky](http://stackoverflow.com/questions/10276133/how-to-disable-html-links) — Paul Roub, Nov 04 '15 at 22:49

score 2 · Accepted Answer · edited Jul 14 '20 at 15:42

2

The correct way is:

document.getElementById("saveTest").disabled = true;

Source: http://www.w3schools.com/jsref/prop_pushbutton_disabled.asp

Hope this helps :)

EDIT: your button is in fact an image, and an image cannot be disabled in this way! To have an image button that can be disabled, the correct HTML syntax should be in this form:

<input type="image" src="someimage.png" height="20px" width="20px" id="saveTest" name="button" />

i.e. an input of type image .

edited Jul 14 '20 at 15:42

isherwood

58,414
16
114
157

answered Nov 04 '15 at 22:42

numX

830
7
24

Yeah, I tried that earlier, and nothing disabled this button. It's quite bothersome. – Jack Parker Nov 04 '15 at 22:47
1

@JackParker That's because it's not a button, and that's not a valid `id` in your HTML. See comments above. – Paul Roub Nov 04 '15 at 22:48
I did switch the ID back to saveButton. I left saveTest in the earlier code from something I had tried earlier. However, there is code in the website I'm working on that uses a similar function that does disable an image/button, which is why this should work as well. – Jack Parker Nov 04 '15 at 22:52
1

I have added a code example of how the HTML syntax should be for an image button that can be disabled in this way :) – numX Nov 04 '15 at 22:53
no, the code section where there is an 'input' element of type 'image' , your button must also be an 'input' of type 'image' – numX Nov 04 '15 at 22:57

Why Won't Disable Button Work

1 Answers1