单击提交按钮时将自定义文本从选择框提交到文本区域

Posted 2023-02-19

【中文标题】单击提交按钮时将自定义文本从选择框提交到文本区域

【英文标题】：Submitting custom text from select box into textarea when submit button is clicked

【发布时间】：2021-11-03 06:46:55

【问题描述】：

点击“发布线程”按钮后，我希望它根据在选择框中选择的下拉菜单向文本区域添加自定义文本。我在 newthread 模板的头部有这个脚本，但在提交时它仍然无法工作。我是不是做错了什么？

function setText() 
  var tasks = document.getElementById('tasks');
  var message = document.getElementById('message');
  message.value = tasks.value +  message.value;

<form>
  <select id="tasks">
    <option value="texthere 1">forage</option>
    <option value="texthere 2">attack</option>
    <option value="texthere 3">defend</option>
  </select><br/>
  <input type="submit" class="button" name="submit" value="Post reply" onClick="setText();" tabindex="3" accesskey="s" /><br/>
  <textarea id="message" name="message" rows="20" cols="70" tabindex="2">message</textarea>
</form>

【问题讨论】：

我让你成为一个工作的 sn-p。请将其设为minimal reproducible example - 我假设您已将 html 包装在一个表单中。如果不是，则将按钮设为 type="button"

请注意，您永远不应将点击事件处理程序分配给提交按钮。使用提交事件。也不是您不会看到该消息，因为表单已提交并且页面已卸载

【参考方案1】：

首先选择您的表单，然后在表单中添加一个“提交”事件侦听器，并在回调函数调用 event.preventDefault() 方法和您的 setText() 函数中添加一个带有传递事件的回调函数。

const form = document.querySelector("form");
form.addEventListener("submit", e => 
  e.preventDefault();
  setText()

)

function setText() 
  var tasks = document.getElementById('tasks');
  var message = document.getElementById('message');
  message.value = tasks.value + message.value;

<form>
  <select id="tasks">
    <option value="texthere 1">forage</option>
    <option value="texthere 2">attack</option>
    <option value="texthere 3">defend</option>
  </select><br />
  <input type="submit" class="button" name="submit" value="Post reply" tabindex="3" accesskey="s"><br />
  <textarea id="message" name="message" rows="20" cols="70" tabindex="2">message</textarea>
</form>

【参考方案2】：

我认为问题在于您同时提交表单和设置文本。 尝试使用 e.preventDefault();防止表单提交并在表单提交之前运行您的代码。

看看这个 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_textarea_value2