窗体在AJAX中刷新

Question

我已经创建了一个窗体并尝试使用jQuery ajax插入数据。但是当我点击提交按钮，我已经叫一个jQuery按钮事件，而不是我的形式令人耳目一新..

HTML表单

<form id="pcpform" name="pcpform" method="post" action="" > 
      <table width="389" border="0"> 
      <tr> 
       <td>Contact Number :</td> 
       <td><input type="text" name="pcpmnum" id="pcpmnum" class="text" /></td> 
      </tr> 
      <tr> 
       <td>First Name :</td> 
       <td><input type="text" name="pcpfname" id="pcpfname" class="text" /></td> 
      </tr> 
      <tr> 
       <td>Middle Name :</td> 
       <td><input type="text" name="pcpmname" class="text" /></td> 
      </tr> 
      <tr> 
       <td>Last Name :</td> 
       <td><input type="text" name="pcplname" class="text" /></td> 
      </tr> 
      <tr> 
       <td>Email :</td> 
       <td><input type="text" name="pcpemail" class="text" id="pcpemail" /></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td><input type="submit" name="pcpsubmit" id="pcpsubmit" value="Submit" /> 
       <input type="reset" name="Cancel" id="clear" value="Clear" /></td> 
      </tr> 
      </table> 
     </form> 

jQuery的按钮点击甚至

$('#pcpsubmit').click(function(){ 
alert("HIiiiiii 1"); 
var pcpmnum = $("#pcpmnum").val(); 

var pcpfname = $('input[name="pcpfname"]').val(); 
var pcpmname = $('input[name="pcpmname"]').val(); 
var pcplname = $('input[name="pcplname"]').val(); 
var pcpemail = $('input[name="pcpemail"]').val(); 
    alert("HIiiiiii 2"); 
if(pcpmnum === "" | pcpmnum === null) 
    { 
     $('#childpcpmsg').html('Please enter contact number.'); 
     //alert("Please Enter Mobile Number"); 
     return false; 
    } 
if(pcpfname === "" | pcpfname === null) 
    { 
     $('#childpcpmsg').html('Please enter First Name.'); 
     //alert("Please Enter Mobile Number"); 
     return false; 
    } 
if(pcplname === "" | pcplname === null) 
    { 
     $('#childpcpmsg').html('Please enter Last Name.'); 
     //alert("Please Enter Mobile Number"); 
     return false; 
    } 
if(pcpemail === "" | pcpemail === null) 
    { 
     $('#childpcpmsg').html('Please enter Email.'); 
     //alert("Please Enter Mobile Number"); 
     return false; 
    } 
alert("HIiii 3"); 
$.post("addpcp.php", {cntctnumber: pcpmnum, firstname: pcpfname, middlename: pcpmname, lastname: pcplname, email: pcpemail}, function(data){ 
     alert("Success"); 
     }); 
}); 

我的问题首先功能不被调用，我的表单更新。其次，在修改代码之前，我遇到了问题，我的数据没有发送到相关文件。

Answer 1

首先你要绑定的样子提交，而不是点击

所以不是：

$('#pcpsubmit').click(function(){ 

用途：

$('#pcpform').submit(function(){ 

对于刷新你需要添加：

return false; 

给函数的最后一行结束前}这样：

$.post("addpcp.php", {cntctnumber: pcpmnum, firstname: pcpfname, middlename: pcpmname, lastname: pcplname, email: pcpemail}, function(data){ 
    alert("Success"); 
    }); 
    return false; 
}); 

Answer 2

为了您的第一个问题，对.submit() function

$('#pcpform').submit(function(){ [...] } 

Answer 3

那么有在你的代码中的一些问题，你不使用正确的id，没有使用$(document).ready()，没有使用preventDefault()等我已经修复了你的代码，这里是一个工作演示http://jsfiddle.net/m9psk/（Ajax在这里不能正常工作，因为addpcp.php在这里不存在，但它是发送请求）

这里是JS

$(document).ready(function(){ 
$('#pcpform').submit(function(e){ 
    e.preventDefault(); 
    alert("HIiiiiii 1"); 
    var pcpmnum = $("#pcpmnum").val(); 

    var pcpfname = $('input[name="pcpfname"]').val(); 
    var pcpmname = $('input[name="pcpmname"]').val(); 
    var pcplname = $('input[name="pcplname"]').val(); 
    var pcpemail = $('input[name="pcpemail"]').val(); 
     alert("HIiiiiii 2"); 
    if(pcpmnum === "" | pcpmnum === null) 
     { 
      $('#childpcpmsg').html('Please enter contact number.'); 
      //alert("Please Enter Mobile Number"); 
      return false; 
     } 
    if(pcpfname === "" | pcpfname === null) 
     { 
      $('#childpcpmsg').html('Please enter First Name.'); 
      //alert("Please Enter Mobile Number"); 
      return false; 
     } 
    if(pcplname === "" | pcplname === null) 
     { 
      $('#childpcpmsg').html('Please enter Last Name.'); 
      //alert("Please Enter Mobile Number"); 
      return false; 
     } 
    if(pcpemail === "" | pcpemail === null) 
     { 
      $('#childpcpmsg').html('Please enter Email.'); 
      //alert("Please Enter Mobile Number"); 
      return false; 
     } 
    alert("HIiii 3"); 
    $.post("addpcp.php", {cntctnumber: pcpmnum, firstname: pcpfname, middlename: pcpmname, lastname: pcplname, email: pcpemail}, function(data){ 
      alert("Success"); 
      }); 
}); 
}); 

我添加了一个div来标记以显示消息

<div id="childpcpmsg"></div> 
<form id="pcpform" name="pcpform" method="post" action="" > 
      <table width="389" border="0"> 
      <tr> 
       <td>Contact Number :</td> 
       <td><input type="text" name="pcpmnum" id="pcpmnum" class="text" /></td> 
      </tr> 
      <tr> 
       <td>First Name :</td> 
       <td><input type="text" name="pcpfname" id="pcpfname" class="text" /></td> 
      </tr> 
      <tr> 
       <td>Middle Name :</td> 
       <td><input type="text" name="pcpmname" class="text" /></td> 
      </tr> 
      <tr> 
       <td>Last Name :</td> 
       <td><input type="text" name="pcplname" class="text" /></td> 
      </tr> 
      <tr> 
       <td>Email :</td> 
       <td><input type="text" name="pcpemail" class="text" id="pcpemail" /></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td><input type="submit" name="pcpsubmit" id="pcpsubmit" value="Submit" /> 
       <input type="reset" name="Cancel" id="clear" value="Clear" /></td> 
      </tr> 
      </table> 
     </form>