AJAX: Duplicate Entries

I'm using AJAX to create a new row in a table via SQL. My code is fairly straight-forward, but I've noticed that occasionally it will create duplicate entries (sometimes even 3) in the database. Is there a way to prevent this? Here is my code (sent via a php echo).

UPDATED MAIN PAGE

echo "
    <script language='javascript'>


$('#newreportBTN').live(\"click\", function() {

 //Get variables from boxes
        var data = $(\"#newreport\").serialize();

    $.ajax({
            type: 'POST',
            url: \"report_new.php\",        
            data: data,
           success: function (html) {              
                //if process.php returned 1/true (send mail success)
                if (html==1) {                  
                    //Send notification to user
                     $('#adminReportInfo').fadeOut(300);

                //if process.php returned 0/false (send mail failed)
                } else alert('Sorry, unexpected error. Please try again later.');               
            }       
        });

        //cancel the submit button default behaviours
        return false;
    });


    </script>
    ";

report_new.php

<?php
//Start session
session_start();

//Include database connection details
require_once('config.php');

//Array to store 开发者_如何学Govalidation errors
$errmsg_arr = array();

//Validation error flag
$errflag = false;

//Connect to mysql server
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
    die('Failed to connect to server: ' . mysql_error());
}

//Select database
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
    die("Unable to select database");
}

//Function to sanitize values received from the form. Prevents SQL injection
function clean($str) {
    $str = @trim($str);
    if(get_magic_quotes_gpc()) {
        $str = stripslashes($str);
    }
    return mysql_real_escape_string($str);
}



$company = $_POST['company'];
$claimnumber = $_POST['claimnumber'];
$fullname = $_POST['fullname'];
$dateofloss = $_POST['dateofloss'];
$foruser = $_POST['foruser'];
$status = $_POST['status'];


//Input Validations
if($company == '') {
    $errmsg_arr[] = 'Company Missing';
    $errflag = true;
}
if($claimnumber == '') {
    $errmsg_arr[] = 'Claim # Missing';
    $errflag = true;
}
if($fullname == '') {
    $errmsg_arr[] = 'Full name missing';
    $errflag = true;
}


//If there are input validations, redirect back to the registration form
if($errflag) {
    $_SESSION['ERRMSG_ARR'] = $errmsg_arr;
    session_write_close();
    header("location: user_error.php");
    exit();
}

//Create INSERT query
$qry = "INSERT INTO documents (company, claimnumber, fullname, dateofloss, foruser, status) VALUES ('$company', '$claimnumber','$fullname','$dateofloss','$foruser','$status')";
$result = @mysql_query($qry);

//Check whether the query was successful or not
if($result) {
    //header("location: admin.php?status=new");
    echo '1';
    exit();
}else {
    die("Query failed");
    echo mysql_error();
}
?>

Check the following:

• Make sure you are binding the event once only.

• You can unbind all events for your specific selector and rebind it again.

