如何動態生成HTML表單，包括動作，輸入和JavaScript提交？

Question

我正在使用JavaScript生成表單，當用戶單擊並提交表單時，我希望它調用我的函數，該函數將使用新的輸入和新值動態更新此表單，並更新該表單的操作值，我想要我的功能是自動提交此更新的表單。

我目前正在做下面的事情，但不確定這是否正確，因為它似乎不起作用：

document.writeln('<form action="" id="myForm" onsubmit="return processMyForm(this);">');

在我的processMyForm（form）函數中，我正在執行以下操作：

form.setAttribute('method',"POST");
form.setAttribute('action', "http://new.target.host/path");
var node = document.createElement("INPUT");
node.setAttribute("type", "hidden");
node.setAttribute("name", "fieldName");
node.setAttribute("value","fieldValue");
form.appendChild(node.cloneNode());
form.submit();

知道如何動態生成表單並將其提交到其他站點，以便其行為就像單擊已經具有所需功能的表單上的“提交”按鈕一樣嗎？

Answer 1

您可以使用FormData和XMLHttpRequest()代替將html <form>附加到document 。

創建一個包含對象的數組，這些對象具有屬性"name" ， "value" ，在現有的<form>中單擊<input type="button">可以防止默認表單提交，迭代數組和現有form元素，並將值附加到FormData對象。

使用XMLHttpRequest()來POST FormData在目標服務器.send()

 var props = [{name:"fieldName1", value:"fieldValue1"}]; var url = "http://new.target.host/path"; var form = document.querySelector("form"); form.submit.addEventListener("click", function(event) { event.preventDefault(); var fd = new FormData(); var [...inputs] = [...form.querySelectorAll("input:not([name=submit])") , ...props]; for (let input of inputs) { console.log(input.name, input.value); fd.append(input.name, input.value); }; // var request = new XMLHttpRequest(); // request.open("POST", url); // request.send(fd); }) 

 <form> <input type="text" name="fieldName0" value="fieldName0"/> <input type="button" name="submit" value="submit"/> </form> 

Answer 2

我失去了遵循它的地方的鏈接，但基本上，關鍵是創建一個表單對象並能夠在其上調用Submit（）函數。 我之前曾嘗試過，但不確定為什么我一直收到關於commit（）的消息不是我擁有的表單對象上的方法，但這正是我所需要的，下面是示例：

var $formFinal=$(document.createElement('form')).css({display:'none'}).attr("method","POST").attr("action","https://your.target.host/url");
var $input=$(document.createElement('input')).attr('name','key1').val('value1');
var $input2=$(document.createElement('input')).attr('name','key2').val('value2');
$formFinal.append($input).append($input2);
$("body").append($formFinal);
$formFinal.submit();