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

将卡号/邮件详细信息设置为 div style="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 回答
0

这对我有用 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 %>
于 2020-11-16T17:57:33.230 回答
0

由于@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>
于 2021-04-22T13:01:09.907 回答