如何将innerHTML赋值的内容与其他表单内容一同提交？

这问题我碰到过好多次啦！核心原因很简单——表单只会收集**表单控件（比如input、select、textarea这类）**的提交值，你用innerHTML修改的只是普通HTML元素（比如div、span）的内容，这些元素不属于表单提交的范畴，自然不会被一起发送到邮箱。

解决方案：用隐藏表单控件存储值 #

最靠谱的办法是在表单里添加一个隐藏的input元素，把要提交的值同时存在这个input的value属性里，再同步显示到页面的展示元素上。这样表单提交时，这个隐藏input的值就会被一起发送。

步骤1：修改HTML结构，添加隐藏input

在你的表单内部，加上一个隐藏input，同时保留原来用来显示内容的元素：

<form id="your-form">
  <!-- 其他原有表单控件 -->
  <!-- 隐藏的input，用于存储要提交的值 -->
  <input type="hidden" name="hand_status" id="hand_status_input">
  <!-- 用来在页面显示内容的元素 -->
  <div id="valuenow"></div>
</form>

• name属性很重要，它会作为提交数据的键，邮箱里会收到类似hand_status=Your hand needs surgery的内容。
• type="hidden"确保这个input不会在页面上显示，但会被表单提交。

步骤2：修改点击事件函数，同步更新值

把你的handvalue函数改成同时更新显示元素和隐藏input的值：

function handvalue() {
  const statusText = "Your hand needs surgery";
  // 更新页面上的显示内容
  document.getElementById("valuenow").innerHTML = statusText;
  // 把值存入隐藏input，供表单提交
  document.getElementById("hand_status_input").value = statusText;
}

如果用jQuery的话，代码可以更简洁：

function handvalue() {
  const statusText = "Your hand needs surgery";
  $("#valuenow").html(statusText);
  $("#hand_status_input").val(statusText);
}

关键注意点

• 确保隐藏input是放在<form>标签内部的，不然表单插件无法识别并收集它的值。
• 如果你的表单插件有自定义的字段配置，确认这个隐藏input的name属性在插件的收集范围内（一般默认都会收集所有form内的表单控件）。

这样修改后，当用户点击SVG/图片触发handvalue函数，页面会显示对应的文本，同时这个文本会被存在隐藏input里，表单提交时就会和其他字段一起发送到指定邮箱啦！

内容的提问来源于stack exchange，提问作者shokis