Receive and send form data

Question

Greetings to the experts on WEB development, I myself am a beginner in this field, I am doing a training project, so the question arose. There is a form:

...
    <form name="date">
        <p>
            <label for="date">Choose date</label>
            <input type="date" name="calendar" id="calendar" onchange="handlerDate(event)">
        </p>
    </form>
...

Which I then process in this way:

function handlerDate(e) {
    e.preventDefault();
    let dateForm = document.forms["date"];
    let dateChosen = dateForm.elements["calendar"].value;
    let dateNow = new Date();
    dateChosen = new Date(dateChosen);

    if ($('#uncorrectDate').length)
        $('#uncorrectDate').remove();

    if ((dateChosen.getFullYear() !== dateNow.getFullYear() || dateChosen.getMonth() !== dateNow.getMonth()) ||
        ((dateChosen.getFullYear() === dateNow.getFullYear() || dateChosen.getMonth() === dateNow.getMonth()) &&
            (dateChosen.getDate() < dateNow.getDate()))
    ) {
        $('<p id="uncorrectDate">Incorrect date</p>').appendTo('.mainbody');
        $("#userInfo").remove();
    } else {
        if($('#userInfo').length)
            $('#userInfo').remove();

        var timesGet = GetOrders(dateChosen.toLocaleDateString());
        times = timesGet.booked;

        let selectTimes = '</p><p><label>Choose time: </label><select name="text">';
        for (let k = 0; k < times.length; k++) {
            let time = `${times[k]}:00`;
            selectTimes += '\n<option value="' + time + '">' + time + '</option>';
        }
        selectTimes += "</select><\p>";

        $('<form id="userInfo">' +
            '<p> ' +
            '<label for="email">Email:</label>' +
            '<input type="email" placeholder="user@gmail.com" name="email"/></p>' +
            '<p>' +
            '<label for="phone">Телефон: </label>' +
            '<input type="tel" placeholder="(XXX)-XXX-XXXX" name="phone"/>' +
            '</p>' +
            '<p>' +
            selectTimes +
            '</p>' +
            '<p>' +
            '<button type="submit">Send</button>' +
            '</p>' + '</form>'
        ).appendTo('.mainbody');
    }
}

function GetOrders(date) {
    var result = "";
    $.ajax({
        url: "/api/records/" + date,
        type: "GET",
        async: false,
        contentType: "application/json",
        success: function (record) {
            result = record;
        }
    });
    return result;
}

function CreateOrder(userName, userMail, userPhone, userDate, userTime) {
    $.ajax({
        url: "api/users",
        contentType: "application/json",
        method: "POST",
        data: JSON.stringify({
            name: userName,
            email: userAge,
            phone: userPhone,
            date: userDate,
            time: userTime
        }),
        success: function (user) {
            $(".mainbody").append('<p>Заказ был сделан!</p>');
        }
    })
}

The logic that was unnecessary for understanding the issue is removed. First question: is it normal practice to dynamically change the page in this way through jQuery? Since I am doing that purely for practical purposes: to make a task, I’m not entirely guided by how it is customary to do, how it is not customary. The second and main question: how can I now receive and correctly send data from the form? Is there an example syntax in this case (without php). There is an onsubmit attribute in the form, you can specify the function handler there, but is there an example of how this is done? And is it necessary in this case to put an additional handler function onclick on the submit button? I need to get data from the form, validate it, and call the CreateOrder method with this data. On the server, all this will be processed correctly, I configured it, but did not find normal examples of how to write correctly onsubmit or onclick, into which I need to pass 1 parameter: the date received earlier.