2

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

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

我在想我可以使用 javascript 来做到这一点，但不是 100% 确定。我想尽可能避免任何不是 HTML 的东西，以便尽可能多的人使用它。

谢谢。

4

5 回答 5

6

表格中的信息应该如何处理？没关系？

如果您希望它是纯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 检测表单何时提交，然后隐藏需要隐藏的元素，并显示成功信息：

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

于 2009-03-17T21:34:38.400 回答
1

Try the jquery form plugin. This will achieve what you're after in an elegant way with minimal coding. In addition to this you'll need to download jquery.

This is a javascript solution, however it's safe to assume that everyone is using a javascript capable browser.

于 2009-03-17T21:36:15.637 回答
0

The standard way to do this is to submit the form to a different page (submit.php, for example), which provides a new page with the thankyou message. No javascript, no DHTML.

You could use javascript to replace the innerHTML of a huge div containing everything, or remove all the elements, but I'd advise against it.

于 2009-03-17T21:36:38.147 回答
0

There's 2 options:

  1. Old school forms: Person clicks submit and form data gets sent server side via GET or POST, the page loads again and displays "Thanks for submitting"

  2. New school javascript AJAX Person clicks submit and javascript submits form data to server side via AJAX and removes the form elements to then add "Thanks for submitting"

Anything else is some hybrid of both these techniques.

于 2009-03-17T21:37:28.287 回答
0

I know you want to avoid anything other than html but this simple php code may help. You could use php within the page

  • fill out form and press submit to send data to form handler
  • In form handler, have data processed and then redirect back to the form page with a header('Location: yourwebaddresshere?form=submited');

Then in the original form page, add a php IF statement above the form code:

$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
}
于 2017-04-08T23:46:50.970 回答