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"的对象的数组，单击现有<input type="button">内的<form>阻止默认表单提交，迭代数组和现有{{1元素，将值附加到form对象。

使用FormData XMLHttpRequest() POST对象服务器FormData。

＆＃13;

.send()

＆＃13;

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);
})

＆＃13;

Answer 2

我丢失了一个跟随它工作的链接，但基本上关键是创建一个表单对象并能够在其上调用submit（）函数。我之前尝试过，并且不确定为什么我一直收到关于submit（）的消息不是我在表单对象上的方法，但这正是我需要的，下面是示例：

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();

如何动态生成包含动作和输入的HTML表单并在JavaScript中提交？

2 个答案: