button为什么在form内跳转页面无效

在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，所以最终的结果就相当于没有跳转了。