Включить кнопку отправки, если по крайней мере одно поле заполнено - PullRequest
Новая
       1

Включить кнопку отправки, если по крайней мере одно поле заполнено

2 голосов
/ 06 января 2020

Извините, это может быть дубликат Q, но не может легко найти прямое решение,

Я прошел SO-ответ и нашел, включите submit, если все значения заполнены, 

$(document).ready(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Но как добиться того же (включить отправку), если хотя бы одно поле не пусто

Ответы [ 5 ]

4 голосов
/ 06 января 2020

Вы можете попробовать это: 

$(document).ready(function() {
    $('.field input').keyup(function() {
        var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length;
    
        $('.actions input').attr('disabled', hasValue ? false : 'disabled');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Обновление: 

$('#username,#password').filter((index, input) => input.value.length > 0).length

Эта строка означает, что мы проверим значение двух элементов ввода username и password, если все они не имеют никакого значения, кнопка будет отключена. Если вы хотите проверить другой элемент ввода перед включением / отключением, вы можете добавить: 

$('#username,#password,#input_3,#input_4').filter(...).length

Таким образом, кнопка будет отключена при username, password, input_3 и * 1021. * элементы не имеют никакого значения. Убедитесь, что для каждого элемента ввода указан идентификатор c.

Обновление 2:

Проверка для username и password имеет некоторое значение: 

var hasValue = $('#username,#password').filter((index, input) => input.value.length > 0).length === 2

Проверка для field, field4 и field5 имеет некоторое значение: 

var hasValue = $('#field,#field4,#field5').filter((index, input) => input.value.length > 0).length === 3
1 голос
/ 06 января 2020

Еще один способ go об этом:

Сохраняйте поля и создавайте новую коллекцию из них при каждом нажатии клавиши, фильтруя каждое по его значению.

Если длина наших пустых полей равна длине всех полей, отключите кнопку: 

$(document).ready(function() {
    var $fields = $('.field input');
    
    $fields.keyup(function() {

        var $emptyFields = $fields.filter(function(){
            return !this.value;
        });
        
        $('.actions input').prop('disabled', $emptyFields.length === $fields.length);
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Документация:

1 голос
/ 06 января 2020

Использовать jQuery метод реквизита. 

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }else{
          $(':input[type="submit"]').prop('disabled', true);
        }
     });
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>
1 голос
/ 06 января 2020

Вы можете с помощью Jquery.map и Array.find

  1. Jquery.map().get() получить всю длину входного значения с условием.
  2. Array.find найдет любой из ввод в качестве допустимой длины строки
  3. Тогда, наконец, результат будет обратно сравниваться prop('disabled', !filled)

$(document).ready(function() {
  $('.field input').keyup(function() {
    var res = $('.field input').map(function() {
        return $(this).val().length != 0
    }).get()
    var filled  = res.find(a=> a == true)
    $('.actions input').prop('disabled', !filled);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>

Обновлено с возможностью выбора

Обязательное поле на основе. Кнопка активируется только после того, как обязательные поля 1 и 3 заполнены оба 

$(document).ready(function() {
  $('.field input,.field select').on('keyup change',function() {
    var res = $('.field input[required],.field select[required]').map(function() {
      return $(this).val().trim().length != 0
    }).get();
    var filled = res.every(a => a == true)
    $('.actions input').prop('disabled', !filled);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username *</label>
      <input id="username" required type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='field'>
      <label for="password">email *</label>
      <input id="password" required type="password" />
    </div>
    <div class='field'>
      <label for="password">select email *</label>
      <select required>
        <option value="">Select</option>
        <option value="1">one</option>
        <option value="2">two</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>
0 голосов
/ 06 января 2020

Вы можете попробовать это простым способом, как показано ниже: 

var filled = false;
$('.field input').each(function() {
            if ($(this).val().length > 0) {
                filled = true;
                return;     // just add return means break from loop whenever any field is filled. 
            }
        });

        if (filled) {
            $('.actions input').attr('disabled', false);
        } else {
            $('.actions input').attr('disabled', 'disabled');
        }
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...