Переходите к следующему вводу, когда нажимаете ввод, и игнорируйте, если есть скрытый ввод - PullRequest
Новая
       0

Переходите к следующему вводу, когда нажимаете ввод, и игнорируйте, если есть скрытый ввод

1 голос
/ 18 апреля 2020

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

Как игнорировать ввод / элемент, если скрыт? 

$(document).ready(function() {
  $('#civil_status').keyup(function() {
    var status = $(this).val();
    if (status == '2') {
      $('#civilstatus_div').css('display', '');
      $('#spouse_name').attr('disabled', false);
    } else {
      $('#civilstatus_div').css('display', 'none');
      $('#spouse_name').attr('disabled', true);
      $("#spouse_name").val('');
    }
  });
});

$("input, select, textarea").not($(":button")).keypress(function(evt) {
  if (evt.keyCode == 13) {
    iname = $(this).val();
    if (iname !== 'Submit') {
      var fields = $(this).parents('form:eq(0),body').find('button, input, textarea, select, hidden');
      var index = fields.index(this);
      if (index > -1 && (index + 1) < fields.length) {
        fields.eq(index + 1).focus();
      }
      return false;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="row mt-3">
  <div class="col-lg-4">
    <label class="float-left col-sm-12 col-form-label" for="civil_status"><small><b>CIVIL STATUS:</b></small></label>
  </div>
  <div class="col-lg-8">
    <center>
      <input class="form-control form-control-sm col-sm-11" name="civil_status" id="civil_status" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
    </center>
    <div class="row justify-content-center mr-4">
      <span><small>&nbsp;1-Single, 2-Married, 3-Widowed, 4-Separated</small></span>
    </div>
  </div>
</div>

<div class="row mt-1" style="display:none;" id="civilstatus_div">
  <div class="col-lg-4 mt-0">
    <label class="float-left col-sm-12 col-form-label" for="spouse_name"><small><b>NAME OF SPOUSE<br>IF MARRIED:</b></small></label>
  </div>
  <div class="col-lg-8 mt-3">
    <center>
      <span id="spouse_hidden"></span>
      <input class="form-control form-control-sm col-sm-11" name="spouse_name" id="spouse_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
    </center>
  </div>
</div>

<hr>

<div class="row">
  <div class="col-lg-4 mt-0">
    <label class="float-left col-sm-12 col-form-label" for="mainden_name"><small><b>MOTHER'S<br>MAIDEN NAME:</b></small></label>
  </div>
  <div class="col-lg-8 mt-3">
    <center>
      <input class="form-control form-control-sm col-sm-11" name="mainden_name" id="mainden_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
    </center>
  </div>
</div>

Вот мой рабочий образец

1 Ответ

0 голосов
/ 18 апреля 2020

Чтобы решить эту проблему, вам просто нужно исключить скрытые элементы из тех, которые вы выбрали в переменной fields. Для этого используйте .not().

Также обратите внимание, что селектор, который вы используете для поиска полей, может быть сокращен до :input. 

var fields = $(this).parents('form:eq(0),body').find(':input').not(':hidden');

Кроме того, ваш второй Функция находится за пределами обработчика document.ready. Вы должны исправить скобки и скобки вокруг этой функции.

Рабочий пример: 

jQuery($ => {
  $('#civil_status').keyup(function() {
    var status = $(this).val();
    let shouldEnable = this.value.trim() === '2';
    $('#civilstatus_div').toggle(shouldEnable);
    $('#spouse_name').prop('disabled', !shouldEnable).val('');
  });

  $("input, select, textarea").not($(":button")).keypress(function(evt) {
    if (evt.keyCode == 13) {
      iname = $(this).val();
      if (iname !== 'Submit') {
        var fields = $(this).parents('form:eq(0),body').find(':input').not(':hidden');
        var index = fields.index(this);
        if (index > -1 && (index + 1) < fields.length) {
          fields.eq(index + 1).focus();
        }
        return false;
      }
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mt-3">
  <div class="col-lg-4">
    <label class="float-left col-sm-12 col-form-label" for="civil_status"><small><b>CIVIL STATUS:</b></small></label>
  </div>
  <div class="col-lg-8">
    <center>
      <input class="form-control form-control-sm col-sm-11" name="civil_status" id="civil_status" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
    </center>
    <div class="row justify-content-center mr-4">
      <span><small>&nbsp;1-Single, 2-Married, 3-Widowed, 4-Separated</small></span>
    </div>
  </div>
</div>

<div class="row mt-1" style="display:none;" id="civilstatus_div">
  <div class="col-lg-4 mt-0">
    <label class="float-left col-sm-12 col-form-label" for="spouse_name"><small><b>NAME OF SPOUSE<br>IF MARRIED:</b></small></label>
  </div>
  <div class="col-lg-8 mt-3">
    <center>
      <span id="spouse_hidden"></span>
      <input class="form-control form-control-sm col-sm-11" name="spouse_name" id="spouse_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
    </center>
  </div>
</div>

<hr>

<div class="row">
  <div class="col-lg-4 mt-0">
    <label class="float-left col-sm-12 col-form-label" for="mainden_name"><small><b>MOTHER'S<br>MAIDEN NAME:</b></small></label>
  </div>
  <div class="col-lg-8 mt-3">
    <center>
      <input class="form-control form-control-sm col-sm-11" name="mainden_name" id="mainden_name" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
    </center>
  </div>
</div>

<!-- this will be ignored -->
<input type="hidden" name="hidden" />

<div class="row">
  <div class="col-lg-4 mt-0">
    <label class="float-left col-sm-12 col-form-label" for="mainden_name"><small><b>FOO'S<br>MAIDEN NAME:</b></small></label>
  </div>
  <div class="col-lg-8 mt-3">
    <center>
      <input class="form-control form-control-sm col-sm-11" name="mainden_name" id="foo" type="text" style="text-transform: uppercase; outline: 0;text-align:center;">
    </center>
  </div>
</div>

В целом, было бы лот больше смысла, если бы первый input был select. Тогда вы не полагаетесь на то, что люди набирают правильный номер

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...