• You can also add the preventDefault method ( http://api.jquery.com/event.preventDefault/ )

EXAMPLE: http://jsfiddle.net/FZ7Dk/

$(function() {

    $('#newreportBTN').live('click', function(e) {
        e.preventDefault();

        /*Code here*/

        /*on success*/
        $('#newreportBTN').unbind();
        $('#newreportBTN').bind('click');
    });

});

This code should not create more than one record unless you are pressing the button more than one time. Also you don't need escaping click here

$('#newreportBTN').live(\"click\" ...

Also try to use .click() instead of .live()

function addtoGrid(empid){

                var arraycp=new Array();

                var arraycp = $.merge([], myArray2);

                var items= new Array();
                for(i=0;i<empid.length;i++){

                    items[i]=empid[i];
                }

                var u=1;
                $.each(items,function(key, value){

                    if(jQuery.inArray(value, arraycp)!=-1)
                    {

                        // ie of array index find bug sloved here//
                        if(!Array.indexOf){
                            Array.prototype.indexOf = function(obj){
                                for(var i=0; i<this.length; i++){
                                    if(this[i]==obj){
                                        return i;
                                    }
                                }
                                return -1;
                            }
                        }

                        var idx = arraycp.indexOf(value);
                        if(idx!=-1) arraycp.splice(idx, 1); // Remove it if really found!
                        u=0;

                    }
                    else{

                        arraycp.push(value);

                    }


                }


            );

                $.each(myArray2,function(key, value){
                    if(jQuery.inArray(value, arraycp)!=-1)
                    {

                        // ie of array index find bug sloved here//
                        if(!Array.indexOf){
                            Array.prototype.indexOf = function(obj){
                                for(var i=0; i<this.length; i++){
                                    if(this[i]==obj){
                                        return i;
                                    }
                                }
                                return -1;
                            }
                        }

                        var idx = arraycp.indexOf(value); // Find the index
                        if(idx!=-1) arraycp.splice(idx, 1); // Remove it if really found!
                        u=0;

                    }
                    else{


                    }


                }


            );
                $.each(arraycp,function(key, value){
                    myArray2.push(value);
                }


            );if(u==0){

                }
                var courseId1=$('#courseid').val();
                $.post(

                "<?php echo url_for('payroll/LoadGrid') ?>", //Ajax file



                { 'empid[]' : arraycp },  // create an object will all values

                //function that is called when server returns a value.
                function(data){


                    //var childDiv;
                    var childdiv="";
                    var i=0;

                    $.each(data[0], function(key, value) {
                        var word=value.split("|");
                                    var diable='<?php echo $disabled; ?>';
                                    childdiv="<div class='pagin' id='row_"+i+"' style='padding-top:10px;'>";
                                    childdiv+="<div class='centerCol' id='master' style='width:100px;'>";
                                    childdiv+="<div id='employeename' style='height:25px; padding-left:3px;'>"+word[0]+"</div>";
                                    childdiv+="</div>";

                                    childdiv+="<div class='centerCol' id='master' style='width:220px;'>";
                                    childdiv+="<div id='employeename' style='height:25px; padding-left:3px;'>"+word[1]+"</div>";
                                    childdiv+="</div>";

                                    childdiv+="<div class='centerCol' id='master' style='width:100px;'>";
                                    childdiv+="<div id='employeename' style='height:25px; padding-left:3px;'>"+word[2]+"</div>";
                                    childdiv+="</div>";

                                    childdiv+="<div class='centerCol' id='master' style='width:75px;'>";
                                    childdiv+="<div id='employeename' style='height:25px; padding-left:3px;'>"+word[3]+"</div>";
                                    childdiv+="</div>";

                                    childdiv+="<div class='centerCol' id='master' style='width:75px;'>";
                                    childdiv+="<div id='employeename' style='height:25px; padding-left:3px;'>"+word[4]+"</div>";
                                    childdiv+="</div>";

                                    childdiv+="<div class='centerCol' id='master' style='width:50px;'>";
                                    childdiv+="<input style='width:50px; height:13px; padding-left:0px; ' id='chkconfirm'  name='chkconfirm[]' type='checkbox'  value='1' "+diable+" '<?php if($SalarayIncrement->inc_confirm_flag==1){ echo "checked"; }; ?>' />";
                                    childdiv+="</div>";

                                    childdiv+="<div class='centerCol' id='master' style='width:100px;'>";
                                    childdiv+="<input style='width:90px; height:13px; padding-left:0px; ' id='txtcomment'  name='txtcomment[]' type='text'  maxlength='200' "+diable+"  value='<?php echo $SalarayIncrement->inc_comment; ?>' />";
                                    childdiv+="</div>";

                                    childdiv+="<div class='centerCol' id='master' style='width:70px;' >";
                                    childdiv+="<div id='employeename' style='height:25px; padding-left:3px;'><a href='#' style='width:70px;'  onclick='deleteCRow("+i+","+word[8]+")'><?php echo __('Remove') ?></a>";
                                    childdiv+="<input type='hidden' name='hiddenPreviousSalary[]' value="+word[2]+" >";
                                    childdiv+="<input type='hidden' name='hiddenNewSalary[]' value="+word[3]+" >";
                                    childdiv+="<input type='hidden' name='hiddenIncrement[]' value="+word[4]+" >";
                                    childdiv+="<input type='hidden' name='hiddenEmpNumber[]' value="+word[8]+" >";
                                    childdiv+="<input type='hidden' name='hiddenPreviousSal[]' value="+word[5]+" >";
                                    childdiv+="<input type='hidden' name='hiddenNewSal[]' value="+word[6]+" >";
                                    childdiv+="<input type='hidden' name='hiddenGrade[]' value="+word[7]+" >";
                                    childdiv+="</div>";
                                    childdiv+="</div>";
                                    childdiv+="</div>";
                                    //

                                    $('#tohide').append(childdiv);


                        k=i;
                        i++;
                    });
                    pagination++;

                    $(function () {

                       if(pagination > 1){
                       $("#tohide").depagination();
                       }
                        $("#tohide").pagination();
                    });
                $.each(data[1], function(key, value) {
                        var Employee=value.split("|");
                        alert(Employee[0]+" - "+Employee[1]+"<?php echo __(" can not perform increment, please edit the Basic salaray") ?>");
                });
                },

                //How you want the data formated when it is returned from the server.
                "json"

            );


            }

Pass your IDs to addTogrid function as a array this will prvent duplicate data

This is somewhat off-topic, but you could simplify your form submission considerably, like so:

<script type="text/javascript">

    $('#newreportBTN').click(function(e) {

        var data = $("#your_form_id_here").serialize();

        $.post({
            url: "report_new.php",        
            data: data,
            success: function (html) {              
                // handle result             
            }       
        });

        //cancel the submit button default behaviours
        e.preventDefault();
    });

</script>

This also follows the convention (hinted at by the HTTP verbs themselves) that GET requests should only be used to retrieve data, while POST or PUT are used to send data to the server for processing. Hope this is useful...

Finally figured this out. For anyone having this issue in the future:

I was using PHP echo to print out the javascript code upon click of an item. AVOID THIS IF POSSIBLE. I think what was happening was the segment of code may have been echo'd several times, possibly provoking it to be run several times as well. I moved that code from the PHP echo to my header section in the HTML page (even though it may not always be used, it prevents this error.)