我如何禁用/启用提交按钮

Question

我正在使用 Django 开发一个项目。我在主页上有 3 个帖子，每个帖子都有一个带有提交按钮的评论表单。如果 textarea 中没有文本，我如何禁用提交按钮，并且当 textarea 中有文本时，提交按钮将被启用，提交表单后，提交按钮将被禁用。当我提交表单时，我的评论保存在数据库中，我尝试使用这个http://jsfiddle.net/mehdi354/c3wyh761/14/ 它有效，但我的评论没有保存在数据库中。我该如何解决这个问题？

表格：

<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>button</button>
  </form>
</span>

Ajax 表单提交：

<script>
$(document).on('submit', '.feeds-form', function(event){
event.preventDefault();
var pk = $(this).attr('value');
console.log($(this).serialize());

$.ajax({
  type: 'POST',
  url: "{% url 'site:home' %}",
  headers: { 'X-CSRFToken': $('input[name=csrfmiddlewaretoken]').val() },
  data: $(this).serialize(),
  dataType: 'json',
  success: function(response) {
    $('#newfeeds-form'+pk).html(response['form']);
     $('textarea').val('');
    //console.log($('#newfeeds-form'+pk).html(response['form']));
  },
  error: function(rs, e) {
    console.log(rs.resopnseText);
  },
});
});
</script>

Jquery 禁用/启用按钮：

$(document).on("keydown",".textinput",function(){
let buttons = $(this).closest("form").find(".submit")
if($(this).val() == "") {
buttons.attr("disabled",true);  
}
else{
  buttons.attr("disabled",false);
}
$(document).on("click",".submit",function(e){
$(this).closest("form").trigger("reset");;
$(this).attr("disabled",true);
});
});
</script>

Answer 1

我会用beforeSend 和complete 方法解决它。您可以找到有关它的信息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>