Включить отключенную кнопку «Отправить», если оба поля «Выбрать» и «Поле ввода» имеют значения? - PullRequest
Новая
       30

Включить отключенную кнопку «Отправить», если оба поля «Выбрать» и «Поле ввода» имеют значения?

0 голосов
/ 27 февраля 2019

Мне нравится этот сайт, и я смог многому научиться у всех вас.Однако вот проблема, на которую я не могу найти ответ:

У меня есть мини-форма с раскрывающимся списком Выбрать и полем ввода (оба обязательны) с отключенной кнопкой Отправить.Моему клиенту нужно, чтобы кнопка отправки была отключена / недоступна до тех пор, пока оба эти поля не будут заполнены, но я не могу заставить действие работать.

Код, предоставленный мною, пока работает только с вводом.Я попытался включить " ($ ('# selectBox'). On ('change', function () {") в исходную функцию, чтобы подать сигнал в поле Select, но это нарушает все, и я не 'Я не знаю, куда идти с этим.

Вместо того, чтобы поля работали независимо (как я, кажется, делал), я думаю, что каждое поле должно отскакивать / считывать друг друга в коде JQuery, чтобы расшифровать это.каждое поле имеет правильное значение. Но я изо всех сил пытаюсь найти соединение (я все еще довольно новичок в JS / JQ - извините, пожалуйста, мое невежество, учитывая это предположение, если оно неверно).

Я искал везде решение, но мне не повезло найти ответ. Пожалуйста, дайте мне знать, если я пропустил ссылку или предыдущий вопрос, который может мне помочь, и спасибо за любые идеи!

https://jsfiddle.net/jdraeger/2w68qs0y/2/

$(function() {
      $('#searchInput').keyup(function() {
      if ($(this).val() == '') {
          $('.enableOnInput').prop('disabled', true);
    } else {
          $('.enableOnInput').prop('disabled', false);
        }
      });
   })
<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

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

$('#selectBox','#searchInput').on('change', function() {
 enablingFunction();
 });

function enablingFunction(){
  if($('#selectBox').val() != "" && $('#searchInput').val() != ""){
    $('#submitBtn').prop("disabled", false);
   }
}
0 голосов
/ 27 февраля 2019

Два поля и два события ...

Вы можете написать один «обработчик» для этого.Просто используйте метод .on(), который позволяет связать много событий (keyup и change здесь).Затем, в сравнении, проверьте оба значения.Если один или другой пустой, отключите кнопку. 

$(function() {
  $('#searchInput, #selectBox').on('keyup change',function() {
    if ($('#searchInput').val() == '' || $('#selectBox').val() == '') {
      $('.enableOnInput').prop('disabled', true);
    } else {
      $('.enableOnInput').prop('disabled', false);
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>

Это можно даже записать короче, поместив условие непосредственно во второй аргумент истина / ложь .prop(): 

$(function() {
  $('#searchInput, #selectBox').on('keyup change',function() {
    $('.enableOnInput').prop('disabled', ($('#searchInput').val() == '' || $('#selectBox').val() == ''));
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div id='frame'>
    <div class='search'>
      <form method='post'>
        <select id="selectBox" class="selectBox" required>
          <option value="">--Select--</option>
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <input type='text' name='searchQuery' id='searchInput' required/>
        <input type='submit' name='submit' id='submitBtn' class='enableOnInput' disabled='disabled' />
      </form>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...