Question

我需要问我的用户是否会使用信用卡支付服务...如果选中了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 %>

Answer 1

制作卡号/邮件详情div style =“display：none;”，然后在复选框中添加一些javascript以将其更改为显示：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>

Answer 2

如何使用jQuery？

首先，将您的信用卡字段打包到一个包含 credit_card_fields 类的div中，然后将此JS代码添加到您的页面中：

$("input[type='checkbox']#pay_with_card").on('change', function(){
  $('.credit_card_fields').toggle();
});

Answer 3

您可以使用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 %>

Answer 4

你可以通过jQuery来实现，例如：

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

假设带有支付卡的表单部分包含在带.card_block类

的div中

Answer 5

好的我的解决方案就是：视图中的所有代码，如果用户检查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>

Answer 6

这对我有用form_with模型和引导程序
更改 my_hidden_form ，使其ID对您的表单有意义。
原始代码是haml

= form_with scope: :model, url: models_path, local: true do |form|
            .row
              .col-6
                .form-group
                  %h5.mb0 THE CASE TO TICK
                  = form.check_box :form_value, {:data => {:aria => {controls: :my_hidden_form, expanded: false}, :toggle => "collapse", :type => "checkbox", :target => "#my_hidden_form" }}

            .row
              .col-6
                .form-group.collapse#my_hidden_form
                  %h5.mb0 THE FORM TO SHOW WHEN CASE IS TICKED
                  = form.text_field :name, placeholder: "A name"

            .row
              .col-md-12.text-right
                = form.submit 'Submit', class: "btn btn-primary"

已通过https://haml2erb.org/转换为erb / html

<%= form_with scope: :model, url: models_path, local: true do |form| %>
<div class="row">
  <div class="col-6">
    <div class="form-group">
      <h5 class="mb0">THE CASE TO TICK
        <%= form.check_box :form_value, {:data => {:aria => {controls: :my_hidden_form, expanded: false}, :toggle => "collapse", :type => "checkbox", :target => "#my_hidden_form" }} %>
      </h5>
    </div>
  </div>
</div>
  <div class="row">
    <div class="col-6">
      <div class="form-group collapse" id="my_hidden_form">
        <h5 class="mb0">THE FORM TO SHOW WHEN CASE IS TICKED
          <%= form.text_field :name, placeholder: "A name"  %>
        </h5>
      </div>
    </div>
  </div>
<div class="row">
  <div class="col-md-12 text-right">
    <%= form.submit 'Submit', class: "btn btn-primary" %>
    </div>
  </div>
<% end %>

Answer 7

由于@Unixmonkey 建议的方法对我不起作用，这里是我使用事件侦听器组合在一起的细微变化。

<script type="text/javascript">
const checkbox = document.getElementById('product_pay_with_card');
const details_div = document.getElementById('card_details');

checkbox.addEventListener("change", (event) => {
  if (event.currentTarget.checked) {
    details_div.style['display'] = 'block';
  }
  else {
    details_div.style['display'] = 'none';
  }
});
</script>

如果在轨道上的ruby中选中了复选框，则显示表单的其余部分

7 个答案: