如何在HTML属性中插入JavaScript变量 实现表单value动态赋值

实现方法 #

你没办法直接在HTML的属性里写入JS变量获取对应值，必须通过JavaScript操作DOM来动态修改input的value属性，修改后的完整代码如下：

<form id="landing2" action="https://example.com/post10/" method="post">
  <!-- 给需要动态赋值的隐藏输入框加id，方便JS定位 -->
  <input type="hidden" name="name" id="embedUrlInput" value="">
  <input type="submit">
</form>

<script>
var embedurl = "https://" + document.location.host + "/embed" + window.location.pathname;
// 先给input赋值，再提交表单
document.getElementById('embedUrlInput').value = embedurl;
document.getElementById('landing2').submit();
</script>

原代码失效原因 #

你直接在value属性里写var embedurl，浏览器只会把这段内容当成普通字符串处理，不会解析成对应的JS变量值，所以提交的数据不是你想要的结果。

补充注意事项 #

• 不要混淆模板语法和原生HTML：${变量名}这类语法只有在JS模板字符串、后端模板引擎渲染的页面里才会生效，直接写在原生HTML的属性里不会被解析。
• 直接用JS给value赋值会自动处理特殊字符转义，不用担心URL里的特殊符号导致属性冲突的问题，比手动拼接HTML字符串更安全。

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