用javascript提交两个表单，一个提交一个不提交。想不通为什么？答案

【问题标题】：Submitting two forms with javascript, one submits one not. Cant figure out why?用javascript提交两个表单，一个提交一个不提交。想不通为什么？
【发布时间】：2014-08-07 13:12:58
【问题描述】：

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

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

在我的工单编辑视图中，我有工单和它的 cmets 都需要更新。票务表名为form1，评论表名为form2。如果我的 javascript 代码中只有form1，它会完美更新，当我添加form2 时，只有form2 更新，所以只有评论被添加，票证属性（来自form1）不会被更新。

这是我的票务视图代码（它实际上是我在编辑视图上加载的部分代码）

<%= 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' %>

我做错了吗？

【问题讨论】：

当您提交一个表单时，页面开始加载表单的“目标”。这意味着第二个表单不能再“做”任何事情，因为浏览器正在加载一个新页面。
我谦虚地建议您需要接受对您的问题的 SO 答案。
您有多种选择。使用$var data = ('#form1, #form2').serialize() 加入两者并将其作为单个操作发送，或者您为每个表单执行所需操作的 ajax 请求，通过绑定到单个提交事件或仅使用一个手动处理响应（如果有）单个按钮作为触发器。还有其他方法，但我建议查看jQuery.ajax()

标签： javascript ruby-on-rails ruby ruby-on-rails-3 forms

【解决方案1】：

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

要绕过这一点，您需要查看 ajax 调用。 ajax 调用是一种“异步 JavaScript 和 XML”调用，您可以通过您的 javascript 代码执行 http 请求，而不会中断其他任何事情。

Ajax 在回答中涉及的内容有点多，所以我将向您指出一些 ajax documentation 和 jQuery ajax documentation。您可能还想看看HTTP page on wikipedia，以便更好地了解网络的工作原理。

【讨论】：