Question

我有一个带有提交按钮的移动应用程序。输入参数并点击Submit时，我希望页面重新加载并显示新值。由于某些原因，当我单击“提交”时，它导航到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>

Answer 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>

与其他在建议的评论中一样，您缺少动作。这是为什么需要的简要说明，如果省略了会发生什么：动作属性 action属性定义提交表单时要执行的操作。

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

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

<form action="/server_side.php">

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

Answer 2

事实证明，问题在于我正在为我的应用程序使用Framework7。 window.location.reload（）;不起作用，但这可以：

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

HTML提交按钮正在离开页面

2 个答案: