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

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>

然后编写提交按钮的Click事件

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

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

2 个答案: