0

所以我有一个表格，当填写表格并按下提交时，我希望表格被“隐藏”起来并出现一些图像。

但是，我目前被困在“隐藏”表单上，因为在用户按下页面上的后退按钮（而不是浏览器上）后，我需要表单再次出现，而且我还需要将表单上的值提前按下提交后到该页面。

形式：

<form id = "step1" onsubmit = "return formcheck()">
                <p>
                    Creator:
                    <select name="creator" id = "creator">
                        <option></option>
                        <option name = "abc" value = "nba">nba</option>
                        <option name = "abc" value = "abc"> oiasfn</option>
                    </select>
                </p>
                <p>
                    Trip Title:
                    <select name="title" id = "title">
                                            <option></option>
                        <option value = "cba">cbz</option>
                    </select>
                </p>
                <p>
                    Device:
                    <select name="device" id = "device">
                        <option name = "SN" value = "SN">Samsung Note</option>
                        <option name = "abc" value = "abc"> oiasfn</option>
                    </select>
                </p>
                <p>
                    No. of devices:
                    <select id = "deviceno" name = "deviceno">
                        <option></option>
                                            <option value = "1">1</option>
                    </select>
                </p>
                <p>
                    <input type="submit" name="next" id="next" value="Next"></input>
                </p>
            </form>

javascript函数表单检查（）：

function formcheck()
{
    var Ccreator = document.getElementById('creator').value;
    var Ctitle = document.getElementById('title').value;
    var Cdevice = document.getElementById('device').value;
    var Cdeviceno = document.getElementById('deviceno').value;

    if(Ccreator == ""||Ctitle == ""||Cdevice == ""||Cdeviceno == "")
    {
        alert("Form incomplete!");
        return false;
    }
    else
    {
        $("#step1").hide();
        return true;
    }
}
4

4 回答 4

1

您的问题是在验证您返回“true”的表单值之后。所以表单被提交并且页面被刷新然后你的文件再次进入初始状态并且表单变得可见

于 2013-07-17T07:37:24.290 回答
1

确保您已将jQuery包含到您的 html 脚本中，因为$(form).hide()不是纯 js 方法，请在此处查看工作演示。您可以通过以下方式在 javascript 中隐藏表单

document.getElementById("your form id").style.display="none";

请注意，如果您通过 formcheck() 方法返回 true 表单，则表单将被提交并且页面将被刷新。

于 2013-07-17T07:39:00.827 回答
0

您可以使用 jquery ui 选项卡http://jqueryui.com/tabs/ 或某种分页，例如这个插件http://archive.plugins.jquery.com/project/pagination

于 2013-07-17T06:49:24.253 回答
0 
<form id="step1">
            <p>
                Creator:
                <select name="creator" id = "creator">
                    <option></option>
                    <option name = "abc" value = "nba">nba</option>
                    <option name = "abc" value = "abc"> oiasfn</option>
                </select>
            </p>
            <p>
                Trip Title:
                <select name="title" id = "title">
                                        <option></option>
                    <option value = "cba">cbz</option>
                </select>
            </p>
            <p>
                Device:
                <select name="device" id = "device">
                    <option name = "SN" value = "SN">Samsung Note</option>
                    <option name = "abc" value = "abc"> oiasfn</option>
                </select>
            </p>
            <p>
                No. of devices:
                <select id = "deviceno" name = "deviceno">
                    <option></option>
                                        <option value = "1">1</option>
                </select>
            </p>
            <p>
                <input type="submit" name="next" id="next" value="Next"></input>
            </p>
        </form>

jQuery：

$('#next').click(function(){
    return false;
    $('#step1').hide();
    // show anything here.
})
于 2013-07-17T07:32:06.267 回答