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按钮时，页面会响应一个警告，然后重新加载页面，并使用以下格式从测试字段传递信息：

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

使用return false

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

  return false;
});

单击按钮上的Jquery重新加载页面

5 个答案: