在提交时动态隐藏表单？ [英] Dynamically hide form on submit?
问题描述
我不是一个大的网络程序员，并且有一个朋友希望我能帮助他。
他希望能够拥有一次形式它会提交更改以表示感谢提交，并使表单信息消失。他希望任何人都可以轻松使用它，所以他可以将它提供给各种用户在他们的网站上使用。
我想我可以使用javascript来做到这一点，但不是100％确定的。我希望尽可能避免任何不是HTML的内容，以便尽可能多的人使用。
谢谢。
表单中的信息应该发生什么？没关系？
如果您希望它是纯粹的 HTML，那么只有一个好的解决方案：用一个表单编写一个HTML页面，成功消息到位并隐藏表单数据。简单。
在提交方：
< h1>电子邮件订阅：< / h1>
< form action =successForm.html>
< input type =textname =emailAddress/>
< button type =submit>发送信息< / button>
< / form>
在接收端（successForm.html）
< h1>电子邮件订阅：< / h1>
< p>伟大的工作，您提交！< / p>
然而，如果您需要在同一页面上更改某些内容，您将不得不使用非HTML的东西。 HTML不会就显示内容做出任何决定。它是愚蠢的...它只是显示。
使用JavaScript很容易检测表单何时提交，然后 隐藏 和 显示成功讯息：
<！ - 进入< head>或者在一个单独的脚本中 - >
< 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>
<！ - 进入正文 - >
< h1>电子邮件订阅：< / h1>
< p id =successMessage>您提交了表单，做得很好！< / p>
< form id =theFormaction =successForm.html>
< input type =textname =emailAddress/>
< button id =formSubmittype =submit>发送信息< / button>
< / form>
当然，这个例子过于简单。它不会对数据做任何事情，也不会遵循最佳实践，或者检查数据是否以任何方式有效。我只是想给出一个关于如何为此使用JavaScript的基本概念。如果你不是一个程序员，那么想出一个小的，可分发的软件可能对别人来说是一件好事。
然而，你仍然需要一些机制存储，发送电子邮件或以其他方式处理表单。添加一个编辑到你的问题，我会很乐意澄清我的答案，一个具体的例子。
（另一个说明，我没有尝试运行该Javascript，所以如果你看到一个错误，请注意，我会解决它）
I am not a big web programmer, and have a friend who wants me to help him with something.
He wants to be able to have a form that once it is submitted changes to say something like "Thanks for submitting" and have the form info disappear. He wants it to be easy for anyone to use, so he can give it to various people to use on their sites.
I was thinking I could use javascript to do it, but not really 100% sure. I want to avoid anything that isn't HTML as much as possible so that it will be usable by as many people as possible.
Thanks.
What is supposed to happen to the information in the form? Doesn't matter?
If you want it to be pure HTML there's only one good solution: Write one HTML page with the form, and another almost identical one with the success message in place and the form data hidden. Simple.
On the submitting side:
<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>
On the receiving side (successForm.html)
<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>
However, if you need something to change on the very same page, you're going to have to use something non-HTML. HTML just won't make any decisions about what to display. It is dumb... it just displays.
It's very easy to use JavaScript to detect when the form was submitted, and then hide the elements you need to hide, and show the success message:
<!-- 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>
Of course, this example is oversimplified. It doesn't do anything with the data, and it doesn't follow best practices, or check that the data is valid in any way. I'm just trying to give a basic idea of how to use JavaScript for this purpose. If you're not a programmer, then coming up with a small, distributable piece of software might be a good job for someone else.
However, you still need some mechanism to store, email or otherwise DO something with the form. Add an edit to your question and I'll be happy to clarify my answer with a specific example.
(Another note, I didn't try to run that Javascript, so if you see an error, please just note and I'll fix it)
这篇关于在提交时动态隐藏表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
