Submitting custom text from select box into textarea when submit button is clicked

user_16840174 0
Viewed 333

Upon hitting the "post thread" button, I want it to add custom text to the textarea depending on what dropdown is selected in a select box. I have this script in the head of the newthread template but yet it still won't work upon submitting. am I doing something wrong?

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>

box select html javascript
2 Answers
user_145006000

First select your form then add a "submit" event listener to form and add a callback function with passing event, inside the callback function call event.preventDefault() method and your setText() function.

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>

user_71446450
Related