如何使用此javascript函數將變量發送到表單？

Question

我有這個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">

謝謝！

Answer 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"

Answer 2

將輸入類型隱藏在表單內，然后提交表單

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

在javascript submit（）中設置隱藏字段的值

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

但是通過設置form method =“post”，id不會是查詢字符串的一部分，即如果你真的想要查詢字符串中的id，那么url將保留action.php，即url action.php？id = **那么你需要更改form method =“get”，這樣隱藏的字段id會自動成為url的一部分，即action.php？id = **

閱讀get和post之間的區別

如果你真的需要使用method =“post”action =“action.php”， 這里是你如何訪問下一頁的發布值

Answer 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);

            }

謝謝。