如何使用此 javascript 函数将变量发送到表单？答案

【问题标题】：How can I send a variable to a form using this javascript function?如何使用此 javascript 函数将变量发送到表单？
【发布时间】：2011-06-18 19:58:21
【问题描述】：

我有这个 onclick 调用：

onClick="mySubmit();

调用这个函数：

function mySubmit(){
    document.getElementById("myForm").submit();
}

然后提交此表单：

<form id="myForm" action="action.php" method="post">

我的问题是：如何将变量从 onClick 发送到表单以获得类似<form id="myForm" action="action.php?id=**(the variable sent from the onclick goes here)**" method="post">

谢谢！

【问题讨论】：

标签： javascript variables forms onclick submit

【解决方案1】：

最简单的方法：在表单中附加一个隐藏字段。

<form id="myForm" action="action.php" method="post">
  <input type='hidden' id= 'hiddenField' name='id' value='' />

<script> 
  function mySubmit() {
     document.getElementById('hiddenField').value = "Whatever I want here";
     document.getElementById("myForm").submit();
   }
</script>

或者使用类似的函数

function addHiddenField(form, props) {
  Object.keys(props).forEach(fieldName => {
    var field = form[fieldName];
    if (!field) {
      field = document.createElement('input');
      field.type = 'hidden';
      field.name = fieldName;
      form.appendChild(field);
    }
    field.value = props[fieldName];
  });
}

document.querySelector('form').addEventListener('submit', () => {
  addHiddenField(this, {
    someQueryName: 'someQueryValue',
    otherQueryName: 'otherVal'
  });
});

<form>
  Name
  <input name=name />
  <input type=submit />
</form>

请注意，您可以使用 DevTools 修改 iframe 的沙箱以允许其提交表单，并且您可以验证发布的 URL。 sandbox="... allow-forms"

【讨论】：

【解决方案2】：

将输入类型隐藏在表单中，然后提交表单

<input id="id" name="id" type="hidden" />

在你的 javascript submit() 中设置隐藏字段的值

document.getElementById('id').value = **;

但是通过设置 form method="post" id 不会是查询字符串的一部分，即 url 将保持 action.php 反而如果您真的想要查询字符串中的 id 即 url action.php?id=** 那么您需要更改表单 method="get"，这样隐藏字段 id 将自动成为 url 即 action.php 的一部分?id=**

阅读difference between get and post

here is how you access posted value on next page如果你真的需要使用method="post" action="action.php"

【讨论】：

【解决方案3】：

你的 HTML：

<form id="myForm" action="#" method="post">
            <input type='hidden' id="id" name='id' value='123' />
            <input type='submit' name='submit' value='Click me !' onclick='addParam()' />
        </form>

你的脚本：

function addParam() {

                var url = "action.php?id=" + document.getElementById('id').value;
                document.getElementById("myForm").setAttribute('action', url);

            }

谢谢。

【讨论】：