不同表单的不同表单提交操作

Question

超基本的javascript问题传入...

我有两种形式，一种用于上传文件，一种用于提供文本。我想对这些表单中的每一个都有一个独特的提交操作。对于前者，上传文件，对于后者，将表单序列化为 JSON 并 POST。

为了尝试实现这一点，我有一个名为submit 的函数和另一个名为submit2 的函数。调用submit 的文件上传表单可以正常工作。

问题在于第二种形式，它调用submit2。特别是，当我加载页面时，我收到以下错误：

Query.Deferred exception: undefined is not a function (near '...$('form').submit2...')。

TypeError: undefined is not a function (near '...$('form').submit2...')

这是我的 HTML。

Upload an image
<form method="POST" enctype="multipart/form-data" action="upload">
    <input id="img" name="file" type="file" accept=".jpeg,.jpg,.png">
    <input class="btn btn-primary" type="submit" value="Submit">
</form>

Paste a URL
<form method="POST" name="urlForm" onclick="submit2()">
    <input id="imgurl" name="url" type="text">
    <input class="btn btn-primary" value="Submit">
</form>

这是我的 javascript。

function ConvertFormToJSON(form){
    var array = jQuery(form).serializeArray();
    var json = {};
    console.log(array)

    jQuery.each(array, function() {
        json[this.name] = this.value || '';
    });

    return json;
}

$(document).ready(function () {
    var $status = $('.status');

    $('#img').change(function (event) {
        var obj = $(this)[0];
        console.log(obj)

        $status.html('');

        if (obj.files && obj.files[0]) {
            console.log(obj.files)
            var fileReader = new FileReader();
            fileReader.onload = function (event) {
                $('.img-area').html(
                    `<img class='loaded-img' src='${event.target.result}' style="width:500px;height:500px;"/>`
                );
            }
            fileReader.readAsDataURL(obj.files[0]);
        }
    });

    $('#imgurl').change(function (event) {
        var obj = $('#imgurl').val()
        console.log(obj)
        $('.img-area').html(
            `<img class='loaded-img' src='${obj}' style="width:500px;height:500px;"/>`
        );
    });

    $('form').submit(function (event) {
        event.preventDefault();

        var imageData = new FormData($(this)[0]);
        console.log(imageData)

        $status.html(
            `<span class='eval'>Evaluating...</span>`
        );

        $.ajax({
            url: 'some_api_endpoint',
            type: 'POST',
            processData: false,
            contentType: false,
            dataType: 'json',
            data: imageData,

            success: function (responseData) {
                console.log(responseData)
                if (responseData.error != null) {
                    $status.html(
                        `<span class='result failure'>Failed</span>`
                    );
                } else {
                    $status.html(
                        `<span class='result success'>${responseData.message}</span>`
                    );
                }
            },
            error: function () {
                $status.html(
                    `<span class='eval'>Something went wrong, try again later.</span>`
                );
            }
        });
    });

    $('form').submit2(function (event) {
        event.preventDefault();

        var json = ConvertFormToJSON($('form'))
        console.log(json)

        $status.html(
            `<span class='eval'>Evaluating...</span>`
        );

        $.ajax({
            url: 'some_api_endpoint',
            type: 'POST',
            processData: false,
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify(json),

            success: function (responseData) {
                console.log(responseData)
                if (responseData.error != null) {
                    $status.html(
                        `<span class='result failure'>Failed</span>`
                    );
                } else {
                    $status.html(
                        `<span class='result success'>${responseData.message}</span>`
                    );
                }
            },
            error: function () {
                $status.html(
                    `<span class='eval'>Something went wrong, try again later.</span>`
                );
            }
        });
    });
});

编辑：为完整性添加了 ConvertFormToJSON 函数，尽管我认为这与我面临的问题正交。

Answer 1

那里的问题 Jquery 对象没有 submit2 方法，当你想访问 submit2 方法时，返回 undefined，调用时返回 undefined 不是函数。