Отправить запрос AJAX без предоставления формы

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 отправляется, и я не хочу формировать submit, если пользователь не нажимает кнопку «Подтверждение бронирования», единственный способ, которым работал мой jquery, был, когда я переехал оба поля телефона и smsbtn вне формы.

порядок полей важен, потому что я не хочу, чтобы пользователь сначала находил поле кода, а затем поле телефона под ним.

Answer 1

Вы хотите, чтобы предотвратить #smsBtn от отправки формы, это может быть сделано разными способами, один из этого является вызов event.preventDefault() на обработчик щелчка:

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