如何利用JavaScript DOM操作，点击额外按钮提交含textarea值的表单？

要实现点击class为submit-message的按钮时提交class为sendXMPPMessage的表单，你可以通过原生JavaScript DOM操作完成，核心思路是给额外按钮绑定点击事件，触发目标表单的提交动作。

实现代码 #

// 等待DOM完全加载后执行代码，避免元素未找到的问题
document.addEventListener('DOMContentLoaded', function() {
  // 获取额外提交按钮和目标表单
  const submitBtn = document.querySelector('.submit-message');
  const messageForm = document.querySelector('.sendXMPPMessage');

  // 给按钮绑定点击事件
  submitBtn.addEventListener('click', function() {
    // 触发表单提交，和点击表单内原生submit按钮效果一致
    messageForm.submit();
  });
});

关键说明 #

• messageForm.submit() 会直接触发表单的提交流程，表单内的textarea内容会自动被包含在提交数据中，不需要额外手动传递值。
• 使用DOMContentLoaded事件确保脚本执行时所有DOM元素已渲染完成，避免出现元素获取失败的错误。
• 这种方式会保留表单的默认行为（比如表单验证、提交方式等），和点击原生发送按钮的效果完全一致。

内容的提问来源于stack exchange，提问作者Anik Ahmed fathe