Laravel Blade：如何在单击添加更多时显示 textarea

Question

我有这个学校申请，我想往数据库里加100道题，正常的做法是一个接一个地加，也就是我会点击提交100次....精疲力竭....现在，我想创建一个应用程序，我必须查询一次数据库，即提交按钮旁边会有一个添加更多按钮，但如果我单击添加更多，它应该在下面显示另一个文本区域...... ...但是如果我点击保存，它应该保存到数据库中

<form method="post"  action={{route('save.question', $subject->slug)}} >
@csrf
        <textarea name="questions"></textarea>

        <button type='submit'>Submit</button>
        <button type=''>Add more question</button>

</form>

Answer 1

有一些方法，但我更喜欢：

1. 如果点击Add more question按钮，添加一个文本区域输入到DOM
2. 如果点击Submit，将所有textarea 值添加到javascript 数组中
3. 对数组进行字符串化
4. 将其发送到隐藏的输入中
5. 在 PHP 中使用 json_decode() 解码该输入值

所以：

let questionsContainer = document.querySelector("#questions-container");
let addQuestionTextarea = document.querySelector("#add-question-textarea");

addQuestionTextarea.onclick = () => {
    let textarea = document.createElement("textarea");
    questionsContainer.appendChild(textarea);
}

let submit = document.querySelector("#submit");
submit.onclick = () => {
    collectValues();
}

function collectValues(){
    let allTextareas = questionsContainer.getElementsByTagName('textarea');
  allTextareas = [...allTextareas]
  let allValues = [];
  allTextareas.forEach((textarea)=>{ allValues.push(textarea.value) });
  
  document.getElementById('questions-array').value = JSON.stringify(allValues);
  document.getElementById("form").submit();
}

textarea{
    display:block;
    margin: 8px;
}

<div id="questions-container">
    <textarea></textarea>
</div>

<button id="add-question-textarea">Add more question</button>


<form method="post"  action={{route('save.question', $subject->slug)}} id="form">
@csrf
    <input type="text" id="questions-array" hidden name="questions">
</form>
 <button id="submit">Submit</button>