javascript动态创建form表单

最新推荐文章于 2023-09-27 00:22:32 发布

最新推荐文章于 2023-09-27 00:22:32 发布 · 372 阅读

文章标签：

#JavaScript

WEB 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态创建HTML表单的方法，并通过添加隐藏字段来提交表单到指定URL。此方法适用于需要动态生成表单并进行后台交互的场景。

//helper function to create the form function getNewSubmitForm(){
var submitForm = document.createElement("FORM");
document.body.appendChild(submitForm);
submitForm.method = "POST";
return submitForm;
}
//helper function to add elements to the form
function createNewFormElement(inputForm, elementName, elementValue){
var newElement = document.createElement("<input name=""+elementName+"" type="hidden">");
inputForm.appendChild(newElement);
newElement.value = elementValue;
return newElement;
}
//function that creates the form, adds some elements
//and then submits it
function createFormAndSubmit(){
var submitForm = getNewSubmitForm();
createNewFormElement(submitForm, "field1", "somevalue");
createNewFormElement(submitForm, "field2", "somevalue");
submitForm.action= "someURL";
submitForm.submit();
} </noscript>
<input type="button" value="Click to create form and submit" onclick="createFormAndSubmit()">