HTML text input event

Question

I have a form, and want to disable/enable its submit button depending on whether the form's input text fields are empty or have had text entered into them.

I think this means having an event handler for the input text fields' keydown or keypress events: when it's fired, this event handler should test whether the input text fields contain text, and enable or disable the submit button accordingly.

The change event looks like it ought to be more useful than the keydown or keypress events, except that it isn't fired until the control in question loses the focus, and what good is that: since the user wants to just type something and then click on the submit button, I want an event handler that's fired by text being entered and not only when the control loses focus.

My questions are:

• Are keydown and/or keypress events fired before or after the corresponding text has been inserted into the input text field?
• Are keydown and/or keypress events cancellable (can you cancel them to prevent the corresponding text from being entered)?

---

Edit: FYI, the jQuery validation plug-in re-tests form validity on key up.

Answer 1

In answer to your questions...

1. The keydown or keypress events can be intercepted before text is input using javascript
2. You can return false after binding a function to the keydown or keypress event. This will prevent the text from being input.

Example using jQuery:

$("#inputfield").live("keydown", function(){
    return false;
});

If you want to test some input for value on form submit you can do that using jQuery submit().

$("#theform").submit(function() {
    var formval = $("#theinput").val();
    if(formval == "") { //or some better test
        alert("input value"); //or some other alert...
        return false;
    } else {
        return true;
    }
});

Returning false will invalidate the click to submit the form.

Edit: If as you say in your comments you want to disable the submission of the form until requirements are met for the input field(s)

$("#inputfield").live("keyup", function(){
    if($("#inputfield").val() == "") {
        $('#button').attr("disabled", true); 
    } else {
        $('#button').attr("disabled", false); 
    }
});

You want to use the "keyup" event handler to allow the text to be sent first. see my example: on jsbin