單擊按鈕時鏈接到另一個HTML文檔

Question

我正在嘗試單擊按鈕時重定向到另一個HTML文檔。 這是我的js代碼：

$('#getTextBoxValue').on("click", function(){
var value = $("#textbox1").val();
});

$('#getTextBoxValue').click(function() {
    window.location.href = 'view.html';
    return false;
});

這是我的html代碼：

<form class="col-lg-12">
            <div class="input-group" style="width:500px;text-align:center;margin:0 auto;">
            <input class="form-control input-lg" placeholder="Enter single quote-surrounded link" type="textbox" id="textbox1"></input>
              <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="submit" id= "getTextBoxValue">Submit</button></span>
            </div>
          </form>
    <script src="js/script.js"></script>
    <script src="js/viewer.js"></script>

但是，當我單擊按鈕時什么也沒有發生，有沒有更好的方法可以做到這一點？

Answer 1

不需要jQuery的替代方法，只需使用普通javascript即可 ：

    <script type="text/javascript>
        function goToPage() {
            document.location = 'view.html';
        }
        Button.addEventListener('click', goToPage);
    </script>
    …
    <button id="Button">Go</button>

• 您創建button元素並為其賦予唯一的id屬性（它可以是任何元素）。
• 然后，向其添加一個單擊 EventListener ，它執行指定的功能 goToPage 。
• goToPage函數更改文檔的location以導航到該location 。

而且甚至不需要javascript ：

    <form action="view.html">
        <input type="submit" value="Go"/>
    </form>

• 您僅創建類型為submit的input元素。
• 然后，您只需將其放入form元素中，並將文檔的URL作為action 。

第一種方法的優點是您幾乎可以使任何想要的元素都可單擊，只有少數例外。 第二個優點是您僅使用純HTML。

Answer 2

試試這個HTML：

<input type='button' id='unique_identifier'>

和這個小JavaScript片段（使用jQuery）：

// similar behavior as an HTTP redirect
$('#unique_identifier').on('click', function () {
  window.location.replace('view.html');
});

// similar behavior as clicking on a link
$('#unique_identifier').on('click', function () {
  window.location.href = 'view.html';
});

感謝Ryan McGeary

Answer 3

您不需要任何JavaScript即可執行此操作，只需將表單的操作設置如下：

<form class="col-lg-12" action="view.html">
            <div class="input-group" style="width:500px;text-align:center;margin:0 auto;">
            <input class="form-control input-lg" placeholder="Enter single quote-surrounded link" type="textbox" id="textbox1"></input>
              <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="submit" id= "getTextBoxValue">Submit</button></span>
            </div>
          </form>
<script src="js/script.js"><\script>
<script src="js/viewer.js"><\script>
</form>