javascript - 如何使用 jquery 将数据传递/阻止到表单中

Question

我目前正在尝试创建一些帖子。它们可以关联到一个(文件、任务、事件)。所以我在我的 new_post_form 中为每个附件做了一个部分。

所以我的问题是，如果附件的形式被关闭，如何阻止数据？

如果你想看一个真实的例子，我把我需要的那种数据放到那个表格里

新帖子表格:

<!-- New Post (modal) -->
<%= simple_form_for(Post.new) do |f| %>
  <div id='MyNewPost' class='modal fade' role='dialog' aria-hidden="true">
    <div class="modal-dialog" style="width:400px;">
      <div class='content'>
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h3 class="modal-title">Nouveau post</h3>
        </div>
        <div class="modal-body">
          <div class="form-inputs">
            <h4>Votre message :</h4>
            <%= f.input :content, label: false%>
          </div>
          <hr>
          <div class="post_attachement">
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Document" id="file_btn">
              <i class="fa fa-file-o" aria-hidden="true"></i>
            </div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tâche" id="task_btn">
              <i class="fa fa-thumb-tack" aria-hidden="true"></i>
            </div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Evenement" id="event_btn">
              <i class="fa fa-calendar" aria-hidden="true"></i>
            </div>
            <div class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Cloud" id="cloud_btn">
              <i class="fa fa-cloud" aria-hidden="true"></i>
            </div>
          </div>
          <div class="form-inputs">
            <div id="file_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 1 %>
              Form for new file 
            </div>
            <div id="task_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 2 %>
              Form for new task
            </div>
            <div id="event_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 3 %>
              Form for new event
            </div>
            <div id="cloud_attach">
              <%= f.hidden_field :attached, :value => true %>
              <%= f.hidden_field :attached_cat, :value => 4 %>
              Form for new cloud
            </div>
          </div>
        </div>
        <%= f.hidden_field :group_id, :value => @group.id %>
        <div class='modal-footer'>
          <div class="btn btn-default pull-left">
            Annuler
          </div>
          <%= f.button :submit, "Créer le post", class: "btn btn-success pull-right" %>
        </div>
      </div>
    </div>
  </div>
<% end %>
<!-- /New Post (modal) -->

用于打开/关闭 form_attached 的 Jquery 脚本:

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#file_attach').hide();
  jQuery('#file_btn').on('click', function (event) {
  jQuery('#task_attach').hide();
  jQuery('#event_attach').hide();
  jQuery('#cloud_attach').hide();
  jQuery('#file_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#task_attach').hide();
  jQuery('#task_btn').on('click', function (event) {
  jQuery('#file_attach').hide();
  jQuery('#event_attach').hide();
  jQuery('#cloud_attach').hide();
  jQuery('#task_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#event_attach').hide();
  jQuery('#event_btn').on('click', function (event) {
  jQuery('#task_attach').hide();
  jQuery('#file_attach').hide();
  jQuery('#cloud_attach').hide();
  jQuery('#event_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
  jQuery('#cloud_attach').hide();
  jQuery('#cloud_btn').on('click', function (event) {
  jQuery('#task_attach').hide();
  jQuery('#event_attach').hide();
  jQuery('#file_attach').hide();
  jQuery('#cloud_attach').toggle();
      });
  });
</script>
<!-- /Script file-attachement -->

Answer 1

琐事:

• 您可以将 disabled="true" 添加到输入元素中。
  • 当“禁用”时，它不会作为表单提交的一部分发送。

解决方案:

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#file_attach').hide();
    jQuery('#file_btn').on('click', function (event) {
      jQuery('#task_attach').hide();
      jQuery('#task_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').hide();
      jQuery('#event_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').hide();
      jQuery('#cloud_attach').find(':input').attr('disabled', true);
      jQuery('#file_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#task_attach').hide();
    jQuery('#task_btn').on('click', function (event) {
      jQuery('#file_attach').hide();
      jQuery('#file_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').hide();
      jQuery('#event_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').hide();
      jQuery('#cloud_attach').find(':input').attr('disabled', true);
      jQuery('#task_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#event_attach').hide();
    jQuery('#event_btn').on('click', function (event) {
      jQuery('#task_attach').hide();
      jQuery('#task_attach').find(':input').attr('disabled', true);
      jQuery('#file_attach').hide();
      jQuery('#file_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').hide();
      jQuery('#cloud_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

<!-- Script file-attachement -->
<script>
  jQuery(document).ready(function () {
    jQuery('#cloud_attach').hide();
    jQuery('#cloud_btn').on('click', function (event) {
      jQuery('#task_attach').hide();
      jQuery('#task_attach').find(':input').attr('disabled', true);
      jQuery('#event_attach').hide();
      jQuery('#event_attach').find(':input').attr('disabled', true);
      jQuery('#file_attach').hide();
      jQuery('#file_attach').find(':input').attr('disabled', true);
      jQuery('#cloud_attach').toggle();
    });
  });
</script>
<!-- /Script file-attachement -->

说明:

• ELEMENT.find(':input') 查找 ELEMENT 内的所有输入(textarea、input、select)
• ELEMENT.attr('disabled', true) 将属性 disabled="true" 设置为 ELEMENT

建议:

• 可能重构上面的代码以删除每个可点击操作的重复功能，尤其是现在有 .attr('disabled', true)
的附加代码