JavaScript：使用 JavaScript 填写 HTML 表单并提交答案

【问题标题】：JavaScript: fill HTML form using JavaScript and submitJavaScript：使用 JavaScript 填写 HTML 表单并提交
【发布时间】：2014-10-17 13:53:20
【问题描述】：

我需要像这样填写 HTML 表单：

<form action="http://www.example.net/index.php" method="post">
<div class="poll">
<p class="poll-answer">
<label><input type='radio' name='option_id' value='12' />Abc</label>
</p>
<p class="poll-answer">
<label><input type='radio' name='option_id' value='34' />Def</label>
</p>
<input type="hidden" name="poll_id" value="56" />
<input type="submit" value="Submit!" />
</div>
</form>

我需要使用 JavaScript 填写并发送。

我写了：

<script>
function post(path) {
    method = "post";
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "radio");
    hiddenField.setAttribute("name", "option_id");
    hiddenField.setAttribute("value", "12");

    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "poll_id");
    hiddenField.setAttribute("value", "56");

    form.submit();
}
post('http://www.example.net/index.php');
</script>

但响应中没有数据。我需要发送带有选定Abc = value='12' 的表格。表单操作不在我的域中。我有a.com，表格在b.com。

# nc -l 192.168.1.11 -p 80
POST /index.php HTTP/1.1
Host: example.net
Connection: keep-alive
Content-Length: 0
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: null
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.101 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip,deflate
Accept-Language: cs-CZ,cs;q=0.8

我做错了什么？

【问题讨论】：

看起来您忘记将隐藏字段附加到表单，并将表单附加到文档。

标签： javascript html forms post

【解决方案1】：

您忘记将隐藏字段附加到表单并将表单附加到文档。

<script>
function post(path) {
    method = "post";
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "radio");
    hiddenField.setAttribute("name", "option_id");
    hiddenField.setAttribute("value", "12");

    form.appendChild(hiddenField);

    hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "poll_id");
    hiddenField.setAttribute("value", "56");

    form.appendChild(hiddenField);
    document.body.appendChild(form);

    form.submit();
    }
post('http://www.example.net/index.php');
</script>

【讨论】：

您将相同的字段对象附加两次，即使属性已更改。第二次创建一个新的输入元素。
如果我用你的代码打开 html 页面，没有任何东西发送到服务器。我查看/var/log/apache/access.log 和/var/log/apache/error.log 并没有消息:-( 什么是坏的？
Chrome inspect element 告诉我Uncaught TypeError: undefined is not a function file.html:26path file.html:26(anonymous function)
第 26 行是哪一行？
以前是 document.body.appenChild(form); 而不是 document.body.appendChild(form); 现在效果很好。谢谢！

【解决方案2】：

您在文档中添加了表单和字段。您需要将表单添加到文档中，并将字段添加到表单中：

var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);

var hiddenField = document.createElement("input");
// bla bla

form.appendChild(hiddenField);
document.body.appenChild(form);

【讨论】：