Блог

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

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

#javascript #jquery

#javascript #jquery

Вопрос:

Я хочу скрыть кнопку (внутри тега div с id = «next») до тех пор, пока не будут скомпилированы некоторые конкретные входные данные.

Это возможно с помощью jquery?

Вот мой код:

 <input id="name" type="text" name="name" />
<input type="text" name="phone" placeholder="Phone" />
<div id="next1">
    <input type="button" name="next" class="next action-button" value="Next" />
</div>

Я пробовал этот код jquery, но когда я скомпилировал ввод имени, кнопка далее не отображается!

 if(!$('input[name=name]').val()){
    $('#next1').hide();
}
else {
    $('#next1').show();
}

Что я могу сделать?

Спасибо

Ответ №1:

Для достижения этого вам необходимо проверять значение по мере ввода пользователем. Для этого вы можете запустить свой код в keyup обработчике событий. Это также можно упростить до простого использования toggle() метода. Попробуйте это:

 $('#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 id="name" type="text" name="name" />
<input type="text" name="phone" placeholder="Phone" />
<div id="next1">
  <input type="button" name="next" class="next action-button" value="Next" />
</div>

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

1. но что я могу сделать, если у меня есть два или более конкретных ввода, таких как «name»?

2. Затем используйте общий класс для них всех, а не id

3. я пытался использовать класс, но кнопка далее становится видимой при компиляции первого поля ввода и не для всех.

Ответ №2:

поместить

 $("input[name=name]").on("input",function(){

затем вы можете проверить входное значение с помощью 

 $(this).val()

Ответ №3:

Здравствуйте, Попробуйте приведенный ниже код, поскольку вы упомянули конкретный ввод, для которого я это сделал, если вы вводите Hello

кнопка будет видна или нет, надеюсь, это поможет…

  $(".fname").keyup(function (e) {
     if ($(this).val() == 'Hello') {
        $(".fname").not(this).attr('disabled', 'disabled');
        $(this).next(".test").show();
     } else {
        $(".fname").removeAttr('disabled');
        $(this).next(".test").hide();
     }
});  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" class="fname">
            <input type="button" class="test" name="test" value="Hello!" style="display: none">