在Rails中，如何在单击“提交”按钮后同时禁用textarea和sumbit按钮？

Question

I have a form which contains a textarea and a submit button. When user clicks the submit button, the form will be submitted acyshornizedly using AJAX. I want to disable both the textarea and the button during the submitting.

I tried binding a JS click event to the submit button and disable these two controls there. My code here:

Form:

<%= form_for @tweet, remote: true do |f| %>
  <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
    <% if @tweet.errors.any? %>
        <div id="error_explanation">
            <h2><%=pluralize(@tweet.errors.count, "error") %> prohibited this article form being saved:</h2>
            <ul>
                <% @tweet.errors.full_messages.each do |msg| %>
                    <li><%= msg %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <div class="div_add_text">
        <%= f.text_area :content, id: "textarea_add_tweet" %>
        <%= f.submit class: "pure-button", id: "btn_add_tweet" %>
    </div>

    <div class="div_submit">
    </div>
<% end %>

JS

$(document).ready( function () {
    $("#btn_add_tweet").click(function() {
        $(this).prop("disabled",true);
        $("#textarea_add_tweet").prop("disabled",true);
    });
});

How ever, if i do this, the form would not be submitted. How can I achieve the effect as I want?

Answer 1

Have you tried setting a timeout? OnClick gets called before the button's associated action is executed, so disabling asynchronously should work.

$(document).ready( function () {
  $("#btn_add_tweet").click(function() {
    setTimeout(function() {
      $("#btn_add_tweet").prop("disabled",true);
      $("#textarea_add_tweet").prop("disabled",true);
    }, 5);
  };
};

Where 5 is the time in milliseconds before the function gets called.

Answer 2

I will recommend you to use this:

$(window).submit(function() { $('#btn_add_tweet, #textarea_add_tweet').attr('disabled', true); });

Because if you have added some kind of validation and some how validation fails then it will disable these two things.