Изменить класс кнопки формы в зависимости от поля ввода

Question

У меня есть кнопка в форме, которая имеет класс «popmake-46». Класс делает так, что при нажатии кнопки открывается всплывающее окно. Однако я хочу сделать так, чтобы класс изменился на другой класс (другое всплывающее окно) в зависимости от ввода "почтового индекса".

Если почтовый индекс начинается с цифр "117", класс должен оставаться как «popmake-46», но если он начинается с любого другого числа, ему следует изменить класс на «popmake-47» (другое всплывающее окно).

<form name="form1">
 <input type="text" name="firstname" placeholder="First name"><br>
 <input type="text" name="zipcode" placeholder="Zipcode"><br>
 <input class="popmake-46" type="submit" value="Submit">
</form>

Как этого добиться?

Answer 1

Я не верю, что это спецификация WordPress c, похоже, вам просто нужно добавить обработчик событий onchange и / или onkeyup к вашему zipcode field.

Я не уверен, как именно вы реализуете эту форму, поэтому вот довольно простой c способ сделать это:

• Создать функцию который проверяет значение текущего элемента
• Если значение начинается с '117', добавьте класс -47 и удалите класс -46
• В противном случае удалите класс -47 и добавьте -46 возвращение класса.
• добавьте эту функцию к событию onchange и / или onkeyup для почтового индекса.

В приведенном ниже фрагменте кода я добавил немного CSS (и изменил ваш вход для отправки на кнопку, чтобы я мог использовать псевдокласс ::after CSS, чтобы проиллюстрировать, что он меняется в зависимости от того, каким классом он является в настоящее время.

function toggle46or47(el){
  var form = el.closest('form');
  var popMake = form.querySelector('[type="submit"]');
  
  if( el.value.substring(0, 3) == '117' ){
    popMake.classList.remove('popmake-46');
    popMake.classList.add('popmake-47');
  } else {
    popMake.classList.add('popmake-46');
    popMake.classList.remove('popmake-47');
  }
}

.popmake-46:after{content: " I'm 46";}.popmake-47:after{content: " I'm 47";}

<form name="form1">
 <input type="text" name="firstname" placeholder="First name"><br>
 <input type="text" onchange="toggle46or47(this);" onkeyup="toggle46or47(this);" name="zipcode" placeholder="Zipcode"><br>
 <button class="popmake-46" type="submit" value="Submit">Submit</button>
</form>