Получить и отправить данные из формы

06 февраля 2022, 03:50

Приветствую знатоков WEB разработки, сам я в этой области новичок, делаю учебный проект, поэтому появился вопрос. Есть такая форма:

...
    <form name="date">
        <p>
            <label for="date">Выберите дату:</label>
            <input type="date" name="calendar" id="calendar" onchange="handlerDate(event)">
        </p>
    </form>
...

Которую я затем обрабатываю таким образом:

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">Вы выбрали некорректную дату.</p>').appendTo('.mainbody');
        $("#userInfo").remove();
    } else {
        if($('#userInfo').length)
            $('#userInfo').remove();
        var timesGet = GetOrders(dateChosen.toLocaleDateString());
        times = timesGet.booked;
        let selectTimes = '</p><p><label>Выберите время: </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">Отправить</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>');
        }
    })
}

Ненужную для понимания вопроса логику убрал. Первый вопрос: нормальная ли это практика, динамически менять таким образом страницу через jQuery? Так как делаю по одному учебнику сугубо в практических целях: сделать учебное задание, не совсем ориентируюсь в том, как принято делать, как не принято. Второй и главный вопрос: как мне теперь получить и правильно отправить данные из формы? Есть ли пример синтаксиса в таком случае (без php). В форме есть атрибут onsubmit, можно указать функцию обработчик там, но есть ли пример того, как это делается? И нужно ли в таком случае в submit button ставить еще дополнительно функцию обработчик на onclick? Мне нужно получить данные с формы, провалидировать их, и вызвать метод CreateOrder c этими данными. На сервере это все корректно обработается, это я настроил, но не нашел нормальных примеров, как написать корректно onsubmit или onclick, в который мне понадобится передать 1 параметр: дату, полученную ранее.

Answer 1

Использовать jQuery в 2020, кроме обеспечения работоспособности legacy кода, выглядит забавно - поголовно все современные браузеры уже включают схожую функциональность Document.querySelector

Есть два способа обработки форм: используя мануальную обработку клика по кнопке и обработчик submit. Первый способ требует отмены штатного submit атрибутом в html, чтобы не перезагружалась страница

<form onsubmit="return false">
  <p>Email: <input type="email"></p>
  <p>Password: <input type="password"></p>
  <button type="reset">Clear</button>
  <button type="button">Submit</button>
</form>
<script>
  (function() {
    document.querySelector('button[type="button"]').addEventListener('click', () => {
      const email = document.querySelector('input[type="email"]').value;
      const password = document.querySelector('input[type="password"]').value;
      console.log({email, password}) // {email: 'tripolskypetr@gmail.com', password: 'p@$$w0rd'}
    });
  })();
</script>

Второй позволяет отменить перезагрузку страницы через отмену события напрямую. Он ближе к правде, но в случае с программированием на JS без фреймворков, не панацея.

<form>
  <p>Email: <input name="email" type="email"></p>
  <p>Password: <input name="password" type="password"></p>
  <button type="reset">Clear</button>
  <button type="submit">Submit</button>
</form>
<script>
  (function() {
    document.querySelector('form').addEventListener('submit', (e) => {
      e.preventDefault();
      console.log(new Map(new FormData(e.target))); // [ ["email","tripolskypetr@gmail.com"], ["password","p@$$w0rd"] ]
    });
  })();
</script>

Лично я пользуюсь первым способом. Дело вкуса. Выберите ваш