Текстовые поля отображаются при нажатии кнопки переключателя в направляющих + javascript - PullRequest
Новая
       23

Текстовые поля отображаются при нажатии кнопки переключателя в направляющих + javascript

0 голосов
/ 01 мая 2020

Привет. Я пытаюсь, чтобы текстовые поля даты отображались при нажатии переключателя «custom», и исчезали при нажатии одного из двух других переключателей.

Итак, вот моя форма: 

//Default radio buttons
<%= radio_button_tag 'set_start', 14 %>
<%= label :set_start, 'Biweekly' %>
<%= radio_button_tag  'set_start', 30 %>
<%= label :set_start, 'Monthly' %>

<%= radio_button_tag 'set_start', 0, {:class => "rad_but"} %>
<%= label :set_start, 'Custom' %>

//Button that only appears when custom is clicked
<div id='dates'>
    <%= label :starting, 'Start date'%>
    <%= text_field_tag 'starting', placeholder="MM/DD/YYYY"%>   
    <br>
    <%= label :ending, 'End date' %>
    <%= text_field_tag 'ending', placeholder="MM/DD/YYYY" %>
</div>

А вот мой javascript (РЕДАКТИРОВАНИЕ): 

$(document).ready(function(){
    $('input[name="set_start"]').on('change', function(evt) {
   if (evt.target.value === "0") {
      console.log("hello");
      $('#dates').show();
   } else {
      console.log("world");
      $('#dates').hide();
   }
})

});

И мой HTML: 

<div class="form-inputs">



            <label for="set_start_Biweekly">Biweekly</label>
                <input type="radio" name="set_start" id="set_start_30" value="30">
            <label for="set_start_Monthly">Monthly</label>

                <input type="radio" name="set_start" id="set_start_0" value="0" checked="checked">
            <label for="set_start_Custom">Custom</label>

                <br>
            <br>

            <div id="dates">
              <label for="starting_Start date" class="active">Start date</label>
              <input type="text" name="starting" id="starting" value="MM/DD/YYYY">  
            <br>
              <label for="ending_End date" class="active">End date</label>
            <input type="text" name="ending" id="ending" value="MM/DD/YYYY">
            </div>


</div>

В настоящее время даты все еще отображаются, даже по умолчанию, и они также не меняются при кликах. Есть ли способ, которым я могу пройти мимо этого?

1 Ответ

0 голосов
/ 01 мая 2020

Предполагая, что ваш сгенерированный HTML выглядит следующим образом: 

<input type="radio" name="set_start" value="14"/>
<label>Biweekly</label>
<input type="radio" name="set_start" value="30"/>
<label>Monthly</label>
<input type="radio" name="set_start" value="0"/>
<label>Custom</label>

<div id="dates">
    <label>Start date</label>
    <input type='date' name='starting' placeholder='MM/DD/YYYY' />
    <br />
    <label>End date</label>
    <input type='date' name='ending' placeholder='MM/DD/YYYY' />
</div>

вы можете использовать следующий jquery фрагмент 

$('input[name="set_start"]').on('change', function(evt) {
   if (evt.target.value === "0") {
      $('#dates').show();
   } else {
      $('#dates').hide();
   }
})

JSFIDDLE DEMO

...