Rails表單在提交前獲取輸入值

Question

我有一個分爲3步的導軌形式，第一步是選擇日期，第二步是時間選擇和最後一步用戶信息。

這裏是表單代碼：

<%= form_for [@school, Meeting.new], html: { id: 'meeting_form' } do |f| %> 
    <!-- one step --> 
    <div class="step"> 
     <section class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
        <div class="input-group date" id="datetimepicker1"> 
        <%= f.text_field :date, class: 'form-control date_value', :required => true %> 
        <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
        </span> 
       </div> 
       </div> 
      </div> 
      </div> 
     </section> 
     <button type="button" class="btn btn-primary next-step" style="width: 100%;"> Suite </button> 
</div> 
<!-- end one step --> 
<!-- second step --> 
<div class="step"> 
    <section class="container"> 
     <div class="row"> 
      <div class='col-sm-6'> 
      <div class="form-group"> 
       <div class='input-group date' id='datetimepicker2'> 
       <%= f.hidden_field :mhour, required: true, class: "Vroomvroom-timepicker--value-js", :value => "" %> 
        <div class="scheduler--picker"> 
         <% for time in 8..20 %> 
          <% if time < 10 %> 
          <div class="scheduler--picker-line-item <% if @school.meeting_already_booked?("0#{time}:00") %>scheduler--picker-line-item--disabled <% end %>" data-value="0<%= time %>:00"> 
           <p>0<%= time %>:00</p> 
          </div> 
          <% else %> 
          <div class="scheduler--picker-line-item <% if @school.meeting_already_booked?("#{time}:00") %>scheduler--picker-line-item--disabled <% end %>" data-value="<%= time %>:00"> 
          <p><%= time %>:00</p> 
          </div> 
          <% end %> 
         <% end %> 
         </div> 
         </div> 
        </div> 
        </div> 
       </div> 
      </section> 
      <button type="button" class="btn btn-primary previous-step" style="width: 49%;"> Retour </button> 
      <button type="button" class="btn btn-primary next-step" style="width: 49%;"> Suite </button> 
     </div> 
    <!-- end second step --> 
    <!-- third step --> 
    <div class="step"> 
     <section class="container"> 
      <div class="row"> 
       <div class='col-sm-6' style="padding-left: 0;"> 
       <div class="form-group"> 
        <label for="name"> Nom </label> 
        <%= f.text_field :name, html: 'form-control', :required => true, placeholder: 'Votre nom de famille' %> 
       </div> 
       <div class="form-group"> 
        <label for="firstname"> Prénom </label> 
        <%= f.text_field :firstname, html: 'form-control', :required => true, placeholder: 'Votre prénom' %> 
       </div> 
       <div class="form-group"> 
        <label for="email"> Adresse email </label> 
        <%= f.email_field :email, html: 'form-control', :required => true, placeholder: 'Votre adresse mail, ex: jean.marc@gmail.com' %> 
       </div> 
       <div class="form-group"> 
       <label for="phone"> Numéro de téléphone</label> 
       <%= f.text_field :phone, html: 'form-control', :required => true, placeholder: 'Votre numéro de téléphone, ex: 0606060606', :maxlength => 14 %> 
       </div> 
       <div class="form-group"> 
       <label> Pour quel type de permis : </label> 
        <%= f.select :category do %> 
        <option value="code">Code uniquement</option> 
        <option value="moto">Permis A (moto)</option> 
        <option value="voiture">Permis B (voiture)</option> 
        <option value="am">Permis AM </option> 
       <option value="formation">Formations 125 cm3 </option> 
        <option value="autre">Une autre formation</option> 
        <% end %> 
       </div> 
       </div> 
      </div> 
     </section> 
     <button type="button" class="btn btn-primary previous-step" style="width: 49%;"> Retour </button> 
     <%= button_tag 'Envoyer', :type => :submit, :class => 'btn btn-primary end' %> 
    </div> 
    <!-- end thirs step --> 
    <% end %> 

的日期選擇器，我使用的自舉的DateTimePicker鋼軌，但我創造我自己的時間選擇器，用DIV和數據屬性的生成。在提交表單之前，我需要知道日期的值，以瞭解哪些小時已經在數據庫中被使用來禁用它們。

我已經創建模型學校的方法：

# meetings 
    def meeting_already_booked?(date, hour) 
    if Meeting.where(:date => date).where(:time => hour) 
     return true 
    else 
     return false 
    end 
    end 

而且我在這裏使用的方法：

<div class="scheduler--picker-line-item <% if @school.meeting_already_booked?("0#{time}:00") %>Vroomvroom-scheduler--picker-line-item--disabled <% end %>" data-value="0<%= time %>:00"> 

我有時間，但我需要的日期用戶選擇在我的數據庫中搜索如果這個小時已經被佔用的步驟。

Answer 1

最好的辦法是在本地保存的日期next點擊按鈕，像

$("#next_step_button").on("click", function(event) { 
    localStorage.setItem("date", $(#datetimepicker1).val()); 
}); 

爲了得到值回，

localStorage.getItem("date");