How Do I Disabled/enabled Submit Button

i am working on a project using Django. I have 3 posts in homepage and each have a comment form with a submit button. How do i disable the submit button if there is no text in text

Solution 1:

I would solve it with the beforeSend and the complete method. You find informations about it here

$(document).ready(function() {

  $('.feeds-form').on('submit', onSubmitFeedsForm);
  $('.feeds-form .textinput').on({
    'keyup': onKeyUpTextInput,
    'change': onKeyUpTextInput // if another jquery code changes the value of the input
  });

  function onKeyUpTextInput(event) {
    var textInput = $(event.target);
    textInput.parent().find('.submit').attr('disabled', textInput.val() == '');
  }

  function onSubmitFeedsForm(event) {
    event.preventDefault();

    // if you need to use elements more than once try to keep it in variables
    var form = $(event.target);
    var textInput = form.find('.textinput');
    var hiddenField = form.find('input[name="post_comment"]');

    $.ajax({
      type: 'POST',
      url: "{% url 'site:home' %}",
      // use the variable of the "form" here
      data: form.serialize(),
      dataType: 'json',
      beforeSend: function() {
        // beforeSend will be executed before the request is sent
        form.find('.submit').attr('disabled', true);
      },
      success: function(response) {
        // as a hint: since you get a json formatted response you should better us "response.form" instead of response['form']
        $('#newfeeds-form' + hiddenField.val()).html(response.form);
        // do you really want to reset all textarea on the whole page? $('textarea').val('');
        textInput.val(''); // this will trigger the "change" event automatically
      },
      error: function(rs, e) {
        console.log(rs.resopnseText);
      },
      complete: function() {
        // this will be executed after "success" and "error"
        // depending on what you want to do, you can use this in the "error" function instead of here
        // because the "success" function will trigger the "change" event automatically
        textInput.trigger('change');
      }
    });
  }

});

.feeds-form .submit[disabled] {
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="md-form">
  <form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">
    <!-- {% csrf_token %} -->
    <input type="hidden" value={{post.id}} name="post_comment">
    <textarea name="comment_post" class="textinput textInput animated fadeIn" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>

    <button type="submit" class="submit" id="submit1-{{post.id}}" disabled="disabled"><i class="fas fa-paper-plane"></i> Submit</button>
  </form>
</span>

<span class="md-form">
  <form enctype="multipart/form-data" class="feeds-form form-inline md-form form-sm" method="POST" action="{% url 'site:home' %}">
    <!-- {% csrf_token %} -->
    <input type="hidden" value={{post.id}} name="post_comment">
    <textarea name="comment_post" class="textinput textInput animated fadeIn" placeholder="Add a comment..." required="" id="id_comment_post{{ post.id }}" onkeyup=""></textarea>

    <button type="submit" class="submit" id="submit1-{{post.id}}" disabled="disabled"><i class="fas fa-paper-plane"></i> Submit</button>
  </form>
</span>