Im trying to call a function when the value of any form value changes.
This is my code:
function reload()
{
tmp = findSWF("chart");
x = tmp.reload("chart.php", false);
}
function findSWF(movieName) {
if (navigator.appName.indexOf("Microsoft")!= -1) {
return window["ie_" + movieName];
} else {
return document[movieName];
}
}
$(".formclass").change(function() {
reload();
});
If i make a link with an onclick action, it works, but using the last .change action, nothing happens.
Ideally, i could also pass the name and value of what has changed to that url
the change event only kicks in when you changed the value AND the control loses focus for text controls:
The change event is sent to an element
when its value changes. This event is
limited to elements,
boxes and
elements. For select boxes,
checkboxes, and radio buttons, the
event is fired immediately when the
user makes a selection with the mouse,
but for the other element types the
event is deferred until the element
loses focus.
if you want to trigger the function as the user types in the control, try keydown() or keypress()
Related
I have set up previous focus storage in my document. When the button is clicked, a function gets executed. The value 0 is transported as a variable from the button to the function. In the function the new value is set to the previous focussed element. But it doesn't work. Why not? The reason why I do it this way is because I have more buttons, that give different values but only have to use the same function: setNewValue
Main script:
window.prevFocus = $();
// Catch any bubbling focusin events (focus does not bubble)
$(document).on('focusin', ':input', function () {
// Test: Show the previous value
$("#debug").html(prevFocus.attr("id"));
// Save the previously clicked value for later
window.prevFocus = $(this);
});
Button script
$("#butSetVal0").on({
click: function(){
newVal = 0;
setNewValue(newVal);
}
});
set new value script:
function setNewValue(newVal){
prevFocus.val(newVal).trigger("input");
}
I fixed it already. The solution is to set the eventhandler of the button on 'mousedown'. The 'click' trigger detects two clicks. The second click interprets as the previous focus element, so the button itself.
I am attempting to add an event handler to an anchor only when certain form fields are populated, like so:
$('#newName, #newFrom').keyup(function (e) {
if ($('#newName').val() || $('#newFrom').val()) {
$('#add-person').click(function (e) {
//Handle event, includes adding a row to a table.
$('this').off();
});
}
});
It seems like the first event is getting propagated to the second one since I end up with the same number of rows in my table as keys I have typed.
I've tried adding
e.stopPropagation();
But with no success.
$('this').off(); should be $(this).off();
also probably you'd better go using the input event instead of keyup. input event will trigger even if one pastes content into your fields.
nevertheless I'd go the other way around:
// (cache your selectors)
var $newName = $("#newName"),
$newFrom = $("#newFrom");
// create a boolean flag
var haveNewValue = false;
// modify that flag on fields `input`
$newName.add( $newFrom ).on("input", function() {
haveNewValue = ($.trim($newName.val()) + $.trim($newFrom.val())).length > 0;
});
// than inside the click test your flag
$('#add-person').click(function (e) {
if(!haveNewValue) return; // exit function if no entered value.
// do stuff like adding row to table
});
What was wrong:
on every keyup you was assigning a new (therefore multiple) click event/s to the button, but the (corrected to:) $(this).off() was triggered only after an actual button click.
Also a better way to use .on() and off.() (notice the difference in using the .click() method and the .on() method) is:
function doCoffee() {
alert("Bzzzzzzzz...BLURGGUZRGUZRGUZRG");
}
$("#doCoffeeButton").on("click", doCoffee); // Register "event" using .on()
$("#bossAlertButton").click(function() {
$("#doCoffeeButton").off("click"); // Turn off "event" using .off()
});
I have written a blur() event to handle focus out event on a text field. The code looks like this.
$("input[type=text]").blur(function (event) {
if(this.value){
//do something
}
event.originalEvent.handled = true;
});
I have a situation where a text-field is automatically getting focus with the text from previous page.
To give an example, in flipkart.com, type some text in the search field and click search. My event handler must execute for focus out event. (It is happening correctly).
In the next page, the text entered is prepopulated in the text-field and focus is also on it. So in this page, if I do some action, the text-field will lose focus and the same event gets called again. I don't need this to happen.
Is there a way to avoid this? By combining two event handlers? Please help.
Change your code so that the function is only bound to the element after a user explicitly interacts with the element like so:
$("input[type=text]").on('keyup keypress change click', function() {
$("input[type=text]").blur(function(event) {
if (this.value) {
//do something
alert('blur was called after interacting with element');
}
event.originalEvent.handled = true;
});
});
$('#test').focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="some value">
Try this : You know the text value from previous page, just compare it with current text value, if both same then don't do any action. See below code
$(function(){
var prevTextValue = "read your previous text value here";
$("input[type=text]").blur(function (event) {
//check if value is not empty and not equal to previous value
if(this.value!="" && this.value != prevTextValue){
//do something
}
event.originalEvent.handled = true;
});
});
I have an input text with an onchange event that calls a function in which an alert box displays. I also have a button whose onclick calls a different function. If the user makes a change in the input text and immediately clicks the button, the onchange event fires, displaying the alert box, but the code in the function for the onclick of the button doesn't execute. I've read that this has something to do with event bubbling, but I haven't seen any solutions. Is there a solution? Is it even possible?
Here is a little example:
<input type = "text" onchange = "showAlert1()">
<input type = "button" id = "al2" value = "Click Here" onclick = "showAlert2()">
<script type = "text/javascript">
function showAlert1()
{
alert("ONE")
}
function showAlert2()
{
alert ("TWO");
}
</script>
The onclick event handler showAlert2() doesn't fire if a change is made to the input value and user immediately clicks the button.
I want, that you write something to the input-field, click IMMEDIATELY the button and it fires
alert("ONE") AND alert("TWO")...
OR ONLY
alert("TWO")
As far as I can tell it's not a problem with bubbling (which is a problem with onchange but is a red herring in this case). The problem is that clicking the button after changing the field value is triggering blur, causing showAlert1() to run before the button's onclick gets triggered.
Here's a quick example of it working the way you described but you'll see it's an unreliable hack more than anything. Basically it buffers the execution of each function so that the button's onclick can be triggered. However it falls over if you click and hold the button longer than the buffer that is set within each function via setTimeout().
function showAlert1() {
setTimeout(function(){ alert("ONE") }, 250);
}
function showAlert2() {
setTimeout(function(){ alert("TWO") }, 250);
}
Demo: jsfiddle.net/5rTLq
how about this
function showAlert1(a) {
alert(a.value); /* use setTimeout to delay */
}
function showAlert2() {
alert(document.getElementById('txt').value);
}
test: http://jsfiddle.net/C3jRr/2/
I have a page with a set of checkbox's, that I want to run a Javascript function on when there is a change (I have done something very similar with dropdown's - and that worked)
However with the checkbox's I have three problems:
my onChange event only runs "sometimes" (you have to change the focus between the different checkbox controls
when it does run it is returning the result of the previous checkbox (not the one just clicked on)
the jQuery always return the value true
Checkbox creation
<%= Html.CheckBox("sl-" + row.Id, value, new { onChange = "SuitabilityChecked("+row.Id+", "+key+")"})%>
Javascript
function SuitabilityChecked(providerId, parentRecordId) {
var params = {};
params.providerId = providerId;
params.parentRecordId = parentRecordId;
var value = $("#sl-" + providerId).val();
params.value = value;
$.getJSON("SuitabilityChecked", params, null);
};
Browsers are funny about radio buttons and check boxes and can delay the onchange until focus change. Try adding an onclick event to blur or call the change event directly.
Maybe something like this using jQuery Live (untested, off the top of my head):
$(':checkbox').live('click', function() { $(this).change(); });
What's happening:
Checkbox A clicked
Checkbox B clicked
Checkbox A has lost focus and fires onChange
Which makes it seem as if Checkbox B is returning the result of Checkbox A. If you were to press Tab after clicking Checkbox B in this scenario, you'd notice that its onChange would fire.