2016-10-03 33 views
0

ユーザーが予約情報を入力すると、コードを受け取ったフォームで自分の電話番号を確認し、送信前に残りの予約情報を入力する必要があるという考え方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の両方がフォーム外にあります。

フィールドの順序は、コードフィールドを最初に見つけてそのフィールドの下に電話フィールドを置かないようにするために重要です。

+0

通常、私はそれをヘルパーに引き出し、「他の」コントローラにヘルパーを含めさせます。 (ApplicationControllerのhelper()メソッドを見てください) –

+0

@Medo、私はあなたの質問のタイトルが実際の問題と一致するとは思わない。フォームを送信せずにAJAXリクエストをしたいだけです。 – Leito

+1

@Leitoあなたが正しいです、私は実際に欲しいものを反映するようにタイトルを変更しました – Medo

答えて

1

あなたはそれの一つがクリックハンドラにevent.preventDefault()を呼び出すことで、フォームの送信から#smsBtnないようにしたい、これは別の方法で行うことができます。あなたは、コントローラを共有したい場合は

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

悲しいことに、悲しいことに、まだフォームが提出されていません。 – Medo

+0

セットアップ全体を知らないうちに理由を伝えにくいです。あなたが探しているものをより良く知っていることを知っていると、「ボタンフォームからフォームを送信しないようにする」ことで、より良い回答を見つけることができるはずです。なぜあなたのために働いていないのかを理解したり、理解してくれるこの回答やその他の回答が見つかります。がんばろう – Leito

関連する問題