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();
    }
  });
});

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

1 个答案: