ユーザーが予約情報を入力すると、コードを受け取ったフォームで自分の電話番号を確認し、送信前に残りの予約情報を入力する必要があるという考え方smsbtn上の次のビューフォームを提出しないでAJAXリクエストを送信する
<%= 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>
クリックすると、ユーザーにSMSを送信ターンコールサードパーティの方法では、ユーザが自分のコードを記入し、提出をクリックしphone_verificationコントローラに行く必要があります。
私の問題は、ユーザーがsmsbtnをクリックしたときに、@予約書式が提出され、私のjqueryが働いていた唯一の方法である、予約予約をクリックしない限り送信したくないということです。 phoneフィールドとsmsbtnの両方がフォーム外にあります。
フィールドの順序は、コードフィールドを最初に見つけてそのフィールドの下に電話フィールドを置かないようにするために重要です。
通常、私はそれをヘルパーに引き出し、「他の」コントローラにヘルパーを含めさせます。 (ApplicationControllerのhelper()メソッドを見てください) –
@Medo、私はあなたの質問のタイトルが実際の問題と一致するとは思わない。フォームを送信せずにAJAXリクエストをしたいだけです。 – Leito
@Leitoあなたが正しいです、私は実際に欲しいものを反映するようにタイトルを変更しました – Medo