HTML多页表单,显示隐藏表单数据的隐藏部分

时间:2015-03-05 12:04:09

标签: javascript html5 forms css3

这是我的问题我希望有一个类似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);
}

1 个答案:

答案 0 :(得分:0)

i am not sure whether this is the solution you need. 

    form1.php
    <html>
    <body>
    <form action="#" method="post">
        This is first form..
        <input type="submit" name="form_2" value="submit form1">
        <?php
        if(isset($_POST['form_2'])) {
            include("form2.html");
        }
        ?>
    </form>
    </body>
    </html>

form2.php

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

这将在同一页面上显示第二个表单,但您必须css才能显示form2