[jquery]動的に追加したinput要素も含めてsubmitする方法

javascriptやjqueryで動的にinput要素を追加したとしても、通常のsubmitでは送信されない。

serializeやserializeArrayなど試したがうまく動かず、結果、bodyに存在しているすべてのinputを取得してFormDataを作成して送信するとうまくいった

ただし、このコードではbodyにあるすべてのinputを取得するので、bodyに複数のformがあり、決まったform内の要素だけ送信したい場合は少し変える必要があるかもしれない

$('#button').on('click', function (e) {
    e.preventDefault();

        var formData = new FormData();

        // 現在の表示されている BODY 要素内のすべての input 要素を取得して FormData に追加
        $('body :input').each(function() {
            // チェックボックスの場合、選択されているかどうかをチェックしてから追加する
            if ($(this).prop('tagName') === 'INPUT' && $(this).attr('type') === 'checkbox') {
                if ($(this).is(':checked')) {
                    formData.append($(this).attr('name'), $(this).val());
                }
            } else if ($(this).prop('tagName') === 'INPUT' && $(this).attr('type') === 'file') {
                // ファイル要素の場合はファイルを追加
                var files = $(this)[0].files;
                for (var i = 0; i < files.length; i++) {
                    formData.append($(this).attr('name'), files[i]);
                }
            } else {
                // それ以外の場合は値を追加
                formData.append($(this).attr('name'), $(this).val());
            }
        });

        logFormData(formData);
        $.ajax({
            url: '<送信先>',
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            type: 'POST',
            dataType: "json",
            success: function(data) {
                // 成功時の処理
            },
            error: function(xhr, status, error) {
                // エラー時の処理
            }
        });
});