HTML/ Javascript：如何提交輸入並使用提交/添加更多按鈕填寫文本區域

Question

因此，我正在為 class 創建一個預填簡歷生成器，我希望只有一個輸入區域用於職業經歷/工作信息，但我想要一個可以反復單擊的按鈕來提交每個工作信息。 理想情況下，結果將顯示在其下方的文本框中，以便他們可以查看並跟蹤他們提交的內容。 我包括了我在 HTML 端使用的代碼：**注意：整個頁面基本上是一個表單，底部有一個提交。 這是迄今為止 HTML 頁面的單獨按鈕屏幕截圖

`<div>
<fieldset>
  <legend>Work Experience</legend>
<p>
<label for="occupation">Job Title</label><br>
<input type="text" id="occupation" name="occupation"><br>
<label for="company">Company Name:</label><br>
<input type="text" id="company" name="company"><br>
<label for="duties">Duties and Skills Attained:</label><br>
<input type="text" id="duties" name="duties"><br>
<button type="button" id="generate">Add Work Eperience</button>
</p>
</fieldset>
</div>

Answer 1

不確定我是否完全理解，但輸入名稱也支持 arrays。 所以你可以做的是這樣的事情（假設你想為每個條目提交一個提交）。

<input type="text" id="occupation" name="experience[][occupation]" value="some-previous-occupation">
<input type="text" id="company" name="experience[][company]" value="some-previous-company">

然后，您可以添加隱藏輸入以跟蹤已提交的輸入（您可以使用循環並將0替換為循環的索引）

<input type="hidden" id="occupation" name="experience[0][occupation]">
<input type="hidden" id="company" name="experience[0][company]">

然后這將像這樣提交到您的后端：

[
    0 => ['occupation' => 'some-previous-occupation', 'company' => 'some-previous-company']
    1 => ['occupation' => 'developer', 'company' => 'stackoverflow']
]