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，它展示了实现此目的的一种方法。基本上，您会在元素上添加一个id诸如，然后将其添加到您的 JavaScript：myformform

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

Answer 2

首先给 id 提交按钮。

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

然后写提交按钮的点击事件

jQuery("#submit-btn").click(function(e)) {
    e.preventDefault();
    jQuery('#first').hide();
    jQuery('#show').show();
}