Disable/Enable Button

Question

I have a submit button for my form in my PHP file like below.

 <input type="submit" name="submit" value="submit" disabled="true" />

now i send an asynchronous request using a request object,

document.getElementById("username").onblur=function(){ 
username(this.value);
 };

function username(value)
{
request = createRequest();
if(request==null) {
alert("Unable to create request");
return;
}
var url= "sign_up.php?value=" +
escape(value);
request.open("GET",url,true);
request.onreadystatechange = displayDetails;
request.send(null);
}
function displayDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
checked = document.getElementById("check");
checked.innerHTML = request.responseText;
document.getElementById("submit").disabled="false";
}
}
} 

here it basically is checking the availability of a username, now i enable the submit button,if a username enteres is available. But it really is not enabling the button. Can someone tell me why?

Answer 1

Get rid of the quotation marks, what you did was assigning a string "false" into the disabled attribute of the HTML element. Change the last line to this:

document.getElementById("submit").disabled = false;

Answer 2

Disable:

document.getElementById("submit").setAttribute('disabled', 'disabled');

Enable:

document.getElementById("submit").removeAttribute('disabled');

Answer 3

jquery verison

$("#username").blur(function(){
    $("#submit").attr("disabled","disabled");
    $.ajax({
        method: "GET",
        dataType: "html",
        url: "sign_up.php",
        data: {
            cmd: "check_username",
            value: $(this).val()
        },
        success: function(data){
            $("#check").html(data);
            $("#submit").removeAttr("disabled");
        },
        error: function(){
            $("#check").html("ajax error");
            $("#submit").removeAttr("disabled");
        }
    });
});