时间戳

首页 > 解决方案 > 单击提交按钮时将自定义文本从选择框提交到文本区域

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

问题描述

点击“发布线程”按钮后，我希望它根据在选择框中选择的下拉菜单向文本区域添加自定义文本。我在 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>

标签： javascripthtmlselectbox

解决方案

首先选择您的表单，然后向表单添加一个“提交”事件侦听器，并在回调函数调用 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>

推荐阅读