HTML 提交按钮正在离开页面答案

【问题标题】：HTML Submit Button Is Navigating Away From the PageHTML 提交按钮正在离开页面
【发布时间】：2018-10-05 01:26:47
【问题描述】：

我有一个带有提交按钮的移动应用。当我输入参数并点击提交时，我希望页面重新加载并显示新值。出于某种原因，当我单击提交时，它会导航到 index.html。我不能让它停下来。我试过 event.preventDefault();和 action = "saved_locations.html" 但这将我带到了应用程序外部页面的一个奇怪的纯 html 版本。

<div class="pages">
<div data-page="saved_locations" id="saved" class="page navbar-through no-toolbar" align="center">
    <h2><br><u>Enter A Location<br><br></u>
        <form id="enter_location">
            Latitude: <input type="text" id="Latitude" value=""><br>
                Longitude: <input type="text" id="Longitude" value=""><br>
                    Location: <input type="text" id="Location" value=""><br>
                    <input type="submit" value="Submit">
        </form>
    <h2><u>Saved Locations</u></h2>

            </div>
</div>

【问题讨论】：

您的<form> 无效-您应该提供一个方法（即post / get），并且action 参数会很有用。
因为form中没有action，所以页面只会提交给root。
表格无效怎么办？它确实将值提交给 localStorage。是否有刷新当前页面而不是进入根目录的操作？

标签： javascript html

【解决方案1】：

这就是正确的 HTML 表单的外观。我将在这里做一个基本的例子：

function showData() {
let x = document.getElementsByTagName("input")[0].value;
let y = document.getElementsByTagName("input")[1].value;
let z = document.getElementsByTagName("input")[2].value;
alert(`For the location ${z} the latitude is ${x} and the longitude is ${y}`);
}

form {
font-weight: bold;
letter-spacing: 3px;
color: blue;
}

<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>

    <form action="https://stackoverflow.com/questions/52657111/html-submit-button-is-navigating-away-from-the-page">
      Latitude:<br>
      <input type="text" name="Latitude" value=""><br>           <hr/>
      Longitude:<br>
      <input type="text" name="Longitude" value=""><br><hr/>
       Location:<br>
      <input type="text" name="Location" value=""><br><hr/>
      <input type="submit" value="Submit" onclick="showData()">
    </form>
        
        <p id="demo"></p>

</body>
</html>

像 cmets 建议的其他人一样，您错过了一个动作。以下是为什么需要以及如果省略会发生什么的简要说明：动作属性 action 属性定义了提交表单时要执行的操作。

通常，当用户单击提交按钮时，表单数据会发送到服务器上的网页。

在上面的示例中，表单数据被发送到服务器上名为“/server_side.php”的页面。此页面包含处理表单数据的服务器端脚本。

<form action="/server_side.php">

如果省略了 action 属性，则将 action 设置为当前页面。 - [在您的情况下为 root 索引页面]。

【讨论】：

好的。 Action="saved_locations" 使其在单击提交后停留在页面上。所以这很好。现在我只需要弄清楚点击提交后如何刷新页面。目前，如果我离开页面并返回，新值就在那里。我有一个函数可以在加载此页面时从 localStorage 动态创建 div 链接。如果我尝试调用那个 onclick，它会使位置加倍。我忘了提到我有一个用于提交的事件侦听器，它将输入保存到 localStorage。这是一个小提琴：jsfiddle.net/#run&togetherjs=Db5tsSFJPe
浏览器的默认行为是在submit 事件之后刷新页面。通常，人们希望避免这种行为。这意味着，将数据发送到后端，获取响应，在保持在同一页面上且无需重新加载的情况下对其进行处理。（所以当前数据不会丢失）location.reload(); 会这样做。由于 SUBMIT 需要一些时间，这将是一个不错的方法，使用 setTimeOut 并将其设置为适当的值。 onsubmit="setTimeout(function(){window.location.reload();},10)所以浏览器有足够的时间提交表单然后重新加载页面
我尝试在 html div 和 JS 的事件监听器中添加 onsubmit="setTimeout(function(){window.location.reload();},10)" 。两个选项都不起作用。
那么，你试过运行我的代码 sn-p 吗？它接受你的输入，用它做一些事情，重新加载页面，并保持在同一个页面上，因此重新加载:)
您的服务器端点设置不正确，因此在此服务器上。。如果您将数据从HTML 表单发送到example/1，则需要有一个相应的服务器路由example/1 来捕获该数据，之后您可能想要对它做一些事情（将其保存到数据库，进行计算，以某种形式更改它）并以更改的数据（您之前在后端配置）或/和至少某种类型的验证（成功，错误）的形式将响应发送回您的客户端。这完全取决于您以及如何配置您的路由，但它们必须匹配。

【解决方案2】：

原来问题在于我的应用程序使用的是 Framework7。 window.location.reload();不起作用，但这样做：

setTimeout(mainView.router.refreshPage(),5);

【讨论】：