jQuery Ajax redundant submitting data

I have problem with my jQuery AJAX submission process.

JavaScript:

$('#myform').submit(function () {
    if (validateEvenInputs()) {
        $('#btnevent').attr('disabled', 'disabled');    
        function getVirtualDirectory() { 
            var vDir = document.location.pathname.split('/'); 
            return '/' + vDir[1] + '/'; 
        }   

        var siteAddress = location.protocol + '//' + 
            document.location.hostname + getVirtualDirectory();  
        var load_msg = '<span>Loading process....</span>';  
        $("#enote").html(load_msg).slideDown();  
        var abc = $('#abc').val();
        var  def = $('#def option:selected').val();
        $.ajax( {
            url: ""+ siteAddress +"page/action/",
            global: false,
            type: "POST",
            data: ({en : abc, lv : def }),
            dataType: "html",
            async:false,
            cache: false,
            success: function($vmsg) {
                $("#snote").html($vmsg).slideDown("slow");
                $("#enote").empty().slideUp(200);
            }
        });       
    }   

    return false;
});

HTML:

<script type='text/javascript' >
    $(document).ready(function() {
        $('#abc').bind('keyup keydown', function() {
        //run the character number check

        if ($('#evname').val().length < max_chars) {  
            $('#evname_result').html(charnum_error).fadeIn("slow");   
            $('#fsub').empty().fadeIn("slow");    
        }

        else {
            //else show the cheking_text and run the function to check
            $('#evname_result').html(checking_html).fadeIn("slow");
            check_availability();
        }
    });   

    function check_availability() {
        var abc = $('#abc').val();   
        var submit_html =  '<label class="frfrom"><input id="btnevent" name="Submit" 
            type="submit" value="Submit" /></label>';   
        $.post(""+ siteAddress +"page/action/", { en: abc },
            function(result) {

                //if the result is 1
                if(result == 1) {
                    //show that the username is available
                    $('#evname_result').html('<h1 class="av">'+eventname + 
                        ' is Available</h1>').fadeIn("slow");
                    $('#fsub').fadeIn("slow", function () { 
                        $('#fsub').html(submit_html); });                    
                    }

                else {
                    //show that the username is NOT available
                    $('#evname_result').html('<h1 class="uv">'+eventname + 
                        ' is Not Available</h1>').fadeIn("slow");
                    $('#fsub').empty().fadeIn("slow");                
                }
            });  
        } 
    });     
</script>
<form name="myform" id="myform" action="
    <?php echo $urlaction; ?>" method="post"> 
        <div id="frow">
            <label class="evname">Name 
                <input type="text" name="abc" id="abc" />
                <div id="evname_result"></div>
            </label>
            <label class="evcat">Level
                <select name="def" title="Level" id="def" >
                    <option selected="selected"></option>
                    <option value="A">Level A</option>
                    <option  value="B" >Level B</option>
                    <option  value="C" >Level C</option>
                </select>
            </label> 
        </div>
    <div id="fsub" ></div>
</form> 

I'm using PDO with MySQL to handle the database for backend processing. The problem is when data submited via HTML form it will add twice time for same开发者_运维问答 form field, so i got redundant data with same field data on database.

Does anybody know how to prevent this? Are there any visible errors in my code?

Maybe you post your data two times with ajax and html post form submit? Can you show html on page?

It seems possible that your form is submitting twice because you are submitting using AJAX and then the form is submitting again. If this is the case you can prevent the form from doing its normal submit pretty easily by telling it to stop its default action.

$('#myform').submit(function (event) { //add an event variable
    event.preventDefault(); //stop default form submit action

    //code for ajax form submit

That should stop the normal form submit and only use your ajax code.