Question

我不是一个大型网络程序员，并且有一位朋友希望我帮助他。

他希望能够拥有一个表单，一旦提交了更改，请说“感谢提交”并让表单信息消失。他希望任何人都可以轻松使用它，因此他可以将它提供给不同的人在他们的网站上使用。

我以为我可以用javascript来做，但不是真的100％肯定。我希望尽可能避免任何非HTML的内容，以便尽可能多的人使用它。

感谢。

Answer 1

表格中的信息会发生什么？没关系？

如果您希望它是纯 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，所以如果您看到错误，请注意，我会修复它）

Answer 2

试试jquery form plugin。这将以最少的编码以优雅的方式实现您所追求的目标。除此之外，您还需要下载jquery。

这是一个javascript解决方案，但可以安全地假设每个人都在使用支持JavaScript的浏览器。

Answer 3

执行此操作的标准方法是将表单提交到其他页面（例如submit.php），该页面提供带有thankyou消息的新页面。没有javascript，没有DHTML。

您可以使用javascript替换包含所有内容的巨大div的innerHTML，或删除所有元素，但我建议反对它。

Answer 4

有两个选项：

旧校形式：人员点击提交，表格数据通过GET或POST发送到服务器端，页面再次加载并显示“感谢提交”
新学校的javascript AJAX 人点击提交，javascript通过AJAX将表单数据提交到服务器端并删除表单元素，然后添加“感谢提交”

其他任何东西都是这两种技术的混合体。

Answer 5

我知道你想避免除了html以外的任何东西，但这个简单的PHP代码可能有所帮助。你可以在页面中使用php

填写表单并按提交以将数据发送到表单处理程序
在表单处理程序中，处理数据，然后使用header('Location: yourwebaddresshere?form=submited');

然后在原始表单页面中，在表单代码上方添加一个php IF语句：

$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; 

if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}

在提交时动态隐藏表单？

5 个答案: