无法让 Ajax 提交两个表单（第二个取决于第一个的成功） - 在一个页面上

Question

我正在尝试使用 Ajax 提交两个表单，一个接一个，这样在第一个表单成功提交并向 API 发出请求后，第二个表单发出不同的请求。

第二种形式应该只在第一种形式成功时触发。

我使用的是 Rails 4.2，但我在一页上提供了两种表单的渲染 html，如下所示：

<!-- FORM 1 -->

<form action="/reservations/new" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />


  <div class="field">
    <input type="text" name="partner_code" id="partner_code" value="DEV-DAN-BETH:73411" />
  </div>  
  <div class="field">    
   <input type="text" name="restaurant_location_id" id="restaurant_location_id" value="10799" />
  </div>
  <div class="field">    
    <input type="text" name="session_id" id="session_id" value="DINNER" />
  </div>

  <div class="field">    
    <br>
    <input type="text" name="dining_date_and_time" id="dining_date_and_time" value="2015-07-29T18:00:00+00:00" />
  </div>

   <div class="field">    
    <br>
    <input type="text" name="dateSubmit" id="dateSubmit" />
  </div>

   <div class="field">    
    <br>
    <input type="text" name="timeSubmit" id="timeSubmit" />
  </div>

  <div class="field">    
    <label for="size">Guests</label><br>
    <input type="text" name="size" id="size" value="2" />
  </div>

  <div class="field">
    <br>
    <input type="text" name="first_name" id="first_name" value="Daniel" />
  </div>
  <div class="field">
    <br>
    <input type="text" name="last_name" id="last_name" value="Easterman" />
  </div>  
  <div class="field">
    <label for="email">Email</label><br>
    <input type="text" name="bookEmail" id="bookEmail" />
  </div> 

  <div class="actions">
    <input type="submit" value="Continue" id="bookSubmit" />
  </div>
</form>

<!-- FORM 2 -->

  <form action="/reservations/new" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />
  <div class="field">
    <input type="text" name="reservationId" id="reservationId" value="35347855" />        
  </div> 
</form>


</body>
</html>

以下是迄今为止我尝试过的 Ajax 代码。由于我设置 Rails 的方式，我无法设置表单的 ID，因此我认为可以通过指定输入值来区分两种表单，而不是使用序列化。 （我知道这根本不是 DRY，但我对 Ajax 的经验有限，所以我认为这可能是唯一的方法。

$('form').on('submit', function(event) {
  event.preventDefault();
  $.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    data: {"partner_code": $("#partner_code").val(),
            "restaurant_location_id": $("#restaurant_location_id").val(),
            "session_id": $("#session_id").val(),
            "dining_date_and_time": $("#dining_date_and_time").val(),
            "size": $("#size").val(),
            "first_name": $("#first_name").val(),
            "last_name": $("#last_name").val(),
            "bookEmail": $("#bookEmail").val() }
    success: function() {
      // submit second form
      $('form').submit();
        data: { "reservationId": $("#reservationId").val() }
    }
  });
});

在 Rails 文档中，它说您唯一需要做的就是在表单中将 remote 设置为 true 以使 Ajax 工作（这会在 HTML 中呈现 data-remote="true"）。另外，我已经读到阻止默认值是阻止表单正常行为的关键，但在这种情况下，它会阻止表单提交。

我发现这是我研究中最相关的答案：Two forms one submit - Submit, delay, submit 并以此为基础编写了我的代码，但 Chrome 控制台和（Sublime 插件）一直告诉我我的 Javascript 中存在语法错误尝试（但失败）调试。

Answer 1

问题在于您的第一个表单标签有data-remote=true。这就是为什么它不调用 ajax 函数并使用 ujs 提交的原因。所以先改变它。此外，您应该为每个表单设置 id，因此请尝试如下更改表单：

<!-- FORM 1 -->

<form id="form1" action="/reservations/new" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" />


  <div class="field">
    <input type="text" name="partner_code" id="partner_code" value="DEV-DAN-BETH:73411" />
  </div>  
  <div class="field">    
   <input type="text" name="restaurant_location_id" id="restaurant_location_id" value="10799" />
  </div>
  <div class="field">    
    <input type="text" name="session_id" id="session_id" value="DINNER" />
  </div>

  <div class="field">    
    <br>
    <input type="text" name="dining_date_and_time" id="dining_date_and_time" value="2015-07-29T18:00:00+00:00" />
  </div>

   <div class="field">    
    <br>
    <input type="text" name="dateSubmit" id="dateSubmit" />
  </div>

   <div class="field">    
    <br>
    <input type="text" name="timeSubmit" id="timeSubmit" />
  </div>

  <div class="field">    
    <label for="size">Guests</label><br>
    <input type="text" name="size" id="size" value="2" />
  </div>

  <div class="field">
    <br>
    <input type="text" name="first_name" id="first_name" value="Daniel" />
  </div>
  <div class="field">
    <br>
    <input type="text" name="last_name" id="last_name" value="Easterman" />
  </div>  
  <div class="field">
    <label for="email">Email</label><br>
    <input type="text" name="bookEmail" id="bookEmail" />
  </div> 

  <div class="actions">
    <input type="submit" value="Continue" id="bookSubmit" />
  </div>
</form>

<!-- FORM 2 -->

  <form id="form2" action="/reservations/new" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="&#x2713;" />
  <div class="field">
    <input type="text" name="reservationId" id="reservationId" value="35347855" />        
  </div> 
</form>

并尝试改变js如下：

$('#form1').on('submit', function(event) {
  event.preventDefault();
  $.ajax({
    url: $(this).attr('action'),
    type: 'POST',
    data: {"partner_code": $("#partner_code").val(),
            "restaurant_location_id": $("#restaurant_location_id").val(),
            "session_id": $("#session_id").val(),
            "dining_date_and_time": $("#dining_date_and_time").val(),
            "size": $("#size").val(),
            "first_name": $("#first_name").val(),
            "last_name": $("#last_name").val(),
            "bookEmail": $("#bookEmail").val() }
    success: function() {
      // submit second form
      $('form2').submit();
    }
  });
});