HTML / Javascript：如何提交输入并使用提交/添加更多按钮填充文本区域

Posted 2023-05-07

【中文标题】HTML / Javascript：如何提交输入并使用提交/添加更多按钮填充文本区域

【英文标题】：HTML/ Javascript: How to submit input and have it fill in a textarea with a submit/add more button

【发布时间】：2022-01-11 12:15:05

【问题描述】：

所以我正在为一个班级创建一个预填简历生成器，我希望只有一个输入区域用于职业经历/工作信息，但我想要一个可以反复单击的按钮来提交每个工作信息。理想情况下，结果将显示在其下方的文本框中，以便他们可以查看并跟踪他们提交的内容。我包含了我在 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>

【问题讨论】：

你的要求不清楚亲爱的

【参考方案1】：

不确定我是否完全理解，但输入名称也支持数组。所以你可以做的是这样的事情（假设你想为每个条目提交一个提交）。

<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' => '***']
]

【讨论】：

“但输入名称也支持数组”——大多数处理表单的系统不需要任何特殊的字段名称语法来对解析的数据进行分组。您正在对问题不支持的表单处理方式做出一些假设。

"假设您希望为每个条目提交一个" — 问题明确表示"我只想有 一个 输入区域"

@Quentin“假设你想为每个条目提交”——我在这里的意思是，OP 要求一个解决方案，其中每个新条目都需要提交。 （与使用 JS 动态添加输入的解决方案相反）我的解决方案在输入量方面与提供的屏幕截图相匹配。由于没有提供后端代码并且这是一个 HTML 问题，我会说我的答案提供了 OP 正在寻找的信息（这被解释为：“如何处理表单中的一对多关系"