オーダーを作成するための3つのフォーム

Question

オーダーを満たすためのデータ収集は、3ページの表になります（ボタンを押すごとに表示されます）。最後のボタンを押した後にのみ必要なデータベースに格納されます。最初のページから最後のページにデータを保存する方法は？

1ページ

<%= form_for(@orders) do |f| %> 

    <%= f.text_field :city,placeholder: "city"%> 

    <%= f.submit "next", class: "btn" %> 
<% end %> 

2ページ。都市を選択した後、最初のページ上のデータベースへのリクエストを行い、（1ページを選択した）都市

<%= form_for(@orders) do |f| %> 

    <%= f.text_field :time, placeholder: "time" %> 

    <%= f.submit "next", class: "btn" %> 
<% end %> 

3ページを持っているオブジェクトを選択します。ここでは、第一及び第二のページで収集したデータを分析し、条件

<%= form_for(@orders) do |f| %> 
<%= f.text_field :trip, placeholder: "trip" %> 

    <%= f.text_field :count, placeholder: "numver" %> 

    <%= f.text_field :phone,placeholder: "phone"%> 

    <%= f.submit "Order", class: "btn" %> 
<% end %> 

そしてだけに一致するツアーを探して、今、3つのフォームを完了した後、我々が持っている分野で満たされ、データベース内のオブジェクトを作成する必要がありますこれらの3つのフォームすべてで定義されています

変数やハッシュをフォームからフォームに保存して送信できますか？

Answer 1

単一の複数ステップフォームを作成してから、すべてのステップが完了した後で1回だけフォームをサーバーに送信してみてください。

$(document).ready(function() { 
 
    var navListItems = $('div.setup-panel div a'), 
 
      allWells = $('.setup-content'), 
 
      allNextBtn = $('.nextBtn'); 
 

 
    allWells.hide(); 
 

 
    navListItems.click(function (e) { 
 
     e.preventDefault(); 
 
     var $target = $($(this).attr('href')), 
 
       $item = $(this); 
 

 
     if (!$item.hasClass('disabled')) { 
 
      navListItems.removeClass('btn-primary').addClass('btn-default'); 
 
      $item.addClass('btn-primary'); 
 
      allWells.hide(); 
 
      $target.show(); 
 
      $target.find('input:eq(0)').focus(); 
 
     } 
 
    }); 
 

 
    allNextBtn.click(function(){ 
 
     var curStep = $(this).closest(".setup-content"), 
 
      curStepBtn = curStep.attr("id"), 
 
      nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), 
 
      curInputs = curStep.find("input[type='text'],input[type='url']"), 
 
      isValid = true; 
 

 
     $(".form-group").removeClass("has-error"); 
 
     for(var i=0; i<curInputs.length; i++){ 
 
      if (!curInputs[i].validity.valid){ 
 
       isValid = false; 
 
       $(curInputs[i]).closest(".form-group").addClass("has-error"); 
 
      } 
 
     } 
 

 
     if (isValid) 
 
      nextStepWizard.removeAttr('disabled').trigger('click'); 
 
    }); 
 

 
    $('div.setup-panel div a.btn-primary').trigger('click'); 
 
}); 
 

body { 
 
    margin-top:40px; 
 
} 
 
.stepwizard-step p { 
 
    margin-top: 10px; 
 
} 
 
.stepwizard-row { 
 
    display: table-row; 
 
} 
 
.stepwizard { 
 
    display: table; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.stepwizard-step button[disabled] { 
 
    opacity: 1 !important; 
 
    filter: alpha(opacity=100) !important; 
 
} 
 
.stepwizard-row:before { 
 
    top: 14px; 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: " "; 
 
    width: 100%; 
 
    height: 1px; 
 
    background-color: #ccc; 
 
    z-order: 0; 
 
} 
 
.stepwizard-step { 
 
    display: table-cell; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.btn-circle { 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    padding: 6px 0; 
 
    font-size: 12px; 
 
    line-height: 1.428571429; 
 
    border-radius: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class="container"> 
 
    
 
<div class="stepwizard col-md-offset-3"> 
 
    <div class="stepwizard-row setup-panel"> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> 
 
     <p>Step 1</p> 
 
     </div> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> 
 
     <p>Step 2</p> 
 
     </div> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> 
 
     <p>Step 3</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <form role="form" action="" method="post"> 
 
    <div class="row setup-content" id="step-1"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 1</h3> 
 
      <div class="form-group"> 
 
      <label class="control-label">First Name</label> 
 
      <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Last Name</label> 
 
      <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Address</label> 
 
      <textarea required="required" class="form-control" placeholder="Enter your address" ></textarea> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-2"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 2</h3> 
 
      <div class="form-group"> 
 
      <label class="control-label">Company Name</label> 
 
      <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Company Address</label> 
 
      <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-3"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 3</h3> 
 
      <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
    
 
</div>

完全な詳細については、このフィドルを参照してください。 https://jsfiddle.net/kv23y6b4/