当点击提交按钮时，将自定义文本从选择框提交到文本区

Question

点击" post thread "按钮，我希望它添加自定义文本到文本区取决于什么下拉选择在一个选择框。我有这个脚本在新线程模板的头部，但它仍然不会在提交工作。我做错了什么吗?

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>

Answer 1

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

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

Answer 2

首先选择您的表单，然后添加"提交"事件监听器来形成并添加一个带有传递事件的回调函数，在回调函数中调用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>