CODEWITHSUNDEEP
javascriptjqueryhtml
Snowlav
Snowlav

Reputation: 465

Disable the function of a submit button in a html form with jquery, but still have it visible

As you can see in the code below, I am making an automated chat. The user inputs text and the code responds with a message.

It's working alright so far but right now I want to prevent the user sending another message before my message appears.

So lets say the user sends a message, after that the submit button becomes disabled, preventing the user from sending more messages. When the code responds, the button comes availible again.

I don't want to hide the button, but I want to disable it's function. That way it'd still be visible, just not functional while the function runAI is running.

If someone can help, that'd be great.

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);

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

</script>

Upvotes: 1

Views: 260

Answers (5)

user4654032
user4654032

Reputation:

To disable the button :

$("#buttonId").prop("disabled",true);

And to enable the button :

$("#buttonId").prop("disabled",false);

I would integrate in your code like this ;

$(s).click(function() {
  $("#buttonId").prop("disabled",true);
  runAI();
});
$(i).keydown(function(e) {
  if (e.keyCode == 13) {
        $("#buttonId").prop("disabled",true);
        runAI();
  }
});

And then when runAI() is done :

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)
    {
       setTimeout(function(){$('#inputWindow').hide();  }, 8000);
       setTimeout(function(){$('#sendButton').hide();  }, 8000);
       return true; // end the function here;
    }
    else
    {
       i.val('');
       i.focus();
    }

    $("#buttonId").prop("disabled",false);
 }
}

Upvotes: 2

Dayan
Dayan

Reputation: 8031

As per the latest jQuery Docs which was last updated January 26, 2015.

// Disable
$( "#sendButton" ).prop( "disabled", true );

// Enable
$( "#sendButton" ).prop( "disabled", false );

Upvotes: 2

Jill
Jill

Reputation: 693

 document.getElementById("Submit").disabled = true;

Upvotes: 1

Florian Eck
Florian Eck

Reputation: 495

To disable the button

$('input[type="submit"], input[type="button"], button').disable(true);

To enable the button again

$('input[type="submit"], input[type="button"], button').disable(false);

Of course the selector should be matching your submit button. my example would disable all buttons on your page

Upvotes: 0

Brijesh Bhatt
Brijesh Bhatt

Reputation: 3830

Use:

$("#buttonId").prop("disabled",true);

Upvotes: 0

Related Questions