时间戳

首页 > 解决方案 > Laravel Blade：如何在单击添加更多时显示 textarea

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

问题描述

我有这个学校申请，我想往数据库里加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>

标签： javascriptlaravellaravel-blade

解决方案

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

  1. 如果单击Add more question按钮，则向 DOM 添加一个 textarea 输入
  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>

推荐阅读