如何使用此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提交（）

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

但通過設置形式方法= 「帖子」的ID不會是查詢字符串的一部分，即網址將保持action.php 而不是 如果你真的想在查詢字符串中的id ie url action.php？id = **那麼你需要改變form method = 「搞定」，這個隱藏域ID就會自動將網址即action.php的？ID的部分= **

瞭解difference between get and post

here is how you access posted value on next page如果你真的需要使用method =「POST」行動= 「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); 

      } 

謝謝。