How to clear my input if button is clicked and at the same time make button unclickable if input is empty?

Question

I want to create a simple chat but don't know how to clear my input if the button is clicked and at the same time make button unclickable if the input is empty. This is how I did but it doesn't work.

 function ctrlButton() { btn.disabled = this.value.trim().length === 0; } text.addEventListener('input', ctrlButton, false); ctrlButton.call(text); $('#btn').on('click', function(e) { e.preventDefault(); var val = $('#text').val(); if (val.length >= 1) { $('#text').val(""); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sendCtrls"> <input type="text" autocomplete="off" placeholder="Your message is here" id='text'> <button class="button button1" id="btn">Send</button> </div> 

Answer 1

Everything you are doing is good,You just need to add btn.disabled =true; inside click event.

 function ctrlButton() { btn.disabled = this.value.trim().length === 0; } text.addEventListener('input', ctrlButton, false); ctrlButton.call(text); $('#btn').on('click', function(e) { e.preventDefault(); var val = $('#text').val(); if (val.length >= 1) { $('#text').val(""); btn.disabled =true; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sendCtrls"> <input type="text" autocomplete="off" placeholder="Your message is here" id='text'> <button class="button button1" id="btn">Send</button> </div> 

Better version

 $("#text").on("input propertychange paste",function(){ debugger; if($(this).val()===''){ $('#btn').attr('disabled',true); }else{ $('#btn').removeAttr('disabled'); } }); $('#btn').on('click', function(e) { e.preventDefault(); var val = $('#text').val(); if (val.length >= 1) { $('#text').val(""); $('#btn').attr('disabled',true); } }); $('#btn').attr('disabled',true); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sendCtrls"> <input type="text" autocomplete="off" placeholder="Your message is here" id='text'> <button class="button button1" id="btn">Send</button> </div> 

Answer 2

Your logic is pretty much correct. The last thing you need to do is to disable the button when you clear the value of the input.

Note that I converted the example below to use jQuery entirely to save confusion.

 var $btn = $('#btn').on('click', function(e) { e.preventDefault(); var val = $('#text').val(); if (val.length >= 1) { $('#text').val(""); $btn.prop('disabled', true); } }); $('#text').on('input', function() { var $text = $(this); $btn.prop('disabled', function() { return $text.val().trim().length === 0; }); }).trigger('input'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sendCtrls"> <input type="text" autocomplete="off" placeholder="Your message is here" id='text'> <button class="button button1" id="btn">Send</button> </div> 

Answer 3

First set your button to disabled like this:

<button class="button button1" id="btn" disabled>Send</button>

Then to disable the button when the <input> is empty put those functions in a <script> tag at the bottom of your document:

$('#text').keyup(function(){
   if ($('#text').val() != '') {
      $('#btn').prop('disabled', false);
   }  
});

$('#btn').click(function(){
   $('#text').val('');
   $('#btn').prop('disabled', true);
});

This should work for you.

Answer 4

Your code is correct, you just need to add $(this).attr("disabled",true); line at last of your button's onclick event.

Here's the JSFiddle Link

$('#btn').on('click', function(e) {
  e.preventDefault();

  var val = $('#text').val();
  if (val.length >= 1) {
    $('#text').val("");
  }
  $(this).attr("disabled",true);
});

Answer 5

 function ctrlButton() { btn.disabled = this.value.trim().length === 0; } text.addEventListener('input', ctrlButton, false); ctrlButton.call(text); $('#btn').on('click', function(e) { e.preventDefault(); var val = $('#text').val(); if (val.length >= 1) { $('#text').val(""); $('#btn').prop('disabled', true); } else { $('#btn').prop('disabled', false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sendCtrls"> <input type="text" autocomplete="off" placeholder="Your message is here" id='text'> <button class="button button1" id="btn">Send</button> </div> 

Answer 6

 function ctrlButton() { btn.disabled = this.value.trim().length === 0; } text.addEventListener('input', ctrlButton, false); ctrlButton.call(text); $('#btn').on('click', function(e) { e.preventDefault(); var val = $('#text').val(); if (val.length >= 1) { $('#text').val(""); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="sendCtrls"> <input type="text" autocomplete="off" placeholder="Your message is here" id='text'> <button class="button button1" id="btn">Send</button> </div>