javascript - 提交表单时切换输出

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 函数 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

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

在 javascript 中隐藏表单

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

请注意，如果您从 formcheck() 方法返回真实表单，表单将被提交并且页面将被刷新。