单击“提交表单”按钮后重新加载时显示隐藏的 div

发布于 2024-08-02 15:39:09 字数 415 浏览 4 评论 0原文

我需要在用户单击提交表单按钮后在页面重新加载时显示一个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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

在风中等你 2024-08-09 15:39:09

我更喜欢 CSS 解决方案而不是 JS 解决方案。

if ($form_is_valid)
    echo '<style type="text/css">#contact { display: block; }</style>';

编辑:为了让事情变得更简洁,我建议在提交成功的情况下向您的表单添加一个类。像这样:

$class = $form_is_valid ? ' class="submitted"' : '';
echo '<form method="..." action="..."' . $class . '>...</form>';

然后,您可以在 display: none; 定义之后执行 CSS 定义,如下所示:

form.submitted { display: block; }

I would prefer a CSS solution over a JS one.

if ($form_is_valid)
    echo '<style type="text/css">#contact { display: block; }</style>';

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:

$class = $form_is_valid ? ' class="submitted"' : '';
echo '<form method="..." action="..."' . $class . '>...</form>';

Then, you could just do a CSS definition that comes after the display: none; definition, like so:

form.submitted { display: block; }
摇划花蜜的午后 2024-08-09 15:39:09

仅当表单发送成功时,您才可以使用一些 PHP 代码编写脚本。

然后只需回显 JavaScript 将元素显示设置为阻止(类似于以下 PHP 代码):

if($form_is_valid)
{
    echo '<script type="text/javascript">'
       . 'document.getElementById("elementID").style.display = "block";'
       . '</script>';
}

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

if($form_is_valid)
{
    echo '<script type="text/javascript">'
       . 'document.getElementById("elementID").style.display = "block";'
       . '</script>';
}
黑白记忆 2024-08-09 15:39:09

Breakthrough的答案应该可以正常工作,但我个人不喜欢在标记中放置任何类型的成功或错误消息,即使在页面加载时情况并非如此,甚至被CSS隐藏。由于页面无论如何都会重新加载,因此这样做将根本不需要任何 JavaScript 或 CSS 来解决此问题:

<?php if ($form_is_valid) include('SnippetFileWithSuccessMessageDivInIt.php') />

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:

<?php if ($form_is_valid) include('SnippetFileWithSuccessMessageDivInIt.php') />
╰ゝ天使的微笑 2024-08-09 15:39:09

如果表单加载了提交的内容,则可以使用 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文