Отправка формы не работает через jquery?

Question

[WebforSelf]

Вопрос такого плана,
Есть форма

<form method="post" >
                      <div class="flex_code">
                          <input class="inputs code_1" value="" type="tel"  pattern="[0-9]*"   maxlength="1"  >
                          <input class="inputs code_2" value="" type="tel"  pattern="[0-9]*"   maxlength="1"  >
                          <input class="inputs code_3" value="" type="tel"  pattern="[0-9]*"  maxlength="1"  >
                          <input class="inputs code_4" value="" type="tel"  pattern="[0-9]*"   maxlength="1">
                      </div>
                      
                      <input type="hidden" class="all_code"    value="1111"  >
                      <input type="submit" disabled class="good_code" name="good_code" value="Done" style="display: none">
                 </form>

Где мы вводим код, он сравнивает его с кодом в input all_code
и если все гуд то

$('.good_code').prop('disabled', false);
$('.good_code').click();

Но суть в следующем, что почему то отправка формы не происходит, зато если в инспекторе вручную найти и клацнуть кнопку good_code, то форма со значениями отправляется.

Может дело в этом коде? который после введенных 4 полей сразу делает проверку и отправляет?

$(function() {
    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength ) {
                if($(this).hasClass('code_4')){
                    $(this).blur();    
                 //тут код проверки и клик по submit
                }else{
                  $(this).next('.inputs').focus();
                }
        } 
    });
});

Главное если убрать эту функцию , которая после 4 заполненного числа отправляет сама и написать просто
чтоб перескакивало по input

$(function() {
    $(".inputs").keyup(function () {
        if (this.value.length == this.maxLength) {
          $(this).next('.inputs').focus();
        }
    });
});

а сама отправка будет висеть на событии

$(".inputs").on("change", function() {
//тут код функции
});

То работает.
Может следует при заполнении инпут записывать значение в value?

Comments

[Александр Шипин]

Зачем вы выполняете операцию click на кнопке, которую не видно, если при успешном исполнении мы можете просто выполнить сразу $("form").submit() без создания кнопок отправки?

$(function () {
  $(".inputs").keyup(function () {
    if (this.value.length === this.maxLength) {
      if ($(this).hasClass("code_4")) {
        $(this).blur();
        $("form").submit()
      } else {
        $(this).next(".inputs").focus();
      }
    }
  });
});

Логика от этого не поменяется. Зато выполняется во всех случаях успеха

[WebforSelf]

Александр Шипин, Да уже делал и так
$("form#code").submit();
где
<form method="post" id="code">
Просто уже странно, если кликаю прям на кнопку то форма отправляется как надо, если с помощью этого события или с помощью клика на кнопку, то не отправляется.

[Александр Шипин]

WebforSelf, потому, что $('.good_code').click() должен выполнять функцию, а в вашем случае он выполняет ничего.
то есть, ваш код в любом случае будет

$('.good_code').click(function () {
  ${"form").submit(); // или тот id, что используется
});

так что, на вашем месте, я бы просто убрал кнопку, оставил сразу $("form").submit() и не мучался c излишними строками кода :)

[WebforSelf]

Александр Шипин, В общем есть форма где есть код и скрытая кнопка. Изначально стоял код чтоб просто перескакивать по мере заполнения инпутов. В конце когда 4 элемент заполнен , просто щелкнуть в свободную от инпута область и срабатывала фукнция

$(".inputs").on("change", function() {
//тут код функции
});

Потом помогли мне чтоб при заполнении именно последнего элемента проходила сразу проверка и форма отправлялась.
И тут почему то перестала отправляться сама форма. Причем условия все выполняются как надо. Судя по выводу переменных.
Соответственно пробовал и submit и click по кнопке. Почему то не отправляет форму.
Есть мысль при вводе инпута сразу присваивать ему значение value, такое же можно реализовать?

Вот к примеру как на додо пицце

[Александр Шипин]

WebforSelf, да, можете просто присваивать value к input, потом исполнять проверку на корректность (успешно - отправить форму, не успех - ничего не делать)

[WebforSelf]

Александр Шипин, а как сделать чтоб как на додопицце прям прописывался value?

Получается код такого рода сейчас

$(function () {
  $(".inputs").keyup(function () {
    if (this.value.length === this.maxLength) {
      if ($(this).hasClass("code_4")) {
        $(this).blur();
        $("form").submit()
      } else {
        $(this).next(".inputs").focus();
      }
    }
  });
});

$(this).val(); сюда если присваиваю, все равно в html не прописывается как это сделано на додо.
Ну и соответственно мне 2 раза же нужно присвоить? при фокусе и перед blur?

[Александр Шипин]

WebforSelf, потому, что HTML (DOM-дерево) должен обновиться (создать input с введенным value, удалить старый input, добавить новый input), иначе результата в структуре DOM-дерева вы не увидите.

Dodo реализован с использованием React, что позволяет обновлять DOM-дерево "на лету".