JavaScript 动态创建 Form 表单

本文主要介绍了 JavaScript 动态创建 Form 表单并提交的实现方法，涉及 JavaScript 动态创建页面元素及模拟表单提交的技巧。

众所周知通过 Ajax 请求后整个页面是不会刷新的（Ajax 局部刷新），可是有时候我们需要刷新整个页面，这时可能就需要动态创建一个 Form：

function makeForm() {
    // 创建一个 form 
    var form = document.createElement("form");
    form.id = "form_id";
    form.name = "form_name";
    // 添加到 body 中 
    document.body.appendChild(form);
    // 创建一个输入框
    var input = document.createElement("input");
    // 设置相应参数 
    input.type = "text";
    input.name = "username";
    input.value = "zhangsan";
    // 将该输入框插入到 form 中 
    form.appendChild(input);
    // form 提交方式 
    form.method = "POST";
    // form 提交路径 
    form.action = "/index";
    // 执行提交
    form.submit();
    // 删除该 form 
    document.body.removeChild(form);
}

调用 makeForm 后，立即创建一个新的 Form，并提交，然后移除该 Form。
有时可能并不需要创建一个新的 Form，而是在已存在的 Form 上添加东西：

<form action="/index" method="post" id="form_id"></form>

// 获取已存在的 Form
var form = document.getElementById("form_id");
var input = document.createElement("input");
input.type = "text";
input.name = "username";
input.value = "zhangsan";
form.appendChild(input);
form.submit();