无法从 <form> 外部触发 POST 方法表单答案

【问题标题】：Can't trigger POST-method form from outside <form>无法从 <form> 外部触发 POST 方法表单
【发布时间】：2012-05-20 01:46:57
【问题描述】：

作为游戏的一部分，我希望将值（动态）分配给 html 表单，然后将它们“发布”到 views.py 以进行进一步操作（不是很重要）

我的问题是我似乎无法从外部触发表单的 POST 部分。嗯。

代码：

JS：

var score,x;

    function setScore(x){
        score=x;
        alert(score);
    }

    function getScore(){
        return score;
    }


    function postIt()   {       
        form = document.createElement('postForm');

        document.getElementById('userField').value = "Testing Name";
        document.getElementById('scoreField').value = score;
        alert(score);

        form.submit();   
    }

和html：

     <form action="" method="post" id="postForm">{% csrf_token %}
     <input type="hidden" id="userField" name="user"></input> Namn.<br>
     <input type="hidden" id="scoreField" name="score"></input> Score.<br>

     <button onclick="postIt()">Shoot</button>

<a href="javascript:setScore(1)">1</a> -     
<a href="javascript:setScore(2)">2</a> - 
<a href="javascript:setScore(3)">3</a> -
<a href="javascript:setScore(4)">4</a> -
<a href="javascript:setScore(5)">5</a> -
<a href="javascript:setScore(6)">6</a>   

<p>
<span onclick="postIt()">Skicka</span>   
     </form>

问题是我从按钮中得到了可疑的结果，而不是跨度-'触发器'。

预期且正确的终端窗口打印（在我指定 3 作为分数之后）：

Testing Name
3
[20/May/2012 03:41:43] "POST / HTTP/1.1" 200 1854

不过，我真的不明白为什么，因为它们都连接到同一个函数..？

【问题讨论】：

这与django无关。摆脱那个标签。
为什么 form = document.createElement('postForm');不应该是 getElementById 吗？
简短回答：最后，我会被困在大约 50 个左右的表单上，它们应该能够相互交互，而不管彼此如何。所以我认为我不能很好地即时生成它们..
您能否阐明您希望通过动态创建获得什么？（在我看来，无缘无故的额外工作；我一定遗漏了一些东西。）只使用一个表单的一个好处是您可以只在其中输入某种 ID，并且每次都会重新发送该字段的内容（因此您可以同时轻松区分两个客户端）。如果您有 50 种不同的操作，我将只使用一个表单并添加另一个字段然后将其“值”设置为 50 种不同的可能性（init?添加？减法？关闭？等等？）

标签： javascript html forms http-post

【解决方案1】：

function postIt()   {       
        var form = document.getElementById('postForm');

        document.getElementById('userField').value = "Testing Name";
        document.getElementById('scoreField').value = score;
        alert(score);

        form.submit();   
    }

这是fiddle

按钮起作用的原因是，当您单击它时，您会观察到它的默认行为，即提交表单。

【讨论】：

【解决方案2】：

function postIt()   {       
    form = document.createElement('postForm');

    document.getElementById('userField').value = "Testing Name";
    document.getElementById('scoreField').value = score;
    alert(score);
    form.appendChild(document.getElementById('userField'));
    form.appendChild(document.getElementById('scoreField'));
    form.submit();   
}

【讨论】：

不需要两次查询DOM。
我知道，但我不是来完全优化他的代码，只是为他会适应的问题提供解决方案......我确实很关心传达一个想法，在这种情况下我做了