javascript - 发送 AJAX 请求而不提交表单

Question

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

<%= 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 Controller ，该 Controller 又调用向用户发送短信的第三方方法，然后用户填写其代码并单击提交。

我的问题是，当用户单击 smsbtn 时，@booking 表单会被提交，并且我不想提交表单，除非用户单击“确认预订”，这是我的 jquery 工作的唯一方式，就是当我移动两者时电话字段和 smsbtn 外部表单。

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

Answer 1

您想要阻止#smsBtn提交表单，这可以通过不同的方式完成，其中之一是在点击时调用event.preventDefault()处理程序:

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