Динамически изменить размер ввода с помощью ajax

Question

Я использую форму ввода для получения значения ввода от пользователя, который является OTP. Он варьируется в зависимости от 4 ди git, 5 ди git и 6 ди git. пока что я попробовал, дано ниже, который работает, но не Dynami c. он запрашивает страницу для повторного обновления sh, чтобы точно показать, что мне нужно

 if ($number_length == 4) {
            ?>
              <input type="text" id="digit-1" name="otp_number" data-next="digit-2" />
              <input type="text" id="digit-2" name="otp_number2" data-next="digit-3" data-previous="digit-1" />
              <input type="text" id="digit-3" name="otp_number3" data-next="digit-4" data-previous="digit-2" />
              <input type="text" id="digit-4" name="otp_number4" data-next="digit-5" data-previous="digit-3" />
            <?php }  elseif ($number_length == 5) { ?>
              <input type="text" id="digit-1" name="otp_number" data-next="digit-2" />
              <input type="text" id="digit-2" name="otp_number2" data-next="digit-3" data-previous="digit-1" />
              <input type="text" id="digit-3" name="otp_number3" data-next="digit-4" data-previous="digit-2" />
              <input type="text" id="digit-4" name="otp_number4" data-next="digit-5" data-previous="digit-3" />
              <input type="text" id="digit-5" name="otp_number5" data-next="digit-6" data-previous="digit-3" />
            <?php }  elseif ($number_length == 6) { ?>
              <input type="text" id="digit-1" name="otp_number" data-next="digit-2" />
              <input type="text" id="digit-2" name="otp_number2" data-next="digit-3" data-previous="digit-1" />
              <input type="text" id="digit-3" name="otp_number3" data-next="digit-4" data-previous="digit-2" />
              <input type="text" id="digit-4" name="otp_number4" data-next="digit-5" data-previous="digit-3" />
              <input type="text" id="digit-5" name="otp_number5" data-next="digit-6" data-previous="digit-3" />
              <input type="text" id="digit-6" name="otp_number6" data-next="digit-6" data-previous="digit-3" />
            <?php } ?> 

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

Answer 1

Как это? Нет необходимости в Ajax (кроме получения number_length сейчас)

Я также исправил ваши данные next, что кажется неправильным, если нет следующих

Измените первую строку с

const numberLength = 5; // <?= $number_length ?>;

до

const numberLength = <?= $number_length ?>;

когда счастлив

const numberLength = 5; // <?= $number_length ?>;
const div = document.getElementById("container")
for (let i = 0; i < numberLength; i++) {
  let inp = document.createElement("input")
  inp.type = "text";
  inp.id = "digit-" + (i + 1);
  inp.name = "otp_number";
  if (i > 0) inp.setAttribute("data-previous", "digit-" + i)
  if (i < numberLength - 1) inp.setAttribute("data-next", "digit-" + (i + 2))

  // for debugging
  inp.placeholder = "prev:" + (inp.getAttribute("data-previous") || "n/a") + 
                    " => digit-" + (i + 1) + 
                    " => next:" + (inp.getAttribute("data-next") ||"n/a"); 

 div.appendChild(inp)
}

input { width:350px }

<div id="container"></div>