如何点击指定div内的文本链接自动填充textarea并提交表单

步骤1：添加快捷选择控件 #

你可以在聊天内容展示区域添加需要的快捷选择按钮/链接，示例结构如下，可自行调整样式和摆放位置：

<!-- 快捷选择区域 -->
<div class="quick-select mt-2 mb-2">
  <button class="quick-item btn btn-sm btn-outline-primary mr-2 mb-1">Finance</button>
  <button class="quick-item btn btn-sm btn-outline-primary mr-2 mb-1">Technology</button>
  <button class="quick-item btn btn-sm btn-outline-primary mr-2 mb-1">Marketing</button>
  <!-- 可根据需求新增更多选项 -->
</div>

步骤2：添加交互逻辑 #

基于你已经引入的jQuery，直接添加以下JS代码即可实现点击自动填充+提交：

$(function() {
  // 静态选项绑定点击事件
  $('.quick-item').click(function() {
    // 获取选中的文本内容
    const selectedContent = $(this).text().trim()
    // 填充到输入框
    $('#message').val(selectedContent)
    // 触发表单提交，和手动点击发送按钮效果完全一致
    $('#send_chat').submit()
  })

  // 如果你的选项是后端动态渲染生成的，替换为下方事件委托写法即可：
  // $(document).on('click', '.quick-item', function() {
  //   const selectedContent = $(this).text().trim()
  //   $('#message').val(selectedContent)
  //   $('#send_chat').submit()
  // })
})

额外说明 #

如果你用<a>标签作为快捷选项，需要在点击事件第一行加e.preventDefault()阻止默认跳转行为即可，原有表单提交、聊天消息渲染的逻辑不需要做任何修改，完全兼容你现有的代码结构。

内容的提问来源于stack exchange，提问作者Rizki Deddy Susanto