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

关键词：

【中文标题】单击提交按钮时将自定义文本从选择框提交到文本区域【英文标题】：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

【讨论】：

尝试在单击按钮时从两个不同的文本区域复制文本

】尝试在单击按钮时从两个不同的文本区域复制文本【英文标题】：Tryingtocopytextfromtwodifferenttextareasonbuttonclick【发布时间】：2021-08-1701:58:50【问题描述】：我是JS新手，所以如果这是一个简单的答案，我提前道歉。当按下按钮时... 查看详情

单击按钮时在剪贴板中复制文本区域的文本

】单击按钮时在剪贴板中复制文本区域的文本【英文标题】：Copyingtextoftextareainclipboardwhenbuttonisclicked【发布时间】：2016-10-0603:01:20【问题描述】：我正在寻找创建一个jQuery（或javascript）button，它选择textarea中的所有内容，然后在... 查看详情

将 CSS/JS 文件从链接加载到文本框

...用于附加CSS文件的数组。我正在寻找一种方法，以便在您单击按钮后将CSS文件加载到文本区域。每个文件都包含以下内容：$CSS=array(file 查看详情

如何从输入字段搜索文本到文本区域，以及如何使用 Jquery 标记匹配结果？

】如何从输入字段搜索文本到文本区域，以及如何使用Jquery标记匹配结果？【英文标题】：HowtoSearchtextfrominputfieldtotextarea,andHowtomarkedmatchedresultUsingJquery?【发布时间】：2021-01-1302:22:59【问题描述】：我正在尝试创建简单的jquery应... 查看详情

将 textFields/textArea 写入文本文件

...2-0912:48:37【问题描述】：所以在小程序中，我需要在按下提交按钮时将两个文本字段和文本区域中的值写入文本文件。文本读取得很好，但没有记录到文本文档中。nameField和topicField是我的两个文本字段，paragraphArea是我的文本区... 查看详情

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

...入区域用于职业经历/工作信息，但我想要一个可以反复单击的按 查看详情

从自动完成列表提交查询，而无需点击提交按钮(代码片段)

...建议）列表中的值从列表中放入输入的文本区域，并自动提交，这无需点击发送按钮。我们看到了这个和几乎所有主要的搜索引擎。您开始键入查询，建议框下拉，您选择单词，它会自动放入输入框的文本区域，然后提交，无需... 查看详情

如何将此内容输出到文本区域？

】如何将此内容输出到文本区域？【英文标题】：Howcanioutputthiscontenttoatextarea?【发布时间】：2015-04-2521:58:46【问题描述】：我试图将文本从php页面传递到我的html页面，正如ChrisBakers的回答（javascript，不是jquery）所描述的那样。Ca... 查看详情

单击按钮后没有获取文本区域文本？

】单击按钮后没有获取文本区域文本？【英文标题】：Notgettingtextareatextafterbuttonclick?【发布时间】：2015-09-2421:38:03【问题描述】：我在textarea中有一些竞争..当我提醒它给出正确的竞争时。但是当我在文本竞争区域中附加“你好... 查看详情

单击后将标题文本动态放入文本区域

】单击后将标题文本动态放入文本区域【英文标题】：Dynamicllyputtingheadingtextintotextareaafterclick【发布时间】：2014-10-1314:54:33【问题描述】：基本上我有一个按钮，点击后我想在选择列表中自动选择主题（它确实如此）并获取h3和h5... 查看详情

带有 TinyMCE 的文本区域。提交按钮不起作用

】带有TinyMCE的文本区域。提交按钮不起作用【英文标题】：TextareawithTinyMCE.submitbuttonwon\'twork【发布时间】：2015-11-1307:31:27【问题描述】：您好，我正在使用TinyMCE制作一个带有textarea的表单，当我按下提交按钮将其发送到phpDB时，... 查看详情

将文本浮动到文本区域的右侧[关闭]

】将文本浮动到文本区域的右侧[关闭]【英文标题】：Floatingtexttotherightinsideoftextarea[closed]【发布时间】：2013-05-1419:29:58【问题描述】：我知道这似乎是一个愚蠢的问题，但直到现在我才不得不这样做。有没有办法在表单文本区域... 查看详情

如何在提交按钮上获取 amx 迭代器所有文本框值

...Button【发布时间】：2016-08-2506:36:43【问题描述】：我想在单击提交按钮时获取所有文本框、选择框、单选按钮值。所有输入元素都使用amx:iterator进行迭代。我在下面分享了amx代码。输入字段根据服务器的响应是动态的。<?xmlvers... 查看详情

网页设计，access入门2010，数学

...码域，可接受任何的文本，数字，内容。也可隐藏密码。提交按钮：在选定部分插入提交按钮，可提交表中的信息。重置按钮：在选定部分插入重置按钮，可把表中的信息变为初始值。按钮：可插入可以输入一行的文本区域，单... 查看详情

如何从mysql将数据插入文本区域

】如何从mysql将数据插入文本区域【英文标题】：Howtoinsertdataintotextareafrommysql【发布时间】：2014-04-2813:02:55【问题描述】：我正在尝试从mysql中检索数据并放入文本区域。插入到文本框的其他数据效果很好，但是当我想插入到文... 查看详情

当用户单击“提交”按钮时将信息捕获到日志文件

】当用户单击“提交”按钮时将信息捕获到日志文件【英文标题】：Captureinformationtologfilewhenuserclicks\'submit\'button【发布时间】：2015-07-1518:42:08【问题描述】：这个问题的解决方案很可能涉及到数据库，但不幸的是Squarespace还不能... 查看详情

使用 AngularJS 在表单提交时将选择字段重新设置为默认值

】使用AngularJS在表单提交时将选择字段重新设置为默认值【英文标题】：Re-settingselectfieldtodefaultonformsubmitusingAngularJS【发布时间】：2017-04-1414:03:01【问题描述】：我有一个使用AngularJS创建的表单。表单为问卷式表单，可连续多次... 查看详情

选择图片后从文件输入框提交表单

...发表单提交。我正在尝试简化选择图像的过程，然后必须单击另一个按钮才能将表单提交到数据库。我已更新问题以包含下面的屏幕截图和代码，希望能更清楚地说明我遇到的问题。注意：有人问我为什么不向输入按 查看详情