提交表单后，使用表单隐藏div并显示隐藏的div

Question

所以我有这个

    <div id="first" class="1" style="display:">
        <form>
            <input type=submit>
        </form>
    </div>
    <div id="second" class="2" style="display:none">
        test
    </div>

提交表单（按下按钮）后，我想切换显示选项。我希望单击提交按钮后脚本变成这样

    <div id="first" class="1" style="display:none">
        <form>
            <input type=submit>
        </form>
    </div>
    <div id="second" class="2" style="display:">
        test
    </div>

Answer 1

您可以添加一个onsubmit处理程序。不使用第三方库（例如jQuery），这是使用内联JavaScript的一种基本方法：

<form onsubmit="document.getElementById('first').style.display = 'none';document.getElementById('second').style.display = '';">

在onsubmit每次提交表单时被触发，无论是通过点击Submit按钮，程序，或者如果用户点击Enter一个文本字段，例如。

但是，我建议您使用jQuery和比这种内联方法更不引人注目的方法。如果您想了解如何使用jQuery，请使用jsFiddle，其中显示了完成此任务的一种方法。基本上，您可以在元素上添加id诸如这样myform的form元素，然后将其添加到您的JavaScript中：

$(document).ready(function() {
    $("#myform").submit(function(e) {
        $("#first").hide();
        $("#second").show();
    });
});