Question

我有一个rails表单，分为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 %>

对于日期选择器，我使用bootstrap-datetimepicker作为rails，但是我创建了自己的时间选择器，使用div和data-attributes生成。我需要在提交表单之前获取日期值，以了解DB中已经使用了几个小时来禁用它们。

我在学校模型中创建了一个方法：

  # 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");

Rails表单在提交之前获取输入值

1 个答案: