Question

当用户填写预订信息时，他需要在收到代码的表格中验证他的电话号码，并在提交前将其与剩余的预订信息一起使用，所以我有以下观点

<%= form_for(@booking) do |f| %>
    <%= current_or_not_authenticated_user.email %>
    <br>
    <%= f.label :patient_id %>
    <%= f.collection_select :patient_id, User.order(:created_at), :id, :email %>
    <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#patientModal">
      New Patient
    </button>
    <br>
    <div class="form-group">
      <%= f.label :type %>
      <%= f.select :booking_type, options_for_select([['Physiologist'], ['Psychiatrist'], ['Pediatrician']]) %>
      <%= f.hidden_field :customer_id, :value => current_or_not_authenticated_user.id %>
    </div>
    <div class="form-group">
      <%= f.label :address %>
      <%= f.collection_select :address_id, Address.where(user_id: current_or_not_authenticated_user.id), :id, :address1 %>
      <button type="button" class="btn btn-primary btn-md" data-toggle="modal" data-target="#addressModal">
        New Address
      </button>
      <% if current_user && !current_user[:verified_by_phone_at]   %>
          <div class="form-group">
            <%= label_tag(:phone) %>
            <%= text_field_tag(:phone) %>
            <button id="smsBtn" type="button" class="btn btn-primary">Send SMS</button>
          </div>
          <div class="form-group">
            <%= label_tag :code %>
            <%= text_field_tag :code %>
          </div>
      <% end %>
      <%= f.submit "Confirm Booking" %>
    </div>
    <br>
<% end %>


    <script>
      $(document).ready(function () {
        $('#smsBtn').on('click', function () {
          $.ajax({
            url: <%=phone_verification_index_path %>,
            type: 'ajax',
            data: $('#code').val()
          });

        });

      });

    </script>

点击smsbtn应该转到phone_verification控制器，而控制器又调用向用户发送短信的第三方方法，然后用户填写他的代码并点击提交。

我的问题是当用户点击smsbtn，@ booking表单被提交并且我不想形成提交，除非用户点击确认预订，我的jquery工作的唯一方式是，当我移动两个电话领域和smsbtn外形式。

字段的顺序很重要，因为我不希望用户首先找到代码字段，然后是电话字段。

Answer 1

您希望阻止 #smsBtn 提交表单，这可以通过不同的方式完成，其中一种方法是在点击处理程序上调用event.preventDefault()：

$('#smsBtn').on('click', function (event) {
  event.preventDefault()
  // ...
}

发送AJAX请求而不提交表单

1 个答案: