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

Posted 2022-09-24 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_1

Scala核心编程_第08章面向对象编程(中级补充)--java动态绑定与静态绑定

type动态创建类