如何动态生成HTML表单，包括动作，输入和JavaScript提交？

Question

I am generating a form using JavaScript and when user clicks and submits the form, I'd like it go invoke my function which will dynamically update this form with new input and new values as well as update the action value of the form and I want my function to automatically submit this updated form.

I am doing something like below currently, but not sure if this is the right approach as it doesn't seem to work:

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

And in my processMyForm(form) function, I am doing something like below:

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

Any idea how I can dynamically generate a form and submit it to some other site so that it will behave just like clicking a submit button on a form that is already has everything exactly the way that I want?

Answer 1

You can substitute using FormData and XMLHttpRequest() for appending html <form> to document .

Create an array including objects having properties "name" , "value" , at click on <input type="button"> within existing <form> prevent default form submission, iterate both array and existing form elements, appending the values to FormData object.

Use XMLHttpRequest() to POST FormData object to server at .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

I lost a link where following it worked, but basically the key was to create a form object and be able to call a submit() function on it. I've tried it before and not sure why I kept getting a message about submit() wasn't a method on the form object that I had, but that's exactly what I needed and below is the example:

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