javascript – 在提交表单后隐藏带有表单的div并显示隐藏的div

所以我有这个

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

解决方法:

您可以添加onsubmit处理程序.如果不使用第三方库(如jQuery),这是使用内联JavaScript执行此操作的基本方法：

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

无论何时提交表单,都会触发onsubmit,例如,通过以编程方式单击“提交”按钮,或者如果用户在文本字段中按Enter键.

但是,我会建议你使用jQuery和比这种内联方法更不引人注目的方法.如果你想看看如何用jQuery做到这一点,这里有一个jsFiddle,显示了实现这一目标的一种方法.基本上,您可以在表单元素上添加一个id,例如myform,然后将其添加到JavaScript中：

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

标签：onsubmit,show,javascript,forms,hide
来源： https://codeday.me/bug/20190729/1569206.html