1

i created a condition that when a button is clicked, it will get the value of my ID from <input id="id" class="req"> box, and will display the associated name of that ID and put it in Name<input id="name" class="req"> box.

so when i type 1, i will get BOB. pretty basic.

i also have a condition, that both <input> box should have values, before a specific <div> will appear. so by default this <div> is hidden.

the part im struggling is, whenever i click the button, then i get the name, even though, i have successfully filled my 2 <input> boxes, the <div> still wont appear.

this is my code.

//<input> conditions

$('input.req').on("keyup keypress change", function () {
  $('input.req').each(function() { 
    if($(this).val() != "") {
        $("#content").show();
    }
    else {
        $("#content").hide();
    }
  });
});

again, if you type 1, you will get bob. but the <div> wont show up. but if you manually, fill in the textboxes, the <div> will appear.

what i want to happen is, input my ID, click the button, get the name, place the name inside inside my name <input> box and make the <div> appear.

bobbyjones
  • 2,029
  • 9
  • 28
  • 47
  • 1
    y are you using `$.each`? are there many input.req. PLease post html also. – bhb Oct 01 '13 at 06:08
  • Changing the value of an input with jQuery doesn't always fire the change event. http://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us – lemieuxster Oct 01 '13 at 06:12
  • @bhb i have 3 but opted for 2 only for simplicity. i used each, almost all of the things ive read, they usually refer to `each` to check **each** element. not sure if im following it right though.. – bobbyjones Oct 01 '13 at 06:15
  • @lemieuxster thanks for this link! this solved my issue. i simply added `.change();` and it worked. – bobbyjones Oct 01 '13 at 06:27

2 Answers2

0

You should also check your input boxes in Ajax success handler because as for now you only been doing it on key events:

$.ajax({
   url: //url,
   success: function() {
      $('input.req').each(function() { 
         if($(this).val() != "") {
            $("#content").show();
         }
         else {
            $("#content").hide();
         }
      });
   }    
})
Alex Art.
  • 8,711
  • 3
  • 29
  • 47
0

your problem is you go throw every input every time an imput is change. just remove $('input.req').each(function() { and all will be ok.

peernohell
  • 808
  • 4
  • 12
  • why put -1? it's that. when your input change you have just to call the code that show/hide content. For the moment your code will pass throw every input.req and as the last input.req is empty the content is hidden. – peernohell Oct 01 '13 at 06:24