Ajax表单提交输入数据和文件没有响应

Question

I have a form, which need to submit a file and input data. I use jQuery validator to check the form then submit.

<form method="POST" id="form_1" action="../api.php" enctype="multipart/form-data" novalidate="novalidate">
    <input type="text" name="name" id="name" value="Amy" readonly="readonly">
    <input id="fileBox" class="fileUpload" type="file" name="img" accept="image/*" required>
    <input type="hidden" name="isSubmit" value="1"/>
</form>

<a id="btnSubmit" href="javascript:void(0)">Submit</a>

$("#btnSubmit").click(function(){
    if ($("#form_1").valid()){ //jquery validator to check the form
        $("#form_1").submit(function() {
            var formData = new FormData(($this)[0]);
            $ajax({
                type: "POST",
                url: "../../api.php",
                data: { 
                    action:"formSubmit", 
                    formData:formData
                }
            }).done(function(data){
                data = $.parseJSON(data);
            });
        });
    }
});

Why no response when I click btnSubmit? What's wrong with my code? Can anyone help me?

Answer 1

The line

$("#form_1").submit(function(){ ... });

does not trigger the submit, it only registers event handler that reacts to submit. Instead of that you should register your event handler first, and in your click event just trigger it:

// at first you register event handler for when the form is submitted
$("#form_1").submit(function(){
    var formData = new FormData(($this)[0]);
    $ajax({
        type: "POST",
        url: "../../api.php",
        data: { action:"formSubmit", formData:formData}
    }).done(function(data){
         data = $.parseJSON(data);
    });
});

$("#btnSubmit").click(function(){
    if($("#form_1").valid()){ 
        // inside click event handler you trigger form submission
        $("#form_1").trigger('submit');
    }
});