Jquery events not firing on blank input - javascript

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')}
)
});

Related

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.

OnChange event not triggered

I was trying to achieve to convert to uppercase while user type by attaching the following function on key up.
function ChangeCharCase(evt,obj,upper)
{
if(obj.value != obj.value.toUpperCase())
obj.value = obj.value.toUpperCase();
return true;
}
That seems to be working fine until I attach the on change event to the input text, and figured out , the on change event is not triggered at all on IE 11 and chrome . On Firefox, it seems to be okay.
You can check the case here.
http://jsfiddle.net/zt8oqaw5/4/
You would see , the onchange event will never be triggered on the first input text on the browsers mentioned above.
Does anybody know why?
How can I achieve the character case conversion properly ?
I can't set the css here because I do want the value to be changed actually, not just for the display.
Personally I use the onkeyup or onblur instead of onchange for text boxes. maybe you can give it a try.
#Update
Here is an generall definition
"Occurs when the selection, the checked state or the contents of an element have changed. In some cases, it only occurs when the element loses the focus."

How to make a real "onchange" event in HTML (no jQuery)?

Please note: I do not want to use jQuery for this (otherwise I like it)
Problem: I have come to situation where I need to do some javascript function after an user changes an input field (e.g. input type="text"). So I said to myself - I remember an onchange event - BUT onchange event runs AFTER user leaves the field, but I need the function to be called for example every time user types a character to that field. Wowhead shows nice example of what I am trying to achieve this (field with placeholder "Search within results...")
Summary: I am looking for a SIMPLE way of detecting REAL onchange event(not the classic HTML one)and through that call a JS function while not using jQuery?
Use onkeyup instead of onchange then.
Following is a simple way of invoking each type of Key Press on field.
input type="text" onkeypress="myFunction()
Get Example here
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
Enjoy..
you can also use onkeyup and onkeydown instead of onkeypress.
Tried onkeypress="myFunction()" or onkeyup="myFunction()"?
There are also events for onfocus and onblur for entering and leaving a textfield :)
You should use "input" event. keyup and keypress don't work if a user modified the value only by a mouse.

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.

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

Categories

Resources