Блог

Главная - Вопросы по программированию - Показывать кнопку при компиляции текста типа ввода, флажка, радио и тега выбора

Показывать кнопку при компиляции текста типа ввода, флажка, радио и тега выбора

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Мне очень помогло это сообщество добиться отображения кнопки «далее» при компиляции какого-либо тега ввода. Я использовал этот код:

 $('.name').keyup(function() {
    $('#next1').toggle(this.value != '');
});

#next1 {
    display: none;
}

Но как я могу это изменить, если на моей странице более сложный?

Например, здесь у меня есть некоторый флажок, радиовход и тег выбора.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input class="name" type="text" name="name" />
    <input type="text" name="phone" placeholder="Phone" />
    <label class="radio-inline"><input type="radio" name="internet" value='Y'>Y</label>
    <label class="radio-inline"><input type="radio" name="internet" value='N'>N</label>
    <label for="degree">Degree</label><br/>
        <input type="checkbox" name="degree" value="degree"> Degree
<select id='city' name='city' title='City' class='required1Sel form-control' >
    <option value=''></option>
    <option value='1'>NY</option>
    <option value='2'>LA</option>
    <option value='3'>MIAMI</option>
</select>
    <div id="next1">
      <input type="button" name="next" class="next action-button" value="Next" />
    </div>

Комментарии:

1. итак, вы хотите, чтобы следующая кнопка была видна, только если все элементы управления имеют значения … верно??

2. только если все элементы управления имеют значения, кроме «phone». у меня есть больше полей, но не все обязательны.

Ответ №1:

Для выбора или флажка вы можете использовать функцию change().

 $('#city').change(function() {
    $('#next1').toggle(this.value != '');
});

Смотрите этот JSFiddle: https://jsfiddle.net/fpwo8e7e/1

Комментарии:

1. это работает, но если у меня больше тегов выбора и я использую класс (required1Sel, как в примере), он показывает мне кнопку next, в то время как я скомпилировал только один из них. я пробовал использовать этот код $ (‘.required1Sel’).each(функция() { $(‘.required1Sel’).change(функция() { $(‘#next’).переключить(это.значение != «); }); });

2. Вам нужно поставить «флаги» для каждого ввода. onchange( var changed1 = true). Если (изменено 1 и изменено 2 и изменено 3 …), то showbutton . Или, может быть, вы можете проверить, не равны ли значения ‘ ‘