Question

我有一个表单，需要提交文件和输入数据。我使用jQuery验证器检查表单然后提交。

<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);
            });
        });
    }
});

为什么点击btnSubmit时没有响应？我的代码出了什么问题？任何人都可以帮助我吗？

Answer 1

该行

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

不会触发提交，它只会注册响应提交的事件处理程序。而不是你应该首先注册你的事件处理程序，并在你的点击事件中触发它：

// 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');
    }
});

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

1 个答案: