Làm thế nào để tránh làm mới trang trong một phương thức bootstrap?

Question

Đây là mã cho phương thức của tôi trong twitter bootstrap:

<div class="modal-body"> 
<form class="form-horizontal" method="POST" name="loginForm" id="loginForm"> 
<div class="control-group"> 
<label class="control-label" for="inputEmail">Email</label> 
<div class="controls"> 
    <div class="input-prepend"> 
    <span class="add-on"><i class="icon-envelope"></i></span> 
    <input class="span2" id="inputIcon" type="text" name="email"/> 
    </div> 
</div> 
</div> 
<div class="control-group"> 
<label class="control-label" for="inputPassword">Password</label> 
<div class="controls"> 
    <div class="input-prepend"> 
    <span class="add-on"><i class="icon-lock"></i></span> 
    <input class="span2" id="password" type="password" name="password"/> 
    </div> 
</div> 
</div> 
<div class="control-group"> 
<div class="controls"> 
<label class="checkbox"> 
<input type="checkbox"> Remember me 
</label> 
</form> 
<button type="submit" class="btn" id="signin_button">Sign in</button> 
</div> 
</div> 

Bất cứ khi nào tôi bấm nút Đăng nhập nó tải lại trang. Làm thế nào tôi có thể vô hiệu hóa làm mới trang khi nhấp vào nút?

Answer 1

Bạn có thể ngăn chặn hành vi mặc định của nút đang gửi trang.

Dưới đây là một liên kết đến Developer Network Mozilla trên "preventDefault": event.preventDefault

Trong jQuery bạn có thể làm điều này như thế này:

$("#signin_button").on("click", function(e) { 
    e.preventDefault(); 

    // the rest of your code ... 
}); 

Answer 2

Hãy thử thay đổi input type = "submit" tới

<button class="btn" id="signin_button">Sign in</button> 

hoặc

<input type="button" class="btn" id="signin_button" value="Sign in"/> 

nếu mục tiêu của bạn không phải là gửi biểu mẫu.

Cũng có thể có ích: Difference between <input type='button' /> and <input type='submit' />

Answer 3

Bạn có thể sử dụng bấm thêm:

$("#signin_button").click(function (e) { 
    e.preventDefault(); 
    // code 
}