使用javascript提交两个表单,一个不提交.不知道为什么？

Question

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

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

在我的故障单编辑视图中,我有要更新的故障单及其注释.票据形成其命名form1和评论表格被命名form2.如果我只使用form1我的javascript代码,它会完美更新,当我form2只添加form2更新时,所以只添加注释,Ticket Atributes(from form1)不会更新.

这是我的Ticket 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帖子,表单中的数据将发送到服务器.)

要绕过这个,你需要查看ajax调用.ajax调用是一种" 异步JavaScript和XML "调用,您可以通过javascript代码执行http请求,而不会中断其他任何操作.

Ajax在答案中有点内容,所以我将指向一些ajax文档和jQuery ajax文档.您可能还想浏览维基百科上的HTTP页面,以便更好地了解Web的工作原理.