Hide DIVs after function has completed his task

Question

I wrote a piece of code that auto replies to user text input. An automated "live chat" so to say.

Though when the script runs out of responses I want it to disable the subit form and button, I don't really have any clue on how to do such a thing.

My code:

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
    $(document).ready(function() {
      $("#typing").hide();
      var n = "You:<br>";
      var o = $('#outputWindow');
      var i = $('#inputWindow');
      var s = $('#sendButton');
      var t = $('#typing');      
      var r = -1;

      //arrays
      var msg = ['msg1', 'msg2', 'msg3'];

      //fire send events
      $(s).click(function() {
      runAI();
      });
      $(i).keydown(function(e) {
      if (e.keyCode == 13) {
            runAI();
      }
      });

      function runAI() {
      if (i.val().length > 0) {
            r = r + 1;
            o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );      
            setTimeout(function(){ $("#typing").show();  }, 3000);            
            setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
            setTimeout(function(){ $("#typing").hide();  }, 8000);
            i.val('');
            i.focus();
      }
      }
      i.focus();
    });
});//]]>  

</script>

The idea is to hide the submit form and button after (in the case) the script has responded with: msg1, msg2 and msg3.

If anyone can help, that'd be great !

Answer 1

This will do that. Place at the bottom of the runAI() function.

this will check r+1 each time runAi() is invoked. When it detects that it's greater than or equal to the message array length it will hide the user input possibilities after the last message is sent.

  function runAI() {
     if (i.val().length > 0) {
        r = r + 1;
        o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );      
        setTimeout(function(){ $("#typing").show();  }, 3000);            
        setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
        setTimeout(function(){ $("#typing").hide();  }, 8000);

        if (r+1 >= msg.length)
        {
           $('#inputWindow').hide();
           $('#sendButton').hide(); 
           return true; // end the function here;
        }
        else
        {
           i.val('');
           i.focus();
        }
     }
  }

When r reaches a length greater than or equal to the length of the array the input and button is hidden.

Answer 2

Well, simply use CSS to hide it:

$(<your object>).css('display', 'none');

use this for every object you want to hide. Go to www.w3schools.com and check out the posible values for the display property.