Javascript HTML多页表单，显示保存表单数据的隐藏部分_Javascript_Html_Forms_Css

Javascript HTML多页表单，显示保存表单数据的隐藏部分

javascript html forms css

Javascript HTML多页表单，显示保存表单数据的隐藏部分,javascript,html,forms,css,Javascript,Html,Forms,Css,这是我的问题，我希望有一个25页的表单，所以我希望避免有一个巨大的页面永远滚动理想情况下，我希望在运行时加载外部html文件，同时在用户提交表单数据之前保留表单数据当用户点击链接时，我用一个很酷的菜单创建了一个初始页面，我想用另一个html文件中的内容替换内容我尝试使用javascript函数并替换为iframe，但它并没有按照我希望的方式工作。有了足够的调试，我可以让它工作，但似乎必须有一个更好的方式来进行这件事因为有时候看起来很难的问题有时候用另一种方法会容易得多，所以请启发我 f

这是我的问题，我希望有一个25页的表单，所以我希望避免有一个巨大的页面永远滚动

理想情况下，我希望在运行时加载外部html文件，同时在用户提交表单数据之前保留表单数据

当用户点击链接时，我用一个很酷的菜单创建了一个初始页面，我想用另一个html文件中的内容替换内容

我尝试使用javascript函数并替换为iframe，但它并没有按照我希望的方式工作。有了足够的调试，我可以让它工作，但似乎必须有一个更好的方式来进行这件事

因为有时候看起来很难的问题有时候用另一种方法会容易得多，所以请启发我

function ContentMap()
{
    var __contentMap = [];
    var __index = 0;
    this.length  = function()
    {
        return __contentMap.length;
    }
    this.addContentMap = function(htmlContent)
    {
        __contentMap.push(htmlContent);
        __index++;
        console.log(htmlContent["id"]);
    }
    this.getContentMap = function(contentId)
    {
        for(q=0;q<__contentMap.length;q++)
        {
            if(contentId.localeCompare(__contentMap[q].id)==0)
            {
                return _contentMap[q];  
            }
        }
    }
    this.getPreviousMap = function()
    {
        if(this.length()>0&&index>0)
        {
            index--;
            return _contentMap[index];  
        }
        else
        {
            return null;
        }
    }
}
var contentMap = new ContentMap();
function replaceContent(contentId,replacementId)
{
    citem = document.getElementById(contentId);
    for(__i=0;__i<citem.childNodes.length;__i++)
    {
        contentMap.addContentMap(citem.childNodes.item(__i));
        citem.removeChild(citem.childNodes.item(__i));
    }
    iframe = document.createElement("IFRAME");
    iframe.setAttribute("src",replacementId);
    iframe.style.width = document.getElementById(contentId).width;
    iframe.style.height = document.getElementById(contentId).height;
    citem.appendChild(iframe);
}

函数ContentMap（）
{
var__contentMap=[]；
var _指数=0；
this.length=函数（）
{
返回_contentMap.length；
}
this.addContentMap=函数（htmlContent）
{
__contentMap.push（htmlContent）；
__索引++；
日志（htmlContent[“id”]）；
}
this.getContentMap=函数（contentId）
{
对于（q=0；q0&&index>0）
{
索引--；
返回内容映射[索引]；
}
其他的
{
返回null；
}
}
}
var contentMap=new contentMap（）；
函数replaceContent（contentId，replacementId）
{
citem=document.getElementById（contentId）；
对于（_i=0；_i我不确定这是否是您需要的解决方案。
form1.php
这是第一种形式。。

form2.php
<html>
This is second form.
</html>


这是第二种形式。

这将在同一页面上显示第二个表单，但您必须使用css才能仅显示表单2是否允许使用PHP？您可以使用javascript保存以前的值，但这意味着有许多变量或大数组，或者您可以使用本地存储来保存此数据，同时更改导航到不同页面/directori的页面内容如何使用本地存储—这可能取决于表单，问题是否会因对另一个页面的回答而有所不同，或者问题是否已设置……您是否可以尝试在移动到下一页时将每个页面的数据附加到javascript对象中，最后在提交表单时发布此object..@shridhar是的，如果我愿意，我可以使用PHP，你有什么建议？@NewToJS是的，访问存储也可以，我正在考虑做一些类似onClick=（'containerId'，'replaceWithUrl'的事情）只是让函数存储html像这样是我一直在玩弄的东西，几乎可以工作，但是iframe被发送到屏幕的底部，出于某种原因，它的大小不是从发送到函数的containerId获得的，而是实际的节点剪辑大小？？？WT%参见代码bellow如果这不是您正在寻找的解决方案，请告诉我是否可能是票证？您认为使用“后退”按钮有效吗？在编码的“我添加的子节点”上，未删除子节点？？？表单加载到iframe中，但在屏幕底部？？无调试错误单击“后退”按钮后，jquery将隐藏form2并仅显示form1的内容。
<html>
This is second form.
</html>