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

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.

Related

onblur even is not working as expected

I have a form having 5 fields and a submit button.
On one of the fields i am having an onblur event but if the user changes the value in that textbox and directly clicks on submit button then in that case onblur is notgetting triggered or not working.
Even onchange is not working in that case.
What if i use onkeyup and down but if user used mouse for pasting the data?
Please help!
Thanks and regards
Asus.
You might want to try using the onchangeevent or oninput event to track when the input data is being modified. Then you can use the onsubmit event to call whatever function you would like.

JavaScript event, when we select the input filed value from the browser cache

I have a input text field and a button to submit. I want the button to be enabled only when i enter something into text field. I used onchange="enableButton();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
but when i double click on input field a dropdown appears from cache and upon selecting the value from this dropdown no event fires.
Can anyone please suggest me how to do enable button.
I solved a similar problem by deferring onchange actions via setImmediate, which allows other pending events to be processed first. In your case, try setting onchange to this: onchange="setImmediate(enableButton)".

Selecting from a drop down ( browser cached drop down ) - which event gets triggered?

Gist
Which event gets triggered when we select from a dropdown which is populated from the cache ( such as usernames and other form values ) in a <input type="text"> .
Detailed
In a form, we can login with multiple username say A,B,ABC . And the browser caches all these values ( w.r.t password remember ). So,if we try to login with A - a drop down pops up giving multiple option say A , ABC -- which event gets triggered once we select any of the options provided.
oninput, onchange, onblur -- none of which seems to get triggered if we select from browser provided drop down.
Help,
Beginner
You can use these events with select.
Cache has nothing to do with the drop down.
What you need is depending on your use.
Generally onchange is used to get the value or call a function when the value changes.
onblur would trigger a function when the drop down losses focus. eg, when you use tab or other methods.
This question is answered here: On input change event?
In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
easily use select event
example:
$('#test').select(function(){ alert('data changed'); });

Is there an event for input type="file"?

I have a form with input type="file" and another input type="submit".
I hide the submit input until they click on the browse input.
But is there an event that is fired when they select a file?
If there is, then I can 'click' on the submit input for them.
Yes the change event, just like with every other <input>
Read this and this thread, becuase Mozilla and IE has problems with it...
the W3 spec:
onchange = script
The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

Is it possible to set the pre-change value of an input element

I have an input element with an onchange event. The onchange event alerts the user if the value is not accepted, and returns focus back to the input element.
However, if the user then clicks out of the element, the onchange event doesn't fire - which is understandable since the user hasn't made a further change, but it introduces the problem of only validating once.
I explored a possible solution to reset the value back to what it was before it was changed, but I'd like to avoid that if at all possible for the sake of allowing the user to correct the value they entered without having to type the whole thing again.
Another possibility was to put the validation into the blur event but this would introduce other problems such as events on other elements firing if they are focused.
So my question is, if the user changes the input value from 'X' to 'Y', can I return focus to the element, leaving the value as 'Y' but make it treat 'X' as the pre-change value, thus behaving so if the user changes it back to 'X' the change event will not subsequently fire, but if they leave it as 'Y' and lose focus again, the change event fires again as if changing from 'X' to 'Y'?
Why not just mark the field as invalid (using CSS or jQuery to add markup) instead of using an alert? The field remains invalid until the user changes the value to a valid one, and the validation script removes the invalid marking.
Is the input type text? In these circumstances I prefer to use onkeyup instead of onchange for the very reason you're describing.
Sometimes even that doesn't work: This will not capture the change when text is pasted into the text box using a mouse since a key isn't pressed (but shift+insert or ctrl+v are). You might want to add the same event to both onchange and onkeyup to cover all bases.

Categories

Resources