29

I am trying to make a function which will execute when the value of a text input field is changed. The value of the field changes when a table cell is clicked, not on keyup, nor paste. I tried it like this:

$("#kat").change(function(){ 
    alert("Hello");
});

And I have the text field:

<input type="text" id="kat" value="0"/>

but it isn't working. Any help?

Tirth Patel
  • 5,443
  • 3
  • 27
  • 39
Marko Cakic
  • 6,936
  • 9
  • 27
  • 34
  • 1
    Sounds like you want to attach to the click event of that table cell. – Tejs May 03 '12 at 19:50
  • 1
    What do you mean the value changes when a table cell is clicked, where's the markup for that, and would'nt that imply that a click event handler is the way to go ? – adeneo May 03 '12 at 19:51
  • I wanted to reduce the amount of code by putting the value of the clicked link in a text input field and then on that change executing one function, but in the end I made a function for each click event (22 events)... – Marko Cakic May 03 '12 at 20:01

10 Answers10

28

This is from a comment on the jQuery documentation page:

In older, pre-HTML5 browsers, "keyup" is definitely what you're looking for.

In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form.

$('element').bind('input',function);

Community
  • 1
  • 1
aldux
  • 2,774
  • 2
  • 25
  • 36
9

Seems to me like you are updating the value of the text field in javascript. onchange event will be triggered only when you key-in data and tab out of the text field.

One workaround is to trigger the textbox change event when modifying the textbox value from the script. See below,

$("#kat").change(function(){ 
    alert("Hello");
});


$('<tab_cell>').click (function () {
   $('#kat')
      .val($(this).text()) //updating the value of the textbox 
      .change();           //trigger change event.
});
Selvakumar Arumugam
  • 79,297
  • 15
  • 120
  • 134
  • I wanted to reduce the amount of code by putting the value of the clicked link in a text input field and then on that change executing one function, but in the end I made a function for each click event (22 events)... – Marko Cakic May 03 '12 at 20:01
  • @MarkoCakic Your question is not clear, Post relevant HTML and JS so that we can help. – Selvakumar Arumugam May 03 '12 at 20:02
  • This is a really cool way of triggering an event with chaining. Thanks! – film42 Mar 28 '13 at 05:43
9

This technique is working for me:

$('#myInputFieldId').bind('input',function(){ 
               alert("Hello");
    });

Note that according to this JQuery doc, "on" is recommended rather than bind in newer versions.

solublefish
  • 1,681
  • 2
  • 18
  • 24
5

This worked for me

var change_temp = "";
$('#url_key').bind('keydown keyup',function(e){
    if(e.type == "keydown"){
        change_temp = $(this).val();
        return;
    }
    if($(this).val() != change_temp){
        // add the code to on change here 
    }

});
M S
  • 3,995
  • 3
  • 25
  • 36
4

The jQuery documentation says this "It is also displayed [the handler execution result] if you change the text in the field and then click away. If the field loses focus without the contents having changed, though, the event is not triggered.".

Try the keyup and keydown events, like this:

$("#kat").keydown(function(){ 
   alert("Hello");
});
Adauto
  • 569
  • 3
  • 5
3
function search() {
        var query_value = $('input#search').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    //alert(html);
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").live("keyup", function(e) {
        clearTimeout($.data(this, 'timer'));

        var search_string = $(this).val();

        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        };
    });


and the html 
<input id="search" style="height:36px; font-size:13px;" type="text" class="form-control" placeholder="Enter Mobile Number or Email"  value="<?php echo stripcslashes($_REQUEST["string"]); ?>" name="string" />
        <h4 id="results-text">Showing results for: <b id="search-string">Array</b></h4>
        <ul id="results"></ul>
priyanka
  • 86
  • 1
  • 5
1

I recently was wondering why my code doesn't work, then I realized, I need to setup the event handlers as soon as the document is loaded, otherwise when browser loads the code line by line, it loads the JavaScript, but it does not yet have the element to assign the event handler to it. with your example, it should be like this:

$(document).ready(function(){
     $("#kat").change(function(){ 
         alert("Hello");
     });
});
Ehsan Karami
  • 11
  • 2
0

That is working for me. Could be a browser issue as mentioned, or maybe jQuery isn't registered properly, or perhaps the real issue is more complicated (that you made a simpler version to ask this). PS - did have to click out of the text box to make it fire.

http://jsfiddle.net/toddhd/Qt7fH/

Todd Davis
  • 5,855
  • 10
  • 53
  • 89
0

This works for me on all browsers and Jquery <= v1.10

$('#kat').on('keyup', function () {
    alert("Hello");
});

or as it seems you want

$('#kat').on('click', function () {
    alert("Hello");
});

Textbox input field change event fires as you would expect it to, the jQuery .Change event only works correctly on html5 supported browsers

Pierre
  • 8,397
  • 4
  • 64
  • 80
0

Try this,

$('#kat').on('input',function(e){
 alert('Hello')
});
Rashad Valliyengal
  • 3,132
  • 1
  • 25
  • 39