提交聯系表格后如何到達頁面上的特定位置？

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>