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?

Improve this question
2
  • bind focus events for #ven_id $("#ven_id").bind("focus keyup",function(){}); Commented Sep 8, 2014 at 3: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 Commented Sep 8, 2014 at 4:12

3 Answers 3

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Thanks for your suggestion. i tried this but no luck. works if i type the number in though.
+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
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?
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.
@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
|
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");
Improve this answer

2 Comments

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.
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 (jsfiddle.net/hednsv2f) to see what I mean.
0

Try this one, May it can help You.

if($(this).val().length > 0) { $(".inv_item").slideDown(500); } else { $(".inv_item").slideUp(500); }
Improve this answer

1 Comment

hi thanks your your suggestion. i tested it but was not able to get it working. only works if i type the value in.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.