I wanting to get the currentTarget to pass to a function, once I have changed the value of a select programmatically.
Is this possible? Something like,
$('input[name="client_id"]').val(model.get('id')) //Change the value of select
this.doSave( $('input[name="client_id"]')); //Do save expects event(e) as parameter
function doSave(event){
console.log($(event.currentTarget);
}
I have simplified this down massively, basically I am changing a select programmatically, and then want to fire my save event, which normally gets triggered on a change event, and as a result takes an event as a parameter, but all I have is the DOM element? Is there a way to send it an event?
Use the change event handler as below :
$('input[name="client_id"]').on('change', function(event) {
console.log($(event.currentTarget);
});
or
$('input[name="client_id"]').on('change', doSave);
function doSave(event){
console.log($(event.currentTarget);
}
First of all,
This
$('input[name="client_id"]')
apparently, changes the value of an input and not select.
This
$('select[name="client_id"]').val(model.get('id'))
changes the selected option in a select.
You can bind the change event on a select like
$('select').change(function(event){
//use event here
//or pass to doSave(event)
});
and it will be fired when call
$('input[name="client_id"]').change();
Related
Each time my form is updated, multiple calculations are run. This is within an on change event listener:
form.addEventListener('change', function (event) {
I want a button that resets the value of a field in the form, then updates the calculations. The click function below changes the value but doesnt update the form calculations. I wrapped my on change event in a function, then called it within the onclick, but didnt work. Is there a way to trigger a form change using an on click like below?
$("#s2q12_reset").click(function(){
$("#s2q12").val(0);
});
Your best bet here by far is to move the code doing the calculations into its own function, and then call that function from the change handler and from your click handler (after changing the value):
function updateCalculations() {
// ...
}
// If all that your `change` event does is that, you can use the funttion directly:
form.addEventListener('change', updateCalculations);
$("#s2q12_reset").click(function(){
$("#s2q12").val(0);
updateCalculations();
});
As a very-much-second-best solution, you can trigger the change event after updating the value via form.change().
I have an HTML select dropdown whose value may be edited programmatically. My change event fires when the user edits the value from the page, but not when the value is changed in the code. I need the event to fire in both cases. Any ideas on how to accomplish this?
$("#dropdownId").on('change', function () {
//do stuff
});
...
var df = document.frmMain;
df.dropdownId.value = someValue; //change event does not fire
You can use jQuery's .trigger to fire an event. In your case:
$("#dropdownId").trigger("change");
You need to manually fire the event using jquery trigger function after settig the value :
$("#dropdownId").trigger('change');
use jquery to set selection and for fire change event.
$('#'+df.dropdownId).val(someValue).change();
I have the following code here:
$('input[type="checkbox"][id="gridlines"]').change(function () {
alert('hello world');
});
$('#gridlines').prop('checked', true);
When I load my page, the checkbox is checked, but the "hello world" does not get prompted.
However, when I click on the checkbox manually, "hello world" gets prompted.
What gives?
You need to call change() or use trigger() to tirgger the change event when values is changed through code.
Using .change()
$('#gridlines').prop('checked', true).change();
Using .trigger()
$('#gridlines').prop('checked', true).trigger("change");
That is how it is suppose to work, only user interaction is support to trigger the change event
You can trigger it manually using .change()/.trigger('change');
$('#gridlines').prop('checked', true).change();
change
The change event is fired for <input>, <select>, and <textarea>
elements when a change to the element's value is committed by the
user. Unlike the input event, the change event is not necessarily
fired for each change to an element's value.
I'm building some dynamic select lists with jQuery. When they are changed, I want the event to trigger a function to get a data refresh.
var selector = $('<select id="myid" />');
selector.append($('<option value>Option Placeholder</value>'));
// attach onChange event to select list
selector.bind('change', doUpdate(this));
My problem is that the change event gets fired every time the select list is built. I'm not sure how the trigger is happening-- I'd expect it to only trigger the change event when it, well, changes!
http://jsfiddle.net/TPuwc/
When you do this:
selector.bind('change', doUpdate(this));
what you're expecting to happen is to bind the event handler to execute the doUpdate function, passing this as an argument.
That isn't what's happening. Instead, what it's doing is calling doUpdate(this) immediately, and then attempting to set the value returned by that function call as the event handler for the change event.
You can simply do:
selector.bind('change', doUpdate);
jQuery will handle the value of this for you (it will be the element triggering the event), so you don't need to pass it in to the function as an argument.
You'll have to understand the difference between function calls and function references. Every callback should be provided as a function reference (or an anonymous function) and not a function call.
The difference is the parentheses () after the function name.
selector.bind('change', doUpdate);
EDIT: Be sure to update the doUpdate function. It will automatically have access to the element that triggered the change using the this keyword, so you don't need to pass it as a parameter.
Your event arrachment method is wrong. for event attachment you should pass function. while here you are executing function and passing return value.
var selector = $('<select id="myid" />');
selector.append($('<option value>Option Placeholder</value>'));
// attach onChange event to select list
selector.bind('change', function(){ doUpdate(this) });
I am using a flash object that puts a value to a textarea element. I need to know the jquery event that would be triggered if the value of a text area is changed by a flash object.
What I need to do is, if the value of the textarea is changed ( by the flash object, no keypress or lost focus ), a certain checkbox would change to 'checked' state.
I have tried .bind( 'input' ) but it does not seem to work.
use jquery change event
$('.txtarea').change(function() {
//call your handler
});
you should use jquery ON method to bind the event to element
$(".txtarea").on("change", function(event){
//alert($(this).text());
});