Question

所以我有一个表单，当表单被填充并按下提交时，我希望表单被“隐藏”掉，并显示一些图像。

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

形式：

<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（）：

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

Answer 1

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

Answer 2

确保您已将jQuery包含在您的html脚本中，因为$(form).hide()不是纯粹的js方法，请检查工作演示here。您可以通过

在javascript中隐藏表单

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

请注意，如果您从formcheck（）方法返回true，则会提交表单并刷新页面。

Answer 3

你可以使用jquery ui tabs http://jqueryui.com/tabs/ 或者像这个插件http://archive.plugins.jquery.com/project/pagination

那样的某种分页

Answer 4

<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.
})

提交表格后切换输出

4 个答案: