bugfix> javascript > 投稿

現在、次のようなフォームがあります。

<tr>
  <td>
   <%= f.hidden_field :_destroy %>
   <%= link_to "remove", '#', class: "remove_record"
</td>
    <td><%= f.date_field :date, as: :date, value: f.object.try(:strftime,"%m/%d/%Y"), class: 'form-control' %> </td>
    <td><%= f.text_field :description, label: false, class: 'form-control input'  %></td>
    <td><%= f.text_field :reference, label: false, class: 'form-control input'  %></td>
    <td>  <%= f.collection_select :bank_account_id, BankAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm" %></td>
    <td><%= f.collection_select :gl_account_id, GlAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm" %></td>
    <td><%= f.collection_select :vat_type, Transaction.vat_types.map{ |dp| [dp.first, dp.first.humanize] }, :first, :second,{:prompt => false},class:"btn btn-sm"  %></td>
    <td> <%= f.text_field :total_amount, class: 'form-control input'  %></td>
    <%  f.check_box :payment, :value => true %>
</table>

別の <td> を追加したい支払いの種類を選択するようユーザーに促す「削除」列の後:

<select> 
  <option value="regular">Regular</option>
  <option value="invoice">Invoice</option>
  </select>

これにより、行が変更されます。

<td><%= f.collection_select :gl_account_id, GlAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm" %></td>

そして、次のようになります。

<td><%= f.collection_select :purchase_id, Purchase.all, :id, :invoice_number, {:prompt => false},class:"btn btn-sm" %></td>

この方法-ユーザーは、新しいフォームにリダイレクトする必要なく、実行しているトランザクションのタイプを簡単に変更できます。これを達成する方法についてのアイデアはありますか?

回答 1 件
  • 1 => リンクの削除後にトランザクションタイプの選択オプションを追加します

    <%=select_tag "transaction_type", options_for_select([['regular', 'Regular'], ['invoice', 'Invoice']]), class: 'transaction_type'%>
    
    

    2 => トランザクションタイプの変更時に動的にトリガーされるselect_fieldに一意のIDを追加します

    <td><%= f.collection_select :gl_account_id, GlAccount.all, :id, :name, {:prompt => false},class:"btn btn-sm", id: 'gl_account' %></td> 
    <td><%= f.collection_select :vat_type, Transaction.vat_types.map{ |dp| [dp.first, dp.first.humanize] }, :first, :second,{:prompt => false},class:"btn btn-sm", id: "vat_type"  %></td>
    
    

    3 => Jqueryの使用

    <script>
      //by default hide both gl_account and vat_type select box
      $('#vat_type, #gl_account').hide();
      // on change transaction_type show/hide these select box
      $('.transaction_type').on('change', function(){
        var transaction_type_Val = $(this).val();
        if (transaction_type_Val == 'regular'){
          $('#gl_account').show();
          $('#vat_type').hide();
        }else{
          $('#gl_account').hide();
          $('#vat_type').show();
        }
      })
    </script>
    
    

あなたの答え