HTML:JavaScript:阻止表单提交并调用Javascript函数

Question

我想在按下表单中的提交按钮时进行AJAX调用.InFact我不能删除,<form>因为我也想进行客户端验证.我试过这段代码.

<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>

JS

function makeSearch(){
alert("Code to make AJAX Call");
}

使用此代码后alert()未显示但页面已重新加载.我想阻止页面重新加载并调用JS函数.

谢谢

Answer 1

将onsubmit属性添加到form标记:

<form name="search" onsubmit="return makeSearch()" >
  Name: <input type="text" name="name1"/>
  Age: <input type="text" name="age1"/>
  <input type="submit" name="Submit" value="Submit"/>
</form>

并return false在最后添加javascript :

function makeSearch() {
  alert("Code to make AJAX Call");
  return false;
}

Answer 2

正确的jQuery方式是:

$("form").on('submit', function (e) {
   //ajax call here

   //stop form submission
   e.preventDefault();
});

就像你说的那样,你也可以删除<form>元素,然后将ajax调用绑定到按钮的click事件.