Question

我有这个代码，我需要在点击提交按钮时隐藏它...

<div>

<form method="get" action="?">
<br>
profil URL here => <input name="id" placeholder="YourProfileName"/ size="45"/><br>
Personal Code here => <input name="signature" placeholder="f8e62"/ size="45"/><br>
<input type="submit" class="btn" value="Submit" /> 
</form> </div>

Answer 1

正如Rohit Gupta在问题的评论中所说，这确实是使用Javascript的问题。

为了便于说明，我将使用一份人为的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form method="GET" action="?">
        <input type="text" name="bob" />
        <input type="submit" />
    </form>
</body>
</html>

另外，为了便于说明，我假设此时的网址为example.html。如果我在结果文本框中提供文本输入（例如我输入 cat ）并按下提交按钮，我将被重定向到URL example.html?bob=cat。这种行为可能不是你想要的，所以这将是第一件要解决的问题。

通过聆听表单的submit事件并阻止它（使用Event.preventDefault），可以防止表单提交的行为。我现在要进行两项更改 - 一种是创建一个新的script块，我将在其中插入一些代码，另一种是为表单分配name属性这更容易：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form name="myFirstForm" method="GET" action="?">
        <input type="text" name="bob" />
        <input type="submit" />
    </form>
    <script>
        document.forms['myFirstForm'].addEventListener('submit', function (event) {
            // Do something with the form's data here
            event.preventDefault();
        });
    </script>
</body>
</html>

通过命名表单，可以更容易地定位它（使用document.forms集合，它按名称公开表单）。另请注意，使用addEventListener订阅submit事件，我们希望阻止其默认行为。现在，单击“提交”似乎什么都不做。

因为我们禁止表单提交的默认行为，所以您现在必须自己使用Javascript来处理它。我不知道你的情况或你想要发生什么＆＃34;提交＆＃34;数据，并假设您将提出一些适当的行动。脚本中提供了注释，作为该未知行为的占位符。

最后，您表示要隐藏表单。有许多方法可以通过花哨的过渡来解决这个问题，但我将以最简单的方式解决这个问题：在表单上将CSS display属性设置为none：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form name="myFirstForm" method="GET" action="?">
        <input type="text" name="bob" />
        <input type="submit" />
    </form>
    <script>
        document.forms['myFirstForm'].addEventListener('submit', function (event) {
            // Do something with the form's data here

            this.style['display'] = 'none';
            event.preventDefault();
        });
    </script>
</body>
</html>

现在，当您提交时，表单会消失（它仍然存在于DOM中，但在页面上将不再可见）。

此插图未涵盖您可能感兴趣的广泛主题，例如使用Ajax在某处提交表单数据，使用Javascript验证输入，处理提交错误以及其他我和也许没有考虑过。

单击提交按钮后隐藏表单

1 个答案: