Новое текстовое поле при нажатии кнопки

Question

У меня есть проблема, которая, надеюсь, кто-то может мне помочь. У меня есть веб-страница, которую я создавал с html и php, которая имеет текстовые поля, которые вы заполняете и отправляете для создания оценки. То, что я хотел бы сделать, - это нажать кнопку «Добавить еще один критерий», чтобы добавить другое имя и описание критерия на страницу, а кнопки «Добавить критерии» и «Создать» затем будут отображаться ниже нового набора текстовых полей.

Вся эта информация будет храниться в базе данных с использованием файлов контроллера PHP, поэтому я не уверен, что использование Javascript будет лучшим способом для достижения моей цели. Я прошу прощения за отсутствие знаний о php. Я очень новичок в этом, любая помощь будет очень признательна. Спасибо!

Answer 1

Это было бы проще, если вы используете JQuery, но без него, это все-таки возможно.

var newCriteria = document.createElement("input"); 
    newCriteria.setAttribute('placeholder', 'Criteria Name'); 
    newCriteria.name = 'criteria[]'; 

    var newDesc = document.createElement("textarea"); 
    newDesc.setAttribute('placeholder', 'Description'); 
    newDesc.name = 'description[]'; 

    document.getElementById("theForm").appendChild(newCriteria); 
    document.getElementById("theForm").appendChild(newDesc); 

На стороне PHP, используя скобки заставит значение прийти через как массив:

for ($x = 0; $x < $_POST['criteria']; $x++) { 
    // do something with each $_POST['criteria'][$x] and $_POST['description'][$x] 
    } 

Answer 2

Использование JQuery для добавления OnClick Слушатель и добавить поля:

$("#button").on("click", function() { 
    $("#containertoappend").append('<input type="text" id="anothercriteria" placeholder="Another criteria">'); 
    $("#containertoappend").append('<textarea id="anotherdescription" placeholder="Another Description"></textarea>'); 
});