javascript - 使用 javascript 提交两份表单，一份提交，一份不提交。不明白为什么？

Question

我将其作为我的票证模型的 Javascript 代码。

$(document).ready(function() {
 $('#submitForm').click(function(e) {
   $('#form1').submit();
   $('#form2').submit();
 });
});

在我的工单编辑 View 中，我有工单及其评论需要更新。票证表单名为 form1，评论表单名为 form2。如果我的 javascript 代码上只有 form1 ，它会完美更新，当我添加 form2 时，只有 form2 更新，因此只添加注释，票证属性(来自 form1)未更新。

这是我的工单 View 代码(实际上是我在编辑 View 上加载的部分代码”)

<%= form_for @ticket, :html => { :class => 'form-horizontal', :id => 'form1' } do |f| %>
  <div class="control-group">
    <%= f.label :subject, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :subject, :class => 'text_field' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :content, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_area :content, :class => 'text_area' ,:style => 'height:190px; width:655px', disabled: true %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label "Assigne", :class => 'control-label' %>
    <div class="controls">
      <%= f.collection_select(:user_id,  User.all, :id, :email) %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :department_id, :class => 'control-label' %>
    <div class="controls">
      <%= f.collection_select(:department_id,  Department.all, :id, :name) %>
  </div>
  </div>
  <div class="control-group">
    <%= f.label :status, :class => 'control-label' %>
    <div class="controls">
      <%= f.select :status, options_for_select(["Open", "In Progress", "Waiting-for-Info", "Closed"]), :class => 'from-control' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :priority, :class => 'control-label' %>
    <div class="controls">
      <%= f.select :priority, options_for_select([ "Normal", "High", "Immediate", "Low"]), :class => 'from-control' %>
    </div>
  </div>
  <div class="control-group">
    <%= f.label :due_date, :class => 'control-label' %>
    <div class="controls">
      <%= f.date_select :due_date, :class => 'date_select' %>
    </div>
  </div>
<% end %>
<h4>Comments</h4>
  <div id="comments">
    <%= render :partial => @ticket.comments %>
  </div>
    <%= form_for [@ticket, Comment.new], :html => { :class => 'form-horizontal', :id => 'form2' }  do |f| %>
    <p>
      <%= f.text_area :content, :class => 'text_area' ,:style => 'height:75px; width:600px' %></p></br>

    <% end %>
<%= submit_tag nil, :class => 'btn btn-primary', :id => 'submitForm' %>

我做错了什么吗？

Answer 1

当您调用$('#form1').submit();时，页面会执行http请求。这意味着页面停止执行其 javascript 并开始执行与所述 http 请求相关的操作。 (通常这将是发送到表单目标的 http post，其中表单中的数据被发送到服务器。)

要绕过这个问题，您需要研究 ajax 调用。 ajax 调用是“异步 JavaScript 和 XML”调用，您可以通过 JavaScript 代码执行 http 请求，而无需中断任何其他操作。

Ajax 的答案有点多，所以我会向您指出一些 ajax documentation ，以及 jQuery ajax documentation 。您可能还想浏览一下 HTTP page on wikipedia只是为了更好地了解网络的工作原理。