simple_formのヒントを制御します。

Question

simple_formの入力ボックスにヒントを表示します。ユニット "area_unit"の選択が変更されている間、ヒントも変更され、area_unitは平方メートルと平方フィートを選択できます。 例：area_unitがsq.mを選択すると、surface_areaは現在の値area_unitをsq.mとして表示し、ヒントはarea_unitをsq.feetとして表示します。逆に。

スリムコード：

.col-md-3.col-xs-6 
= f.input :surface_area, label: "Surface Area" ,hint:"" 
.col-md-3.col-xs-6 
= f.input :area_unit, collection: Property::AREA_UNIT_NAMES.map(&:reverse), include_blank: false 
/(in \u33A1) 

area_unitが変化し、値surface_areaはあまりにも変化します。

switchUnit: -> 
    $(document).on 'change', '#property_area_unit', -> 
     areaInput = $('#property_surface_area') 
     if $(this).val() == 'sq_m' 
     area = Math.round(parseFloat(areaInput.val())*0.0929*100)/100 
     else 
     area = Math.round(parseFloat(areaInput.val())*10.7639*100)/100 
     areaInput.val(area) 

しかし、どのようにヒントを設定するのですか？

Answer 1

また、Javascriptを使用する必要があります。原則として、それをchangeイベントに追加するだけです。デフォルトのsimple_formフォームビルダを使用する場合は、ヒント・フィールドは、入力フィールド自体隣<span>として描画するか、ページのソースを開くときに、次のような表示されるはずです。すなわち：

<div class="input string optional property_surface_area field_with_hint"> 
    <label class="string optional" for="property_surface_area">Surface Area</label> 
    <input class="string optional" type="text" value="" name="property[surface_area]" id="property_surface_area" /> 
    <span class="hint"></span> 
</div> 

を

したがって、単位選択のchangeイベントのヒントspanの値を更新することです。上記のコードが戻って他のユニット（あなたにもおそらくproperty_surface_area入力から元の値を使用することができますが、再計算でも、それを丸め）とセットにエリアを再計算

switchUnit: -> 
    $(document).on 'change', '#property_area_unit', -> 
    areaInput = $('#property_surface_area') 
    areaHint = $('.property_area_unit span.hint') 
    if $(this).val() == 'sq_m' 
     area = Math.round(parseFloat(areaInput.val()) * 0.0929 * 100)/100 
     areaInOtherUnits = Math.round(area * 10.7639 * 100)/100 
    else 
     area = Math.round(parseFloat(areaInput.val()) * 10.7639 * 100)/100 
     areaInOtherUnits = Math.round(area * 0.0929 * 100)/100 
    areaInput.val(area) 
    areaHint.html('= ' + areaInOtherUnits + ($(this).val() == 'sq_m' ? ' sq feet' : ' sq m')) 

：次のコードは、ことを行います他のユニットを含め、この値にコンテンツをヒントします。ヒントのセレクタは、 "フォームライン全体のラッピングdiv→ヒント 'クラスのスパンです。