Question

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.

Answer 1

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;
});