我如何禁用/启用提交按钮 [英] How do i disabled/enabled submit button

问题描述

我正在使用Django进行项目.我在主页上有3篇文章，每篇文章都有一个带有提交按钮的评论表单.如果textarea中没有文本，并且textarea中有文本，如何禁用提交按钮，则提交表单后，提交按钮将被禁用.我提交表单时，我的评论已保存在数据库中，我已尝试使用此 http://jsfiddle.net/mehdi354/c3wyh761/14/它起作用了，但是我的注释没有保存在数据库中.我该如何解决?

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 textarea and when there is a text in textarea the submit button will be enabled, after form is submitted the submit button will become disabled. My comment saved in database when i submit the form, I have tried using this http://jsfiddle.net/mehdi354/c3wyh761/14/ it worked but my comment is not saving in database. How do i solve this?

表格:

<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禁用/启用按钮:

Jquery disable/enable button:

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

推荐答案

我可以用beforeSend和complete方法解决它.您可以在此处

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>

这篇关于我如何禁用/启用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！