在form內window.location.href無效的問題

有如下的程式碼

<form>
 	<div class="form-group">
       <label for="username">Username</label>
       <input type="text" class="form-control" id="username" placeholder="Enter Username">
     </div>
      <div class="form-group">
 

          <input class="form-control" type="password" value="hunter2" id="example-password-input">
       </div>
      <button class="btn btn-general btn-blue" id="login_btn" role="button"><i fa fa-right-arrow></i>Login</button>
</form>

      $(document).ready
 
(function () {
        $('#login_btn').click(function () {
          if ($('#username').val() == 'databasepj' && $('#example-password-input').val() == '123456') {
            window.location.href='./index.html'
          }
          else{
            alert('wrong username or password, pls try again'
 
)
          }
        })
      })

下面先說解決辦法：

1. 將button提到form表單外面即可
2. 對from標籤設定action：(此時無需window…的程式碼了)
   使用了action之後頁面會跳轉，我也不知道為啥，如果有人能解答一下最好了
3. 為按鈕指定type屬性，並另寫處理函式change()：
   <button type="button" onclick="change()">跳轉</button>

為什麼會出現提交無效的情況呢

提交無效的時候發現，點選按鈕之後頁面會閃一下。這是因為，如果button標籤不指定type，那麼它預設就是submit（但在IE中則是button）。
submit時，表單的內容會被傳送到另一個檔案，表單的action屬性定義了目的檔案的檔名，由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理。:
也就是說點選它就相當於提交表單了，因此它會先去執行click(…)裡的程式碼，然後立刻（此時網頁尚未開始跳轉）提交表單，但由於form未指定action，就預設是當前頁面的url，所以最終的結果就相當於沒有跳轉了。