Develop Reference

What event to know when user has entered data into form?

I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.

You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)

There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.

Jquery events not firing on blank input

I'm running Django 1.5 and using Dajax/Dajaxice to asynchronously update a form. The form is just a description of an object (text feild). The value of the field is always displayed and is shown as an editable textarea.
When the form is rendered, i assign an onchange event to the html form with javascript:
$('#form_id').change(function(event) {
Dajaxice.appname.description_form(Dajax.process,
{'form':$('#form').serialize(true),
'pk':$('#parent_div').attr('pk')}
)
});
This works with any kind of input except blank input. It seems like the event is not triggered if the textarea does not contain any text; what can I do to allow blank input to trigger the event?
It is not just the onchange event, I tried assigning others such as keyup() etc. with the same results (fully functional except for blank input).
Clarification:
by no input, i mean '' (no characters)
an input of ' ' triggers still.

I remember encountering this before briefly, but some arbitrary changed resolved it.
In its simplest form, jQuery's .change() function should fire for a null input. See this simple example, by entering text in the input, clearing it and tabbing out again: simple .change() demo
$('#search').change(function(event){alert('Changed!');});
If you could provide more context to your code, maybe we could figure out what's causing .change() to fail.

as far as I know, "input" is not the event you want to use. Since "input" is analogous to "change", it tends to produce a bad result when your string approaches 0 chars, use keyup instead
Try this:
$('#form_id').bind('keyup', function (e) {
Dajaxice.appname.description_form(Dajax.process,
{'form':$('#form').serialize(true),
'pk':$('#parent_div').attr('pk')}
)
});

onChange is called only when the element loses focus

I want that as you type in the textfield the div changes (I have the code for changing the div already). However the onchange event is only called once you are finished and click outside the textfield. I want it to be called as each letter is typed.
My code:
<input name="platetext" type="text" onchange="setValue(this)">

onChange is fired when the input looses focus I think. onKeyUp should do the trick for you.

There is an 'input' Event you can bind your event Handlers to (I think this was introduced with HTML5).
I made a quick and very dirty example here: http://jsfiddle.net/RdKZH/
This would be the clean approach to this problem (as keyup does not work on copy&paste), but you might want to test if it already works in all browsers you want to support.

how to check if the value of a text input is empty right after the keypress event in javascript?

Here's the problem, in abstract terms: i have three input fields (A, B, C). two of them need to be text inputs (A and B), the third is of irrelevant type. I need to enable the third if A is not empty and B is not empty. I need to disable C if A is empty or B is empty.
The code
// empty is the empty function from the phpjs project
// framework used: jQuery
// A, B and C are classes here
$(".A, .B").keypress(function(){
if( !empty($(".A").val()) && !empty($(".B").val()) )
$(".C").attr("disabled","");
else
$(".C").removeAttr("disabled");
});
I want to be able to check this on keypress, but when requesting the value of the input that is edited when the keypress event occurs i get the value that was calculated before the keypress event.
Has anybody stumbled upon this before and solved it?

have you tried using the keyUp event?

Use the keyup event instead.

Attach your handler to the keyrelease event. The value should have been updated by then.

use a combination of handlers for keyup and change. the keyup handler will update as the user types (excepting edge cases like holding a key down, which doesn't seem like a concern here) and the change handler will catch things like the user cutting the text with mouse actions before they can switch to field C. as an added measure you could add verification on field C's focus event, to make sure A and B really have something.

$('.A, .B').keydown(function(event) {
if(!empty($('.A').val()) && !empty($('.B').val()))
$(".C").attr("disabled","");
else
$(".C").removeAttr("disabled");
});

At the keypress event, the value of the INPUT is not yet set. Hence you can't easily know if it is empty.
While the keyup fires, the value of the INPUT is set.
But things get worse. The user can empty the field with the mouse or the Edit menu of the browser. In that case keyup is not fired.
In our web app we auto-save the values. Like in Mac OS, if you know, there is almost no save buttons.
To allow a reaction here is more or less what we do:
onfocus: a setInterval starts polling every 120ms or so, and checks the input for any change
if there is a change do the relevant action
onblur: a clearInterval stop the polling

Check if Selection Changed in OnClick event

Note: The answer marked as the answer, answers the questions in the Title. However, my underlying problem, using type ahead dropdowns, is solved by moving to IE8.
I have a drop down list that when I CLICK a NEW selection I want to cause a postback ("this.form.submit()") But only if the click on the dropdown list just changed the selection.
Note that OnChange will NOT work because when the selection is changed by the keyboard I would not want to postback because it is a type ahead dropdown list.
I also suppose I could use OnChange and check if the change was caused by the mouse.
Maybe if we can come up with both solutions and i'll see which works better?
Thanks so much for your help!!!!!
EDIT: More information:
AutoPostback = true; will not work. (don't want it to post back when the selection is changed by the keyboard)
onBlur = doPostBack; I tried this, but the result is not optimal. The user has to click off the ddl after making a selection with the mouse.
Another way to state what I want to do, i think, is do a postback when both the OnChange and OnClick events fire at the same time.

On the OnClick event I have javascript that sets the ddl.value = true;
On the OnChange event I check to see if ddl.Value = true if so I postback and set it to false.
On the OnKeyDown I set ddl.Value = false so that when I click on the ddl it only posts back if I change the selection with the mouse, if I press a key to use the type-ahead-feature it will not postback.
Not the most elegant solution but it works and you have to give me creadit for creativity.
Note: This solution work in combination with a script that fires on OnKeyDown that runs the type-ahead-ddl(ie. moves you to the closest selection when you press a key) and postsback when you press enter.

Did you try AutoPostBack="true" ?