disable textbox using javascript

Question

As the title says, i am, trying to disable textbox when i open the file

<form name='registration' action="registration.php" method="post" onSubmit="return formValidation();">
    <table>
        <tr>
            <td>FirstName:</td>     
            <td><input type = "Text" name = "firstname" id="1"></p></td>
        </tr>
    </table>
</form>

and I try ti disable it using the following javascript code:

function formValidation() {
    var fn = document.registration.firstname;
    if(fname_validation(fn)) {}
    document.getElementById("1").disabled = true;
}

function fname_validation(fn) {
    var fn_len = fn.value.length;
    var fn_char = /^[A-Za-z]+$/;
    if (fn_len == 0) {
        alert("first name cannot empty");
        return false;
    }
    if (!fn.value.match(fn_char)) {
        alert("first name must enter alphabet only");
        return false;
    } else {
        return true;
    }
}

Why the text box still does not disable?

Answer 1

Right now, the function that make your input disabled is called on form submit. So, your input will be disabled only when you submit your form... probably too late.

If you want to disable your input from start, your input should look like this

<input type="Text" name="firstname" id="firstname" disabled="disabled" />

Or if you want to disable it with javascript, you have to execute it on load. Something like this:

window.onload = function() {
  document.getElementById('firstname').disabled = true;
};