Using jQuery To Leverage The OnChange Method Of Inputs

Thank you for a really nice post!
Your idea sounds great, but I wonder how do you intend to treat the case when data was changed and then changed back to it's original value (without submission).
It will stay "dirty" in this case...

Thanks for the post, its a simple example but can be adapted to other more complex items. Much appreciated.

Hi Ben,

Thanks for the input dirty, How can i expand the same to textarea.

Great script, but does it work with select and checkboxes?

Nice Script! very useful, thank you.

Thnx. FYI spelling error in your comment "// Add dirtry flag to the input in"

Hiya Ben,

thanks again, I say again, cos this is like the 4th or 5th time google has pointed me to one of your blogs when searching for a solution to my problem and each time your solution did the trick. So thanks for that, I think I should rather bookmark your page and skip google in future and come directly here myself. LOL..

Keep on doing what your doing, we appreciate it.

Hi ben,

I trying to redirect onchange to change() trigger, but I don't find information about that.
just imagine :

i have a <select id="myselect" onChange="a script" > ...</select>
I just use Jquery to replace this select by my own select (with div input img, etc...) and then delete the original html select.

but How to "copy" the OnChange select script to my own "select".

I'm trying this but it don't run (error message from jquery) :

$("#mynewselect").change($("#myselect").change())

have you an Idea of how to do that.

thanks in advance

Hi Ben

it's not a plugin, It's my own code to replace the core select.

I customize my design, in my html page:
first : i place a standard select with an onchange event

then, I call my javascript code to replace this core select by my own drawing select.

but I want to re-use the onchange script that i place on the onchange event of my core select in my html page for my own select.

I know how to call an change event with a new code (with event : function () {...} etc...

but how to call the pre-defined onchange of the code select in my own code...

sorry if I don't explain correctly, I not speaking english very well (I french ;-) )

example :

imagine in your code below (your tuto)

just replace your <input> like that :

# <input type="text" id="d1" value="" onchange='$(this).css("color","#FF00FF") '/>

then in your initpage function :

# function InitPage(){
# var jInput = $( ":input" );
#
# // Bind the onchange event of the inputs to flag
# // the inputs as being "dirty".
# jInput.change(
# function( objEvent ){
#
# how to call the defined input onchange event ???
# }
# );
# }

probably it's more clear with this example !

@Ben Nadel,

thanks for your reply,

I'll go on holidays (15 days) with no PC :-(

I'll give you feedback when I'll come back.

thanks for all Ben !

@ben,

Hi, I'm back after my holidays.

about my problem, it seem's to be more complexe.

first, it's because my standard select is deleted after the creation of my custom select, so, the onchange event does not exist yet.

second, if I want to affect the onchange event handler with my original onchange event, nothing is done, but there no error.

so due to the deadline off my project, I find another solution.

in my standard select, i include a new attribute call "autoupdate" in which I put string of element to update with the onchange. When event occurs, I take this string and I use it as selector parameter $(mystring)
then I can affect now all element on onchange

I hear you saying, ARG !! so dirty !!
I'm agree with you, but I'm now to short from the deadline to spend time to fine more beautifull solution.

the other way consist of creating special function that do the onchange script and use it, I think with existing function your solution will work. but when we write :
<select onchange="$("#foo").val("hello")"
this is an abstract function, probably not functionnal for what I want to do.

but When I'll have more time, I will try to find good solution, because I don't want doing dirty code "for project life".

I'll be back as soon as possible with solution, I hope.

just a last thing : I have post some message on differents forums or blogs to have solution (and in the jquery official forum too) and you are the only one that give me solution or way to investigate.

Thanks a lot GUY !! You are very coooooollllll !!

Good job

Hi Ben!

Nice blog, lot's of good content.

I have a question regarding the .change() event.
I have a shopping cart, which automatically adds some <input> fields, with dynamic values (it extracts values from a cookie, and assigns the different values to the input fields).

Now, here's the problem. When someone types in a new amount of a specific item, e.g. changes the amount of iPods he wants to buy from 1 to 4, I need my jQuery to perform an ajax request, whenever this field is changed.

Here's the code, and I have been trying for 12+ hours now, to get it right!

$(InitPage);

function initPage() {
var jInput = $(":input");

jInput.change(
function( objEvent ) {
var itemAmount = $(this).val();
var itemID = $(this).siblings("input#vareID").val();
});
$.ajax({
type: 'POST',
url: 'checkout.aspx',
data: { 'ID': itemID , 'Amount': itemAmount}
});
});

The codebehind stuff then requests the two datatypes, ID and Amount, but they keep returning zero.

The purpose of this, is updating the client cookie on the fly, with the new item amount.

Woops, the 7th line of the code is of course as follows:

var itemID = $(this).siblings("input#itemID ").val();

@Ben,

Yeah, I realised that as well, so the code now looks like this:

$(InitPage);

function initPage() {
var jInput = $(":input");

jInput.change(function( objEvent ) {
var itemAmount = $(this).val();
var itemID = $(this).siblings("input#itemID").val();
$.ajax({
type: 'GET',
url: 'checkout.aspx',
data: { 'ID': itemID, 'Amount': itemAmount }
});
});
});

But it still wont work :(
Can you think of something I might have done wrong, or a workaround for this problem?

Hi again!

It works now. Now I just need to figure out how to refresh the page asynchronously when the changes are made to the cookie.

The code that worked for me looks like this:

$(document).ready(function() {

var jInput = $(":input");

jInput.change(function() {
var itemAmount = $(this).val();
var itemID= $(this).siblings("input#itemID").val();
$.ajax({
type: 'POST',
url: 'checkout.aspx',
data: { 'ID': itemID, 'Amount': itemAmount }
});
});
});

Thanks for the quick response :)

Hi ben,

I have a general question about DOM properties, javascript and html tag, but I'm not sure that i'm in the good blog post.

if you remember my problem (my "customize" select), I had create a new property of the "standard select", an "autoupdate" property.
<select ... autoupdate="#foo, #bar" >

So my question :

it is allowed to create all the properties we want on all the tag we want ?
is there's some DOM limitations to this creation, and it is compatible with all the actual browser ?

because if it's ok, we can do all what we want, but I think that it's probably not compatible with all browser.

I want your opinion on this point, probably some other developpers may want a response.

Hi Ben,
I ran into a similar problem. But in my case, the text fields were readonly.
A javascript calender control was setting the date in the textbox

Apparently, the change event is a replica of the blur event. It only fires if the textbox is enabled and someone types in it.

If its set through javascript, the onChange event doesn't fire.

Any suggestions?