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

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

  functiononSubmitFeedsForm(event) {
    event.preventDefault();

    // if you need to use elements more than once try to keep it in variablesvar 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" heredata: 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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><spanclass="md-form"><formenctype="multipart/form-data"class="feeds-form form-inline md-form form-sm"method="POST"action="{% url 'site:home' %}"><!-- {% csrf_token %} --><inputtype="hidden"value={{post.id}}name="post_comment"><textareaname="comment_post"class="textinput textInput animated fadeIn"placeholder="Add a comment..."required=""id="id_comment_post{{ post.id }}"onkeyup=""></textarea><buttontype="submit"class="submit"id="submit1-{{post.id}}"disabled="disabled"><iclass="fas fa-paper-plane"></i> Submit</button></form></span><spanclass="md-form"><formenctype="multipart/form-data"class="feeds-form form-inline md-form form-sm"method="POST"action="{% url 'site:home' %}"><!-- {% csrf_token %} --><inputtype="hidden"value={{post.id}}name="post_comment"><textareaname="comment_post"class="textinput textInput animated fadeIn"placeholder="Add a comment..."required=""id="id_comment_post{{ post.id }}"onkeyup=""></textarea><buttontype="submit"class="submit"id="submit1-{{post.id}}"disabled="disabled"><iclass="fas fa-paper-plane"></i> Submit</button></form></span>