Блог

Главная - Вопросы по программированию - Отображать элемент, когда входное значение включает определенную строку

Отображать элемент, когда входное значение включает определенную строку

#javascript #jquery #forms

#javascript #jquery #формы

Вопрос:

Я создал форму, которая содержит входные значения элементов fruits. Я хочу отобразить «box» на странице подтверждения формы, если пользователи выберут «apple» на странице ввода.

В приведенном ниже коде, когда пользователи выбирают «greenapple», даже если «apple» не выбрано, поле будет отображаться как «greenapple», включающее «apple». Это не то, что я хочу.

 $('.box').hide();
if ($('#form-confirm input[name="fruits]').val().indexOf('apple') !== -1) {
  $('.box').show();
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--input page -->
<form action="post" action="" id="form-input">
  <input type="checkbox" name="fruits" value="apple">Apple
  <input type="checkbox" name="fruits" value="greenapple">Green Apple
  <input type="checkbox" name="fruits" value="banana">Banana
  <input type="checkbox" name="fruits" value="peach">Peach
  <input type="checkbox" name="fruits" value="lemon">Lemon
  </div>
  <input type="submit" value="confirm">
</form>
<!--confirm page-->
<form action="post" action="" id="form-confirm">
  <input type="hidden" name="fruits" value="apple, greenapple..">
  <!--values you input on form input page-->
  <div class="box">
    box
  </div>
</form>

Результаты, которые я хочу получить

 apple => displays box
apple, greenapple => displays box
greenapple, banana => not displays box

Надеюсь, кто-нибудь мне поможет.
Заранее благодарю вас.

Комментарии:

1. использовать == вместо indexOf() ?

Ответ №1:

Вы могли бы разделить значение из поля ввода, а затем правильно проверить ввод. Попробуйте приведенный ниже код.

 $('.box').hide();
let input = $('#form-confirm input[name="fruits').val();
const fruits = input.split(',');
const isApplePresent = fruits.some(fruit => fruit.trim() === 'apple')
if (isApplePresent) {
  $('.box').show();
}

Ответ №2:

Для достижения того, что вам требуется, вы могли бы split() отделить строку запятой и использовать some() для определения, содержит ли результирующий массив искомое слово:

 $('#form-confirm input[name="fruits').on('input', e => {
  let containsApple = e.target.value.split(',').some(f => f.trim() === 'apple');
  $('.box').toggle(containsApple);
});  
 .box {
  display: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form-confirm">
  <input type="text" name="fruits" value="greenapple" />
</form>

<div class="box">
  I appear when 'apple' is typed above
</div>