Uncaught TypeError: FormData constructor: Argument 1 does not implement interface HTMLFormElement. in laravel

Question

我的表单就像这个demo

Q.1 我想将此表单转换为 ajax，但我的 ajax 代码似乎缺少某些内容。提交时什么都不做。

Q2。我还希望该函数在选择文件时触发更改而不是等待提交。

Q3。我想在单击“下一步”按钮时进行。表格全部保存并转到下一页。

我的blade

<form method="post" enctype="multipart/form-data" action="{{ route('update', auth()->id()) }}">
    @csrf
    @method('put')
    <fieldset>
        @include('Home.steps.step-1')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-2')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-3')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-4')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-5')
    </fieldset>
    <fieldset>
        @include('Home.steps.step-6')
    </fieldset>
</form>

js

$(document).ready(function (e) {
    $('.btn-next').on('click',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr("{{ route('update', auth()->id()) }}"),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));
});

我在控制台中收到此错误。

Uncaught TypeError: FormData constructor: Argument 1 does not implement interface HTMLFormElement.

Answer 1

你需要给表单元素而不是按钮

var formData = new FormData($('#form-id'));