Form is refreshing in AJAX

I have crated a form and trying to insert data using jquery ajax. But when I click submit button I have called a jquery button event and instead of that my form is refreshing..

HTML FORM

<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 button click even

$('#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");
        });
});

My issues are firstly function is not called and my form is refreshing. Secondly before modifying code I had issues my data was not sent to relative file.

---

Well there are some problems in your code, you are not using proper id, not using $(document).ready(), not using preventDefault() etc. I have fixed the code for you, here is a working demo http://jsfiddle.net/m9psk/ (Ajax won't work properly here as addpcp.php doesn't exist here, but it is sending request)

Here is the 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");
            });
});
});

I have added a div to Markup to show message

<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>

---

First of all you want to bind to the submit instead of the click

so instead of:

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

use:

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

For the refresh you need to add:

return false;

to the last line of the function before the closing } so:

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

---

For your first issue, have a look on the .submit() function

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