[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]
Posted infoworld
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]相关的知识,希望对你有一定的参考价值。
场景
- 在开发
JavaWeb
后台功能的时候,有时候需要对正在编辑的表单里的数据进行前端模拟预览,这样能提前发现问题并修正,修正完之后就可以正式提交。好处就是避免了让客户浏览到错误的数据,那么如何做?
说明
-
要完成预览功能,首先前端的表单里的元素,包括输入框、下拉列表和富文本框等内容是需要获取最新的内容的。我们分析可以满足哪些要求:
-
需要打开新的窗口来预览页面,这样正在编辑的页面数据就不会丢失。这需要
target="_blank"
的属性,<form>
正好有这个属性值。因此完成这个预览功能需要form
的submit()
方法。 -
当编辑区域有多个
<form>
是时, 数据可以合并到一个<form>
并提交。 -
如果预览只需要某些数据,而不是
<form>
里的所有数据,那么就需要创建一个新的<form>
来提交。
-
-
动态创建
<form>
和数据步骤:-
通过
document.createElement("form")
创建Node
对象。 -
通过
form.setAttribute("method", "post")
来设置一些必要的属性。 -
通过
form.appendChild();
添加存储数据用的<input>
子元素。 -
把新的
<form>
添加到<body>
的末尾,之后调用它的submit()
方法提交数据。 -
从
<body>
里移除创建的<form>
, 避免污染页面元素。
-
-
注意: 如果新创建的
<form>
不添加到<body>
就提交,那么会报以下未绑定到document
的错误,是不能调用submit()
方法的。Form` submission canceled because the form is not connected
例子
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<span style="width:50px;display:inline-block"><label>名称:</label></span>
<input id="name" type="text" width="200px">
</div>
<p></p>
<div>
<span style="width:50px;display:inline-block"><label></label></span>
<button onclick="preview();" type="submit">提交</button>
</div>
<script>
function openBlank(action,data,blank)
let form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", action);
form.setAttribute("style","display:none");
if(blank)
form.setAttribute('target','_blank');
for(const one of data)
form.appendChild(createOneInputText(one.name,one.value));
let body = document.getElementsByTagName("body")[0];
body.appendChild(form).submit();
body.removeChild(form);
console.log("提交完成!");
console.log(body);
function createOneInputText(name,value)
let input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name",name);
input.setAttribute("value",value);
return input;
function preview()
let formArray = [];
let name = document.querySelector('#name');
formArray.push("name":"name","value":name.value);
formArray.push("name":"url","value":"https://blog.csdn.net/infoworld");
openBlank("#",formArray,true);
</script>
</body>
</html>
参考
以上是关于[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]的主要内容,如果未能解决你的问题,请参考以下文章
[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]
[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]
Scala核心编程_第08章 面向对象编程(中级补充)--java动态绑定与静态绑定