Блог

У меня проблема с моим процессом отправки jQuery AJAX.

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> 
  

Я использую PDO с MySQL для обработки базы данных для внутренней обработки. Проблема в том, что при отправке данных через HTML-форму для одного и того же поля формы добавляется двойное время, поэтому я получил избыточные данные с теми же данными поля в базе данных.

Кто-нибудь знает, как это предотвратить? Есть ли какие-либо видимые ошибки в моем коде?

Может быть, вы отправляете свои данные два раза с помощью ajax и html post form submit? Можете ли вы отобразить html на странице?

Кажется возможным, что ваша форма отправляется дважды, потому что вы отправляете с помощью AJAX, а затем форма отправляется снова. В этом случае вы можете довольно легко запретить форме выполнять обычную отправку, указав ей прекратить действие по умолчанию.

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

    //code for ajax form submit
  

Это должно остановить отправку обычной формы и использовать только ваш ajax-код.