A solution for an error occurring during a jQuery $.ajax request.

I was using this common jQuery Ajax pattern on a page I am working:

    $(function () {
        $(document).on('click', '.create-domain .submit', function (e) {
            e.preventDefault();

            var data = {
                domain_description: $('.create-domain .domain-description-textarea')
        }

            $.ajax({
                type: 'post',
                url: '/process/something.php',
                data: data,
                error: function (data) {
                    console.debug(data);
                },
                success: function (response) {
                   //stuff
                }
            });
        });

But on clicking the submit element, I kept getting this cryptic error:

Uncaught TypeError: Cannot read property 'type' of undefined
    at r.handle (jquery-2.2.4.min.js:3)
    at e (jquery-2.2.4.min.js:4)
    at Gb (jquery-2.2.4.min.js:4)
    at Gb (jquery-2.2.4.min.js:4)
    at Gb (jquery-2.2.4.min.js:4)
    at Gb (jquery-2.2.4.min.js:4)
    at Function.n.param (jquery-2.2.4.min.js:4)
    at Function.ajax (jquery-2.2.4.min.js:4)
    at HTMLButtonElement. (something.php:575)
    at HTMLDocument.dispatch (jquery-2.2.4.min.js:3)
    at HTMLDocument.r.handle (jquery-2.2.4.min.js:3)

The problem was that in the data variable, I was including an HTML element (a textarea) inside the data variable, instead of including the textarea‘s content. Thus the corrected code is (notice the .val() at the end):

            var data = {
                domain_description: $('.create-domain .domain-description-textarea').val(),
        }

Hopefully this will help a few people, helping making the world economy more efficient by 1*10^-12% (saving the world economy $107 USD over the next year).