0

Есть два input. Если они пустые, то кнопка имеет параметр disabled. Если не пустые, то кнопка enabled.

<input type="text" name="fio" class="order_input" id="top_form_fio" onblur='checkParams()'/>
<input type="text" name="phone" class="order_input" id="top_form_phone" onblur='checkParams()'/>
<input type="submit" name="button" value="Отправить"/>

Сначала начал делать через событие onblur, но оно срабатывает, если фокус снят с input'ов, а у меня может и не быть такого.

Мой текущий вариант:

function checkParams() {
    var top_form_fio = $('#top_form_fio').val();
    var top_form_phone = $('#top_form_fio').val();
    if ((top_form_fio.length == 0) && (top_form_phone.length=0)) {
        //$('#bad_fio').fadeIn("slow"); 
        $('#top_form_button').attr('disabled', 'disabled')
    }
    else {
        $('#top_form_button').removeAttr('disabled');
        //$('#bad_fio').fadeOut("slow");    
    }
}

Но работает неправильно. Как выйти из этой ситуации?

2 ответа 2

1

Нельзя использовать атрибуты для свойств!

$(function() {
  $("form").on('change input paste', 'input', function(e) {
    $("#submit").prop('disabled', !$("#name").val() || !$("#phone").val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type=text id=name name=name>
  <input type=text id=phone name=phone>
  <input type=submit id=submit value=Submit disabled>
</form>

4
  • Справедливости ради отмечу, что использовать атрибут вместо свойства можно.
    – Regent
    13 июл 2015 в 16:48
  • @Regent, jQuery попытается правильно применить disabled true/false, но вот с checked уже начинаются глюки, когда реально чекнутость меняется только первый раз, например, а потом чекбокс перестаёт работать. Так что лучше всё-таки так не делать. Если есть свойство, то надо в него и писать, а не в атрибут.
    – Qwertiy
    13 июл 2015 в 16:52
  • Спору нет: использовать свойство вместо атрибута лучше, а в случае с checked ещё и критично. Но есть ли такие же проблемы с disabled хотя бы в старых браузерах, чтобы слово "нельзя" было оправдано?
    – Regent
    13 июл 2015 в 16:58
  • @Regent, насколько я помню, jQuery сам ресолвит значения true/false в сочетании с attr disabled, поэтому там проблем нет. Но в моём ответе не говорится, что нельзя именно с disabled, а говорится в целом про свойства. Те же checked и hidden - с ними проблемы запросто будут.
    – Qwertiy
    13 июл 2015 в 17:24
0

Ошибки в коде:

  • Неправильный селектор для телефона. Должно быть: var top_form_phone = $('#top_form_phone').val();.
  • Отсутствующий ID у кнопки. Должно быть: <input type="submit" name="button" id="top_form_button" value="Отправить"/>.
  • Присваивание вместо сравнения. Должно быть: top_form_phone.length == 0.
  • Нарушение логики работы из-за использования && вместо ||. Должно быть (top_form_fio.length == 0 || top_form_phone.length == 0).
  • Имеет смысл добавить disabled="disabled" кнопке по умолчанию, так как при загрузке страницы поля пустые.

Итоговый код:

function checkParams() {
    var top_form_fio = $('#top_form_fio').val();
    var top_form_phone = $('#top_form_phone').val();
    if (top_form_fio.length == 0 || top_form_phone.length == 0) {
        $('#top_form_button').attr('disabled', 'disabled')
    }
    else {
        $('#top_form_button').removeAttr('disabled');
    }
}
<input type="text" name="fio" class="order_input" id="top_form_fio" onblur='checkParams()'/>
<input type="text" name="phone" class="order_input" id="top_form_phone" onblur='checkParams()'/>
<input type="submit" name="button" id="top_form_button" value="Отправить" disabled="disabled"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Вариант с использованием события change вместо onblur (несколько логичнее для проверки изменения значения), без inline JS и с использованием свойства вместо атрибута:

$(document).ready(function() {
    var $texts = $('#top_form_fio, #top_form_phone');
    var $button = $('#top_form_button');  
    $texts.on("change", function() {
        var hasEmpty = $texts.filter(function() { return !$(this).val(); }).length > 0;
        $button.prop('disabled', hasEmpty);
    }).trigger('change');
});
<input type="text" name="fio" class="order_input" id="top_form_fio" />
<input type="text" name="phone" class="order_input" id="top_form_phone" />
<input type="submit" name="button" id="top_form_button" value="Отправить"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Если нужно изменение состояния кнопки без потери фокуса элемента, можно использовать событие keyup:

$(document).ready(function() {
    var $texts = $('#top_form_fio, #top_form_phone');
    var $button = $('#top_form_button');  
    $texts.on("keyup", function() {
        var hasEmpty = $texts.filter(function() { return !$(this).val(); }).length > 0;
        $button.prop('disabled', hasEmpty);
    }).trigger('keyup');
});
<input type="text" name="fio" class="order_input" id="top_form_fio" />
<input type="text" name="phone" class="order_input" id="top_form_phone" />
<input type="submit" name="button" id="top_form_button" value="Отправить"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.