Rails Forms: изменить поля формы из ранее выбранных полей

Question

Rails Forms: изменить поля формы из ранее выбранных полей

0

У меня есть два поля simple_form:

<%= f.input :ration_card ,as: :radio_buttons,collection: ["Yes","No"], input_html: {id: "rationcard"} %>
<%= f.input :rationcardNum , label: "Ration Card No." ,input_html: {id: "rationcard_no"} %>

Я хочу показать второе поле, только если пользователь выбирает "Да" для первого поля. Мой JQuery:

$(function(){
    $("#rationcard").change(function(){
        if ($("#rationcard").val()=="Yes"){
            $("#rationcard_no").show();
        } else {
            $("#rationcard_no").hide();
        }
    })
})

Я вижу, что файл js включен в начало страницы.

сгенерированный HTML:

<div class="control-group radio_buttons optional family_ration_card">
 <label class="radio_buttons optional control-label" for="rationcard">Ration card</label>
  <div class="controls">
   <label class="radio">
    <input id="rationcard" class="radio_buttons optional" type="radio" value="Yes" name="family[ration_card]" checked="checked">
Yes
   </label>
  <label class="radio">
   <input id="rationcard" class="radio_buttons optional" type="radio" value="No" name="family[ration_card]">
No
  </label>
 </div>
</div>  

<div class="control-group string optional family_rationcardNum">
 <label class="string optional control-label" for="rationcard_no">Ration Card No.</label>
  <div class="controls">
   <input id="rationcard_no" class="string optional" type="text" value="DGFR12" size="50" name="family[rationcardNum]">
  </div>
</div>

Но динамические поля не работают. Что здесь не так?

Или предложите лучший способ достичь этого.

mrudult 23 сен. 2013, в 17:11

Источник

Теги:

javascript

jquery

ruby-on-rails

dynamicform

simple-form

1 ответ

Ещё вопросы

BroiSatse · Accepted Answer · 2013-09-23T12-02-00.000Z

1

Лучший ответ

В первую очередь вы не можете поместить идентификатор на входы, потому что в итоге вы получите два входа с одинаковыми, и jQuery найдет только первый. Во-вторых, вам нужно использовать $ (this) внутри вашего обработчика.

Вам нужна строка в строке:

<%= f.input :ration_card ,as: :radio_buttons,collection: ["Yes","No"], wrapper_html: {id: "rationcard"} %>
<%= f.input :rationcardNum , label: "Ration Card No." ,wrapper_html: {id: "rationcard_no"} %>

$(function(){
    var toggle_rationcardNum = function(visible) {
        if (visible){
            $("#rationcard_no").show();
        } else {
            $("#rationcard_no").hide();
        }
    }

    $("#rationcard input").change(function(){
        toggle_rationcardNum($(this).val()=="Yes")
    })

    toggle_rationcardNum($("#rationcard input:checked").val()=="Yes")
})();

BroiSatse 23 сен. 2013, в 12:02

0

Это нормально работает, но скрывает только входные данные второго поля, а не метку. Добавлен wrapper_html в оба поля. Также я хотел бы знать, что это за wrapper_html ?
mrudult 23 сен. 2013, в 15:06
2

input_html - это все html-параметры, которые будут размещены на входах, wrapper_html - это html-параметр на wrapper - div, в который помещаются эти входные данные.
BroiSatse 23 сен. 2013, в 15:09
0

Ну, это не работает для флажков. :( Также он не применяется автоматически при загрузке страницы. Работает только при нажатии вручную
mrudult 23 сен. 2013, в 16:17
0

Ну, если вы хотите, чтобы это работало под нагрузкой, вам нужно выполнить обработчик под нагрузкой. Я обновлю ответ. Не могли бы вы объяснить, что вы подразумеваете под «не работает на флажки»?
BroiSatse 23 сен. 2013, в 16:24
0

Это не работает, если у меня есть поле флажка и другое поле, которое активируется после того, как флажок «установлен»
mrudult 23 сен. 2013, в 16:27
0

Почему window.load не работает с функцией jquery? Я изменил функцию на $(window).load(function() {}); Но бесполезно.
mrudult 23 сен. 2013, в 16:35
0

Для флажков вам нужно немного изменить обработчик, чтобы условия были выполнены, однако в этом вопросе вы спрашивали о переключателях, и я не буду обновлять ответ, чтобы разобраться и с этим делом. Пожалуйста, сделайте отдельный вопрос для тех. Что вы ожидали получить, изменив это на window.load?
BroiSatse 23 сен. 2013, в 16:40
0

что JavaScript должен быть загружен при загрузке окна. Я даже попробовал document.ready для того же самого. Извините, но я новичок в JS.
mrudult 23 сен. 2013, в 16:41
0

@BroiSatse Ну, это не работает, когда у вас есть итеративные формы. (как вложенные формы для 2-3 человек, которые принадлежат семье). Вышеупомянутое решение работает только для первого лица.
user2675010 24 сен. 2013, в 08:30
0

Опять же, это потому, что вы не можете иметь два html-элемента с одинаковым идентификатором. Если вы хотите работать с несколькими людьми, вы, скорее всего, захотите обернуть каждого пользователя в некоторый div и использовать классы вместо идентификаторов для упаковщиков входных данных. Затем вам нужно переписать логику, чтобы она показывала div с данными за заданным классом в некотором родительском div.
BroiSatse 24 сен. 2013, в 10:15

Показать ещё 8 комментариев