Question

我有一个内容相当多的页面，后跟一个由php + html组成的表单。

当用户点击提交时我遇到的问题是页面突然向上滚动到页面顶部（到内容，而不是表单）

-----------------

Content stuff --> 2. jumps to here

Form
Submit button --> 1. press this button
-----------------

我希望页面保留表单，以便我可以处理信息并显示我想要的任何内容（例如，带有确认信息的显示），而无需用户拥有按下提交按钮后向下滚动页面。

使用常规链接我可以通过制作锚标签来解决这个问题，但我不知道如何使用提交按钮处理这个问题......

Answer 1

您可能希望通过执行异步调用（Ajax）来通过JavaScript提交表单，以便不需要刷新页面。

这是一个简单的例子（使用jQuery）：

// this is the id of the submit button
$("#submitButtonId").click(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    return false; // avoid to execute the actual submit of the form.
});

注意，你需要有jQuery - 如果你不喜欢jQuery，你可以把它作为一个例子，我只是给你一个想法.. -

Answer 2

您是否尝试过使用命名锚点？

如果没有，请参阅w3schools网站上的说明：named anchors

如何使页面不跳转表单提交

2 个答案: