Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Удаленная работа для IT-специалистов
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="style.css"> <title>Test form</title> </head> <body> <header> <h1>Form</h1> </header> <div class="feedback"> <form class="feedback-form" onsubmit="return validate();" action="" method="post"> <div class="feedback-form-group"> <label for="name">Ваше имя(обязательно)</label> <input type="text" name="name" id="name" class="contact-form__name"> </div> <div class="feedback-form-group"> <label for="phone">Ваш номер телефона(обязательно)</label> <input type="number" name="phone" id="phone" class="contact-form__phone" pattern="^([1-9]{1})|([1-9]{1}\d+)$"> </div> <div class="feedback-form-group"> <label for="mark">Марка автомобиля</label> <input type="text" name="mark" id="mark" class="contact-form__mark"> </div> <div class="feedback-form-group"> <label for="model">Модель автомобиля</label> <input type="text" name="model" id="model" class="contact-form__model"> </div> <div class="checkbox-area"> <label>Тип коробки передач</label> <label for="gear"><br> <input type="radio" name="gear" checked> Автомат </label> <label for="gear"> <input type="radio" name="gear"> Механика </label> </div> <div class="feedback-form-group"> <label for="price">Бюджет</label> <input type="number" name="price" id="price" class="contact-form__price" pattern="^([1-9]{1})|([1-9]{1}\d+)$"> </div> <input type="submit" class="btn btn-default" name="submit" value="Отправить"> </form> </div> <footer> </footer> <script> function validate() { var userName = document.getElementById("name"); var userPhone = document.getElementById("phone"); var autoMark = document.getElementById("mark"); const data = { name: document.querySelector('.contact-form__name').value, phone: document.querySelector('.contact-form__phone').value, mark: document.querySelector('.contact-form__mark').value, model: document.querySelector('.contact-form__model').value, price: document.querySelector('.contact-form__price').value } if (!userName.value) { alert("Вы забыли ввести Ваше имя"); return false; } if (!userPhone.value) { alert("Вы забыли ввести Ваш телефон"); return false; } if (!autoMark.value) { alert("Вы забыли ввести марку авто"); return false; } // В случае успеха формируем JSON. И передаем его в консоль //Буду пробовать два метода: Первый, это задать форме id и достать значение //через document.forms[id].elements / То есть в элементс будет объект со всеми полями. //Второй, это достать полям классы и достать значения каждого поля вручную. console.log(data); } </script> </body> </html>