3

クレジットカードでサービスを支払うかどうかをユーザーに尋ねる必要があります... オプション pay_with_card をチェックした場合は? カード番号、メールなどの他のデータを要求するフォームの残りの部分を表示する必要があります。ユーザーがチェックしない場合は、メッセージを表示する必要があります。質問は...どうすればこれを行うことができますか? 前もって感謝します

<%= form_for(@product) do |f| %>
  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div>
    <%= f.label :card_number %> <%= f.text_field :card_number %>
  </div>  
  <div>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>
<% end %>
4

7 に答える 7

11

カード番号/メールの詳細をdivstyle= "display：none;"にしてから、チェックボックスにJavaScriptを追加してdisplay：block;に変更します。

このようなもの：

<%= form_for(@product) do |f| %>
  <%= f.label :pay_with_card? %>
  <%= f.check_box :pay_with_card,{}, "Yes", "No"%>
  <div id="card_details" style="display:none;">
    <%= f.label :card_number %> <%= f.text_field :card_number %>
    <%= f.label :mail %> <%= f.text_field :mail %>
  </div>
<% end %>
<script type="text/javascript">
  var checkbox = document.getElementById('product_pay_with_card');
  var details_div = document.getElementById('card_details');
  checkbox.onchange = function() {
     if(this.checked) {
       details_div.style['display'] = 'block';
     } else {
       details_div.style['display'] = 'none';
     }
  };
</script>
于 2012-04-25T19:43:12.750 に答える
9

jQueryを使ってみてはどうでしょうか?

まず、クラスcredit_card_fieldsを使用してクレジット カード フィールドを div でラップし、次のJS コードをページに追加します。

$("input[type='checkbox']#pay_with_card").on('change', function(){
  $('.credit_card_fields').toggle();
});
于 2012-04-25T19:47:47.377 に答える
1

JS を使用するか、次のように pay_with_card をフォームから移動できます。

<%= link_to 'pay with card', your_current_path(:pay_with_card => 1) %>
<%= form_for(...) do |f| %>
  <% if params[:pay_with_card] %>
    <%= # fields for card %>
  <% end %> 
<% end %>
于 2012-04-25T19:40:30.480 に答える
1

たとえば、次のようにjQueryを使用して実行できます。

$ ->
  $('select#pay_with_card').change ->
    if $(this).val() == 'yes'
      $('.card_block').slideDown('fast')
    else
      $('.card_block').slideUp('fast')

支払いカードを含むフォームの一部が .card_block クラスの div に含まれていることを前提としています

于 2012-04-25T19:44:12.967 に答える
0

わかりました私の解決策は次のとおりです。ユーザーがpay_with_cardをチェックすると、ビュー内のすべてのコード...（miコードはスペイン語です）完全なフォームが表示されます...チェックされていない場合は何も表示されず、同じチェックボックスだけです支払いを求めています...みんなありがとう。

function mostrar (){
var checkbox = document.getElementById('chk_tarjeta');
if (checkbox.checked)
document.getElementById("card_details").style.display = "block";
else
document.getElementById("card_details").style.display = "none";
</script>

<h1>Forma de Pago</h1>
<%= form_for(@product) do |f| %>
<div id="product_pay_with_card">
<div >
<%= f.label :paga_con_tarjeta? %></br>
<%= f.check_box :paga_con_tarjeta, :id => "chk_tarjeta", :onclick => "mostrar();" %>
<div>
</div>
</div>
<div id="card_details" >
<div>
<%= f.label :numero_de_tarjeta %></br>
<%= f.text_field :numerotarjeta %>
</div>
<div>
<%= f.label :codigo_de_seguridad %></br>
<%= f.text_field :codigoseguridad %>
</div>
于 2012-04-27T15:59:43.413 に答える