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












1















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>












share|improve this question





























    1















    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>












    share|improve this question



























      1












      1








      1








      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>












      share|improve this 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>








      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>





      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>






      javascript jquery html css






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 14 '18 at 11:03









      Rory McCrossan

      244k29211247




      244k29211247










      asked Nov 14 '18 at 10:59









      Sasha BorysenkoSasha Borysenko

      524




      524
























          6 Answers
          6






          active

          oldest

          votes


















          2














          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>








          share|improve this 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>








            share|improve this answer































              2














              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.






              share|improve this answer































                0














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





                share|improve this answer































                  0

















                  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>








                  share|improve this answer































                    0

















                    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>








                    share|improve this answer
























                    • you just need to add $('#btn').attr('disabled',true); below $('#text').val("");

                      – Viddesh Mandpe
                      Nov 14 '18 at 11:52











                    Your Answer






                    StackExchange.ifUsing("editor", function () {
                    StackExchange.using("externalEditor", function () {
                    StackExchange.using("snippets", function () {
                    StackExchange.snippets.init();
                    });
                    });
                    }, "code-snippets");

                    StackExchange.ready(function() {
                    var channelOptions = {
                    tags: "".split(" "),
                    id: "1"
                    };
                    initTagRenderer("".split(" "), "".split(" "), channelOptions);

                    StackExchange.using("externalEditor", function() {
                    // Have to fire editor after snippets, if snippets enabled
                    if (StackExchange.settings.snippets.snippetsEnabled) {
                    StackExchange.using("snippets", function() {
                    createEditor();
                    });
                    }
                    else {
                    createEditor();
                    }
                    });

                    function createEditor() {
                    StackExchange.prepareEditor({
                    heartbeatType: 'answer',
                    autoActivateHeartbeat: false,
                    convertImagesToLinks: true,
                    noModals: true,
                    showLowRepImageUploadWarning: true,
                    reputationToPostImages: 10,
                    bindNavPrevention: true,
                    postfix: "",
                    imageUploader: {
                    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                    allowUrls: true
                    },
                    onDemand: true,
                    discardSelector: ".discard-answer"
                    ,immediatelyShowMarkdownHelp:true
                    });


                    }
                    });














                    draft saved

                    draft discarded


















                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53298633%2fhow-to-clear-my-input-if-button-is-clicked-and-at-the-same-time-make-button-uncl%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown

























                    6 Answers
                    6






                    active

                    oldest

                    votes








                    6 Answers
                    6






                    active

                    oldest

                    votes









                    active

                    oldest

                    votes






                    active

                    oldest

                    votes









                    2














                    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>








                    share|improve this answer






























                      2














                      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>








                      share|improve this answer




























                        2












                        2








                        2







                        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>








                        share|improve this answer















                        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>








                        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>





                        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>





                        $("#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>





                        $("#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>






                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Nov 14 '18 at 11:13

























                        answered Nov 14 '18 at 11:06









                        Just codeJust code

                        10.4k53066




                        10.4k53066

























                            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>








                            share|improve this 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>








                              share|improve this answer


























                                2












                                2








                                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>








                                share|improve this answer













                                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>








                                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>





                                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>






                                share|improve this answer












                                share|improve this answer



                                share|improve this answer










                                answered Nov 14 '18 at 11:07









                                Rory McCrossanRory McCrossan

                                244k29211247




                                244k29211247























                                    2














                                    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.






                                    share|improve this answer




























                                      2














                                      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.






                                      share|improve this answer


























                                        2












                                        2








                                        2







                                        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.






                                        share|improve this answer













                                        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.







                                        share|improve this answer












                                        share|improve this answer



                                        share|improve this answer










                                        answered Nov 14 '18 at 11:18









                                        Matt.SMatt.S

                                        179116




                                        179116























                                            0














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





                                            share|improve this answer




























                                              0














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





                                              share|improve this answer


























                                                0












                                                0








                                                0







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





                                                share|improve this answer













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






                                                share|improve this answer












                                                share|improve this answer



                                                share|improve this answer










                                                answered Nov 14 '18 at 11:09









                                                Mohan RajputMohan Rajput

                                                271312




                                                271312























                                                    0

















                                                    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>








                                                    share|improve this answer




























                                                      0

















                                                      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>








                                                      share|improve this answer


























                                                        0












                                                        0








                                                        0










                                                        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>








                                                        share|improve this answer
















                                                        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>








                                                        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>





                                                        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>






                                                        share|improve this answer












                                                        share|improve this answer



                                                        share|improve this answer










                                                        answered Nov 14 '18 at 11:19









                                                        Sk EklasSk Eklas

                                                        1




                                                        1























                                                            0

















                                                            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>








                                                            share|improve this answer
























                                                            • you just need to add $('#btn').attr('disabled',true); below $('#text').val("");

                                                              – Viddesh Mandpe
                                                              Nov 14 '18 at 11:52
















                                                            0

















                                                            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>








                                                            share|improve this answer
























                                                            • you just need to add $('#btn').attr('disabled',true); below $('#text').val("");

                                                              – Viddesh Mandpe
                                                              Nov 14 '18 at 11:52














                                                            0












                                                            0








                                                            0










                                                            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>








                                                            share|improve this answer
















                                                            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>








                                                            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>





                                                            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>






                                                            share|improve this answer












                                                            share|improve this answer



                                                            share|improve this answer










                                                            answered Nov 14 '18 at 11:49









                                                            Viddesh MandpeViddesh Mandpe

                                                            1




                                                            1













                                                            • you just need to add $('#btn').attr('disabled',true); below $('#text').val("");

                                                              – Viddesh Mandpe
                                                              Nov 14 '18 at 11:52



















                                                            • you just need to add $('#btn').attr('disabled',true); below $('#text').val("");

                                                              – Viddesh Mandpe
                                                              Nov 14 '18 at 11:52

















                                                            you just need to add $('#btn').attr('disabled',true); below $('#text').val("");

                                                            – Viddesh Mandpe
                                                            Nov 14 '18 at 11:52





                                                            you just need to add $('#btn').attr('disabled',true); below $('#text').val("");

                                                            – Viddesh Mandpe
                                                            Nov 14 '18 at 11:52


















                                                            draft saved

                                                            draft discarded




















































                                                            Thanks for contributing an answer to Stack Overflow!


                                                            • Please be sure to answer the question. Provide details and share your research!

                                                            But avoid



                                                            • Asking for help, clarification, or responding to other answers.

                                                            • Making statements based on opinion; back them up with references or personal experience.


                                                            To learn more, see our tips on writing great answers.




                                                            draft saved


                                                            draft discarded














                                                            StackExchange.ready(
                                                            function () {
                                                            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53298633%2fhow-to-clear-my-input-if-button-is-clicked-and-at-the-same-time-make-button-uncl%23new-answer', 'question_page');
                                                            }
                                                            );

                                                            Post as a guest















                                                            Required, but never shown





















































                                                            Required, but never shown














                                                            Required, but never shown












                                                            Required, but never shown







                                                            Required, but never shown

































                                                            Required, but never shown














                                                            Required, but never shown












                                                            Required, but never shown







                                                            Required, but never shown







                                                            Popular posts from this blog

                                                            Bressuire

                                                            Vorschmack

                                                            Quarantine