Блог

Главная - Вопросы по программированию - Заполнить форму из массива

Заполнить форму из массива

#javascript #forms #fill

#javascript #формы #заполнить

Вопрос:

Я хотел бы заполнить форму из массива, а затем удалить этот элемент из массива. Поэтому, когда я нажимаю на кнопку «Заполнить», форма должна быть заполнена, и теперь массив должен быть без этого элемента. Проблема в том, что массив не извлекается, не сдвигается и не нарезается, и он всегда загружает одни и те же данные в поля формы.

Html-форма, которую я имею:

 <h3><input class="FormControl" placeholder="Discussion Title"></h3>
<textarea class="Composer-flexible" placeholder="Write something..."  style="height: 166.2px;"></textarea>

Мой код:

 var button = document.createElement("button");
button.innerHTML = "Fill It";


var body = document.getElementsByTagName("body")[0];
body.appendChild(button);


button.addEventListener ("click", function() {
var arr = 
[["title1","post1"],["title2","post2"],["title3","post3"]];
var post = arr[0][1];
var title= arr[0][0];
document.getElementsByClassName("FormControl")[0].value=title;
document.getElementsByClassName("Composer-flexible")[0].value = post;
var arr=arr.slice(1);
console.log(arr);
});

Ссылка на скрипку:

https://jsfiddle.net/q1vc26oe/2/

После того, как я ее заполню, мне нужно ее немного просмотреть, а затем я отправлю ее. Но проблема возникает в следующий раз, когда я загружаю HTML-страницу и пытаюсь заполнить ту же форму, но на этот раз с помощью ‘title2’ и ‘post2’, загружаются ‘title1’ и ‘post1’, потому что массив не выталкивается, не сдвигается и не нарезается.Как это сделать?

Кроме того (это будет следующий шаг, когда я удостоверюсь, что скрипт работает хорошо), как отправить его, не автоматически, а через 15 секунд, потому что я хотел бы получить краткий обзор перед отправкой (сейчас это не является большим приоритетом, поэтому вы можете добавить к своему ответу или нет….)

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

1. «Но проблема возникает в следующий раз, когда я загружаю HTML-страницу» Зачем ей делать что-то еще? Вы перезагрузили код, поэтому он будет повторно инициализировать переменные.

2. Спасибо за вашу помощь, но когда я нажимаю кнопку «Заполнить» во второй раз, она должна заполнить второй элемент массива, но этого не происходит happen…it сбивает меня с толку.

Ответ №1:

Это будет ваш рабочий код: —

 var button = document.createElement("button");
button.innerHTML = "Fill It";

var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
var arr = [
  ["title1", "post1"],
  ["title2", "post2"],
  ["title3", "post3"]
];

button.addEventListener("click", function() {

  var post = arr[0][1];
  var title = arr[0][0];
  document.getElementsByClassName("FormControl")[0].value = title;
  document.getElementsByClassName("Composer-flexible")[0].value = post;
  arr = arr.slice(1);
  console.log(arr);
});

Вы создавали новый массив (с именем ‘arr’) каждый раз при нажатии кнопки, поэтому убедитесь, что вы создаете массив только один раз.

И убедитесь, что вы проверяете, пуст ли массив при нажатии кнопки