Ajax调用了两次

Question

I'm using an ajax call for upload pdf files. After triggering upload button the ajax calls two times. I checked the entire code. But couldn't get any solution. Kindly help me :)

My code is, HTML:

<div class="uk-form-row">
        <div id="loadingPDFUpload"><i class="uk-icon-spinner uk-icon-spin"></i></div>
        <div id="targetUpload"></div>
        <label class="uploadLbl">Upload Book:</label> 
        <div class="uploadWrap">
            <input name="pdfFile" id="pdfFile" type="file" size="30" />
            <input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" onclick="return uploadPDF()" />
        </div>
    </div>

ajax code:

function uploadPDF(){
$("#frm").attr("action","upload.php");
$("#loadingPDFUpload").show();
$("#frm").ajaxForm({
    target: '#targetUpload',
    complete: function(){
        $("#loadingPDFUpload").hide();
    }
}).submit();}

Answer 1

You have a submit button calling the function but then the function uses the forms submit method. That is probably triggering a double call on the function.

I see you are using jQuery and the jQuery Form Plugin, so this should be relatively easy to fix. I would create the event handler directly in the JavaScript to avoid messy markup. Remove the onclick attribute of your submit button:

<input type="submit" name="submitBtn" class="uk-button uk-button-primary uk-button-small" value="Upload" />

Then do something like this in your code:

$(document).ready(function() {
    $('#frm').submit(function(e) {
        e.preventDefault(); //stops the default submit action
        $('#loadingPDFUpload').show();
        $(this).attr('action', 'upload.php');
        $(this).ajaxForm({
            target: '#targetUpload',
            complete: function(){
                $("#loadingPDFUpload").hide();
            });
        });
    })
});