单击“提交表单”按钮后重新加载时显示隐藏的 div
我需要在用户单击提交表单按钮后在页面重新加载时显示一个div。
具体来说,我在显示/隐藏 div 中有一个 PHP 联系表单。单击联系人会显示和隐藏联系表单。显示/隐藏 js 和 php 联系表单都可以完美工作。 当用户点击提交时——页面会重新加载,并且“消息已发送”会写入联系表单 div 中。但是,当页面重新加载时,表单位于 CSS 中设置为 display: none; 的 div 中——这就是页面默认加载的方式。
提交后,我需要重新加载页面并在隐藏的 div 中显示联系表单。我不太确定从哪里开始,因为页面的所有 javascript 都会重新加载到默认值。另外,由于都是 PHP,我无法在 content_form div 中设置或调用锚点。
谢谢!
I need to show a div upon page reload after the user clicks on the submit form button.
Specifically, I have a PHP contact form in a show/hide div. Clicking on contact shows and hides the contact form. Both the show/hide js and the php contact form work perfectly.
When the user clicks submit -- the page reloads and the "message sent" is written in the contact form div. But when the page reloads, the form is in a div set to display: none; in the CSS -- which is how the page loads on default.
Upon submit, I need the page to reload and show the contact form in the hidden div. I'm not exactly sure where to start since all the javascript for the page reloads to default. Also since it's all PHP I can't set or call an anchor in the content_form div.
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我更喜欢 CSS 解决方案而不是 JS 解决方案。
编辑:为了让事情变得更简洁,我建议在提交成功的情况下向您的表单添加一个类。像这样:
然后,您可以在
display: none;
定义之后执行 CSS 定义,如下所示:I would prefer a CSS solution over a JS one.
Edit: Just to make things a little cleaner, I would suggest adding a class to your form if it was submitted successfully. Something like this:
Then, you could just do a CSS definition that comes after the
display: none;
definition, like so:仅当表单发送成功时,您才可以使用一些 PHP 代码编写脚本。
然后只需回显 JavaScript 将元素显示设置为阻止(类似于以下 PHP 代码):
You can use some PHP code to write a script only if the form was sent successfully.
Then just echo a JavaScript to set the element display to block (similar to the following PHP code):
Breakthrough的答案应该可以正常工作,但我个人不喜欢在标记中放置任何类型的成功或错误消息,即使在页面加载时情况并非如此,甚至被CSS隐藏。由于页面无论如何都会重新加载,因此这样做将根本不需要任何 JavaScript 或 CSS 来解决此问题:
Breakthrough's answer should work fine, but I personally don't like putting any kind of success or error message in the markup, even hidden by CSS, if it's not really the case at the time of the page load. Since the page is reloading anyway, doing this would eliminate the need for any JavaScript or CSS at all to resolve this:
如果表单加载了提交的内容,则可以使用 javascript 检测输入字段中是否存在文本。如果存在任何内容,请设置 display: block。
If you the form is loaded with the submitted content, you can use javascript to detect the presence of text in the input fields. If any content is present, set display: block.