點擊按鈕重新加載頁面jQuery的上

Question

我有以下腳本：

HTML

<form class="trial_form" id="trial_form" > 
    <input type="text" value="TRIAL DATA PLEASE ALERT" id="trial_data" name="trial_data" class="trial_data"/> 
    <input type="submit" name="trial_submit" id="trial_submit" class="trial_submit" value="Validate Data"/> 
</form> 

jQuery的

$('#trial_submit').click(function() { 
    alert('CLICKED!!!!'); 
    alert('Alert!!'); 
    var bla = $('#trial_data').val(); 
    alert(bla); 
}); 

當我點擊Validate Data按鈕時，頁面響應並帶有警報，然後重新加載傳遞來自測試字段的信息的頁面n以下格式：

http://enunua.com/emarps/main.php?trial_data=TRIAL+DATA+PLEASE+ALERT&trial_submit=Validate+Data 

如何防止重新加載頁面？

Answer 1

在事件處理函數中使用event.preventDefault()或return false來停止表單提交。

如果調用此方法，則不會觸發該事件的默認操作。

$('#trial_submit').click(function(e) { 
    e.preventDefault(); // Stop form submission 

    alert('CLICKED!!!!'); 
    alert('Alert!!'); 
    var bla = $('#trial_data').val(); 
    alert(bla); 
}); 

使用return false：

$('#trial_submit').click(function(e) { 
    alert('CLICKED!!!!'); 
    alert('Alert!!'); 
    var bla = $('#trial_data').val(); 
    alert(bla); 

    return false; // Stop form submission 
}); 

Answer 2

使用event.preventDefault（）。它是用來阻止默認動作和觸發事件

$('#trial_submit').click(function (event) { 
    event.preventDefault(); 
    alert('CLICKED!!!!'); 
    alert('Alert!!'); 
    var bla = $('#trial_data').val(); 
    alert(bla); 
}); 

Answer 3

$('#trial_submit').click(function (e) { 
    e.preventDefault(); 
      alert('CLICKED!!!!'); 
      alert('Alert!!'); 
      var bla = $('#trial_data').val(); 
      alert(bla); 
     }); 

Fiddle

Answer 4

使用ATTR onsubmit在表單標籤。使用

<form class="trial_form" id="trial_form" onsubmit="return false"> <input type="text" value="TRIAL DATA PLEASE ALERT" id="trial_data" name="trial_data" class="trial_data"/> <input type="submit" name="trial_submit" id="trial_submit" class="trial_submit" value="Validate Data"/> </form>

Answer 5

返回false

$('#trial_submit').click(function() { 
    alert('CLICKED!!!!'); 
    alert('Alert!!'); 
    var bla = $('#trial_data').val(); 
    alert(bla); 

    return false; 
});