Question

我需要创建一个表单并动态调用提交，如下所示：（Chrome正常运行，而不是Firefox）

var form = document.createElement("form");
form.name="openGame";
form.method = "post";
form.action="/public/games";
var lat = document.createElement("input");
lat.name="latitude";
lat.value=$("#city[name=latitude]").val() || " ";
lat.type="hidden";
form.appendChild(lat);
var lng = document.createElement("input");
lng.name="longitude";
lng.value=$("#city[name=longitude]").val() || " ";
lng.type="hidden";
form.appendChild(lng);
var address = document.createElement("input");
address.name="city";
address.value=$("#city[name=city]").val() || " " ;
address.type="hidden";
form.appendChild(address);
var game = document.createElement("input");
game.name="game";
game.value=id;
game.type="hidden";
form.appendChild(game);
form.submit();

但表单实际上并未提交。控制台中没有错误，没有输出

Answer 1

看起来您的表单从未附加到DOM。

您无法提交未在Firefox中呈现的表单。

如果您不想展示它，请使用display: none将其附加到DOM。

另一种方法是手动构建XMLHttpRequest，或者在jQuery中构建$ .post。

Answer 2

一个可能的解决方案（感谢Dan M.）是在提交之前将表单附加到DOM。

var form = document.createElement("form");
    form.style = {
        display : "none"
    };
    form.name="openGame";
    form.method = "post";
    form.action="/public/games";
    var lat = document.createElement("input");
    lat.name="latitude";
    lat.value=$("#citta[name=latitude]").val() || " ";
    lat.type="hidden";
    form.appendChild(lat);
    var lng = document.createElement("input");
    lng.name="longitude";
    lng.value=$("#citta[name=longitude]").val() || " ";
    lng.type="hidden";
    form.appendChild(lng);
    var address = document.createElement("input");
    address.name="citta";
    address.value=$("#citta[name=citta]").val() || " " ;
    address.type="hidden";
    form.appendChild(address);
    var game = document.createElement("input");
    game.name="game";
    game.value=id;
    game.type="hidden";
    form.appendChild(game);
    $("#openGame").append(form);
    form.submit();

并将一个元素添加到html页面，如

<div id='openGame'></div>

调用后创建的表单不提交.submit（）

2 个答案: