javascript - 提交表单后用表单隐藏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这显示了实现此目的的一种方法。基本上，您可以在 form 元素上添加一个 id，例如 myform，然后将其添加到您的 JavaScript 中:

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