gpt4 book ai didi

html - 提交时动态隐藏表单?

转载 作者:行者123 更新时间:2023-12-01 22:45:49 27 4
gpt4 key购买 nike

我不是一个大的网络程序员,有一个 friend 想让我帮他做点什么。

他希望能够有一个表单,一旦提交就可以更改为说“感谢提交”之类的内容,并让表单信息消失。他希望任何人都可以轻松使用它,这样他就可以将它提供给不同的人在他们的网站上使用。

我想我可以使用 javascript 来做到这一点,但并不是 100% 确定。我想尽可能避免任何非 HTML 的内容,以便尽可能多的人使用它。

谢谢。

最佳答案

表单中的信息应该如何处理?没关系?

如果您希望它是 HTML,那么只有一个好的解决方案:编写一个带有表单的 HTML 页面,另一个几乎相同的页面包含成功消息并隐藏表单数据。简单。

在提交端:

<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>

在接收端(successForm.html)

<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>

但是,如果您需要在同一个页面上更改某些内容,您将不得不使用非 HTML 内容。 HTML 只是不会决定要显示什么。这是愚蠢的...它只是显示。

很容易使用 JavaScript 来检测表单何时提交,然后隐藏您需要隐藏的元素,并且 < strong>显示成功消息:

<!-- Goes in the <head> or in a seperate script -->
<script type="text/javascript">
var theSubmitButton = document.getElementById('formSubmit');

theSubmitButton.onclick = function() {
var theFormItself =
document.getElementById('theForm');
theFormItself.style.display = 'none';
var theSuccessMessage =
document.getElementById('successMessage');
theSuccessMessage.style.display = 'block';
}
</script>

<!-- Goes in the body -->
<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
<input type="text" name="emailAddress" />
<button id="formSubmit" type="submit">Send Info</button>
</form>

当然,这个例子过于简单了。它不对数据做任何事情,也不遵循最佳实践,也不以任何方式检查数据是否有效。我只是想给出一个关于如何为此目的使用 JavaScript 的基本概念。如果您不是程序员,那么开发一个小型的、可分发的软件对其他人来说可能是一份不错的工作。

但是,您仍然需要某种机制来存储、通过电子邮件发送或以其他方式对表单进行操作。对您的问题进行修改,我很乐意通过具体示例阐明我的答案。

(另一个注意事项,我没有尝试运行那个 Javascript,所以如果您看到错误,请注意,我会修复它)

关于html - 提交时动态隐藏表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/656082/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com