[JavaScript]_[中级]_[动态创建表单并提交到新页面_实现后台内容预览]

场景

在开发JavaWeb后台功能的时候，有时候需要对正在编辑的表单里的数据进行前端模拟预览，这样能提前发现问题并修正，修正完之后就可以正式提交。好处就是避免了让客户浏览到错误的数据，那么如何做？

说明

要完成预览功能，首先前端的表单里的元素，包括输入框、下拉列表和富文本框等内容是需要获取最新的内容的。我们分析可以满足哪些要求:
- 需要打开新的窗口来预览页面，这样正在编辑的页面数据就不会丢失。这需要target="_blank"的属性，
  正好有这个属性值。因此完成这个预览功能需要form的submit()方法。
- 当编辑区域有多个是时，数据可以合并到一个并提交。
- 如果预览只需要某些数据，而不是里的所有数据，那么就需要创建一个新的来提交。
动态创建和数据步骤:
- 通过document.createElement("form")创建Node对象。
- 通过form.setAttribute("method", "post")来设置一些必要的属性。
- 通过form.appendChild();添加存储数据用的子元素。
- 把新的添加到的末尾，之后调用它的submit()方法提交数据。
- 从里移除创建的, 避免污染页面元素。
注意: 如果新创建的不添加到就提交，那么会报以下未绑定到document的错误，是不能调用submit()方法的。
```
Form` submission canceled because the form is not connected
1
```

例子

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

参考

相关阅读:
微信小程序链接快速生成方法
使用搭载骁龙 8 Gen 3 的安卓手机运行 AI 大模型
MCE | 免疫检查点大组团
PyCharm 2023.3.2 关闭时一直显示正在关闭项目
「网页开发｜前端开发｜Vue」09 Vue状态管理Vuex：让页面根据用户登录状态渲染不同内容
flink集群与资源@k8s源码分析-资源II 资源提供
你真的会使用《断点》吗
webp动图转gif
超全！Python图形界面框架PyQt5使用指南！
【排序 - 堆排序】

原文地址：https://blog.csdn.net/infoworld/article/details/126977263