提交联系表格后如何到达页面上的特定位置？

Question

单击提交按钮后，它将自动转到页面顶部。 尤其是在移动设备上，您将看不到“谢谢”消息（谢谢您的消息）。 在下面，您将找到代码。

<input type="submit" id="submit" name="submit" value="Send Message">
</div><!-- end .submit -->
</form>
<?php else: ?>
<p style="font-size:13pt; font-weight:bold; font-family:Cambria, Times, 'Times New Roman', serif; color:#0F243E; margin-left:0px;">Thank you for your Message!</p>
<script type="text/javascript"> 
setTimeout('ourRedirect()', 9000)
function ourRedirect () {
location.href='../'
}
</script>
<?php endif; ?>
</div> <!-- end form -->

我一直在尝试各种方法，但似乎都没有用。 有人有主意吗？ 谢谢！

Answer 1

您可以尝试使用javascript提交表单，而无需使用ajax重新加载。 jQuery滚动很不错，但是重新加载表单时，您必须查找是否抛出任何消息，然后必须指出位置。

我建议您使用Ajax表单提交而不重新加载页面。 在此处输入链接说明

Answer 2

注意：

此解决方案立即显示该消息，但仅在以后提交表单，这可能不是您想要的。 如果用户在单击后9秒钟内关闭了页面，则根本没有执行提交！

解决方案是使用AJAX，它需要比此处所示更多的知识和代码。

---

如果你有一个

<input type="submit" id="submit" ...

它将立即提交页面，这不是您想要的。

相反，使用

<input type="button" id="submit" ...

您将看到该消息，并且不会向上滚动...

但是它也不会提交表格。 因此，请使用此JS而不是您的JS：

document.getElementById("submit").onclick = function ()
{
  // show message here, e.G. by setting "display: block"

  setTimeout(function () {
    document.getElementById("my-form").submit();
  }, 9000);
};

<form>必须具有id="my-form"或您喜欢的任何其他标识符。

有关如何隐藏/显示消息等的更多详细信息，我将指导您使用类似的方法：

<p id="message" style="display: none;" ...

并在注释行上显示“ //在此处显示消息”：

document.getElementById("message").style = "display: block;";

Answer 3

我自己找到了一个简单的解决方案。

只需添加#thanks或您要解决的其他任何名称。

<form action="yourpage.php#thanks">

提交后，将代码放在您希望放置的任何位置下方。

<a name="thanks"></a>