Question

我正在尝试从文本输入中获取文本，将其附加到URL，然后使用Javascript转到该URL。但是当我提交时，它似乎只是重新加载页面。

<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="main.css" />
        <script type="text/javascript">
            function loadSearchResult(searchToLoad) {
                window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
            }
        </script>
    </head>
    <body>
        <form onsubmit="loadSearchResult(document.getElementById('googleBox').value)" method="post">
            <fieldset>
                <legend>Search</legend>
                <input type="text" id="googleBox">
            </fieldset>
        </form>
    </body>
</html>

Answer 1

您需要在提交功能中使用event.preventDefault()。

<强> Live Demo (click).

此外，由于很多原因，内联js（你的html中的onsubmit）是不好的做法。以下是一些：https://www.google.com/search?q=Why+is+inline+js+bad%3F

如果用javascript获取对表单的引用并附加事件监听器会更好。

<form id="myForm">
  <input type="submit" value="Submit">
</form>

<强> JavaScript的：

var myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(e) {
  myFunction();
  e.preventDefault();
});

function myFunction() {
  console.log('submitted!'); 
}

Answer 2

您需要阻止onsubmit的默认行为您可以使用return false：

<html>
    <head>
        <title>Home</title>
        <link rel="stylesheet" href="main.css" />
        <script type="text/javascript">
            function loadSearchResult(searchToLoad) {
                window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
                return false;
            }
        </script>
    </head>
    <body>
        <form onsubmit="return loadSearchResult(document.getElementById('googleBox').value)" method="post">
            <fieldset>
                <legend>Search</legend>
                <input type="text" id="googleBox">
            </fieldset>
        </form>
    </body>
</html>

Javascript加载页面无法正常工作

2 个答案: