0

I am trying to automatically show a div when a value is assigned to a input element.

So far i am using keyup function, but this works only if i typed in a value. How can i show/hide a div if the value is assigned to the input without me typing it in?

Here is what i have.

<script>
$("#ven_id").keyup(function(){
if($(this).val()) {
    $(".inv_item").slideDown(500);
} else {
    $(".inv_item").slideUp(500);
}

});
</script>

any suggestions?

Asieh hojatoleslami
  • 3,240
  • 7
  • 31
  • 45
samjones39
  • 163
  • 1
  • 2
  • 13
  • bind focus events for #ven_id $("#ven_id").bind("focus keyup",function(){}); – Selva Sep 08 '14 at 03:58
  • hi selva, this kinda works but i have to click in the input before it to slide, i don't have to change the number like in my example but i would like it to side without me clicking in the input element – samjones39 Sep 08 '14 at 04:12

3 Answers3

1

Consider using the change handler. jQuery Documentation

$("#ven_id").change(function(event) {
    if(event.target.value) {
        $(".inv_item").slideDown(500);
    } else {
        $(".inv_item").slideUp(500);
    }
});

Example Fiddle

drneel
  • 2,887
  • 5
  • 30
  • 48
  • Thanks for your suggestion. i tried this but no luck. works if i type the number in though. – samjones39 Sep 08 '14 at 04:01
  • 1
    +1 however, be aware that `change` will get triggered only after `ven_id` has lost focus which might be a bit late depending on what you want to achieve...I'd suggest using a combination of both – Leo Sep 08 '14 at 04:01
  • As @Leo said, it will fire when the field loses focus. Exactly what behavior do you want to see? If a user types in the box as well as if it is updated through some other mechanism? – drneel Sep 08 '14 at 04:04
  • basically i have a popup that passes a value to the input field in a form, everything works well. click even in the popup does assign the value to the input, just that it does not show the div. if i type a number in it rather that being assigned one from the popup, it works. – samjones39 Sep 08 '14 at 04:07
  • @Anand26...why don't you move that logic to its own function so you can reuse it? Then, call the function on `keyup` and then when the popup passes the value to the inout...that should be pretty straight forward – Leo Sep 08 '14 at 04:11
  • @Leo has a good suggestion, or you can add a $("#ven_id").blur(); call after you set the textbox value with my code. – drneel Sep 08 '14 at 04:13
0

The problem you are seeing is that an event isn't fired when the input's value is set in code. This answers your question I believe .val() doesn't trigger .change() in jquery.

After the popup sets the input's value you need to manually trigger the event. 

$("#ven_id").val("somevalue").trigger("keyup");
Community
  • 1
  • 1
user104729
  • 58
  • 5
  • hi thanks for your suggestion as well, this means i will have to click in the input, i was trying for it to show the div automatically. – samjones39 Sep 08 '14 at 11:29
  • Sorry, if I wasn't being clear with my answer. This will be in conjunction with your previous solution of the keyup event. The keyup event will take care of showing / hiding the div when the user types in the input. The code I've added will trigger the same event when the value is set automatically. Check this out (http://jsfiddle.net/hednsv2f/) to see what I mean. – user104729 Sep 08 '14 at 22:23
0

Try this one, May it can help You.

if($(this).val().length > 0) {
    $(".inv_item").slideDown(500);
} else {
    $(".inv_item").slideUp(500);
}
Kaushal Khamar
  • 2,097
  • 1
  • 17
  • 23
  • hi thanks your your suggestion. i tested it but was not able to get it working. only works if i type the value in. – samjones39 Sep 08 '14 at 11:28