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 you have read our privacy policy.

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