Всем привет! Есть код с формой регистрации, в конце есть кнопка, если все условия выполнены верно нужно перейти на сайт. Хочу узнать как задать кнопке условия чтобы после регистрации она перекидывала на сайт.
Моя кнопка была реализована с помощью input type="submit" , пробовал сделать событие onClick, но если делать так, то оно не проверят мои условия для имени, пола и даты. А просто переходит на новую страницу по нажатию. А мне нужно чтобы если пользователь ввел все правильно, только тогда при нажатии переходить на сайт. Заранее спасибо за ответ и помощь
Вот мой код
var form = document.getElementById('form'); //получаю форму по айди
form.addEventListener('submit',function(e){ // ставлю на форму слушатель событий ра екшен submit(когба будет нажата кнопка с типом submit в форме), вторым аргументом идёт функция что сработает если произойдёт событие, в ней переменая e(название может быть любое), в которой всякие штуки для обраюотки события
valid(form);//вызываю ту фукнции и передаю в неё форму
noChecked(form);
//noDate(form);
e.preventDefault();//отменяю стандартное поведение события submit(обновление страници)
})
// Проверка на нажатие радио кнопок
function noChecked(form) {
if (document.getElementById('women').checked || document.getElementById('men').checked) {
//
}
else {
document.getElementById('forStatus').style.display = 'inline-flex';
}
}
function valid (form) {
var name = form.name.value;
var dateStr = document.getElementById("date").value;
// Создание объекта Date из даты введённой пользователем
// и текущего времени
var date = new Date(dateStr), now = new Date();
// "Грубое" вычисление возраста и разницы между месяцами и днями
var age = now.getYear() - date.getYear(),
monthDiff = now.getMonth() - date.getMonth(),
dayDiff = now.getDate() - date.getDate();
// проверяем наступил ли день рождения в текущем году
// и если ещё не наступил, то уменьшаем возраст
if(monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
if (name == "" || name==" ") {
document.getElementById('forName').style.display = 'block';
}
// Если мужчина < 21
else if (document.getElementById('men').checked && age < 21) {
document.getElementById('forDate').style.display = 'inline-flex';
}
// Если женщина < 18
else if (document.getElementById('women').checked && age < 18) {
// alert('Вы мужчина!Error!');
document.getElementById('forDate').style.display = 'inline-flex';
}
//
//
else if (document.getElementById('women').checked) {
alert('Вы женщина!');
}
//
//
}
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
body {
background-image: url(img/reg_bg.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
}
form {
background: #fff;
display: block;
width: 30%;
margin: 30vh 0 0 35%;
height: 35vh;
}
form h1 span {
color: #ff8b38;
}
.input_name input { /* Для имени */
margin: 0 10px 0 10px;
border: none;
border-bottom: 1px solid #ff8b38;
outline: none;
font-size: 14px;
}
.input_name {
margin: 3% 0 0 25%;
}
.input_status {
margin: 2% 0 0 27%;
}
.input_status #men {
}
.input_date {
margin-left: 25%;
}
.input_date input { /* Для даты */
margin: 0 10px 0 10px;
border: none;
border-bottom: 1px solid #ff8b38;
outline: none;
}
.input_name, .input_status, .input_date { /* Для имени, пола и даты */
display: inline-flex;
flex-direction: row;
}
#forName, #forStatus, #forDate { /* Для имени, пола и даты */
display: none;
color: red;
}
/* Для кнопки */
#myButton {
background-color: rgba(255,139,56,0.9);
color: #fff;
cursor: pointer;
border: 2px solid #d16c21;
width: 50%;
padding: 2% 0%;
margin: 2% 0 0 25%;
font-size: 14px;
}
#myButton:hover {
cursor: pointer;
background: rgba(255,139,56,0.8);
transition: 0.2s;
border: 2px solid #ff8b21;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form registration on JavaScript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="">
</head>
<body>
<form action="index1" method="post" name="form" id="form">
<h1 style="text-align: center; font-family: 'Open Sans', sans-serif;">Form Reg on <span>J</span>ava<span>S</span>cript</h1>
<div class="input_name">
<input class="for_name" type="text" placeholder="Введите своё имя" id="name">
<div class="for_name" id="forName">
<p style="margin: 0;"><img src="img/red-cross.png" alt="Red cross" style="margin-top: 2.5px;" title="Вы не ввели имя"></p>
</div>
</div>
<br><br>
<div class="input_status">
<input type="radio" id="men" name="status" value="men">
<label for="men" style="margin: 0 10px 0 5px">Мужской</label>
<input type="radio" id="women" name="status" value="women">
<label for="women" style="margin: 0 10px 0 5px;">Женский</label>
<div class="for_status" id="forStatus">
<p style="margin: 0;"><img src="img/red-cross.png" alt="Red cross" style="margin-top: 2.5px;" title="Вы не ввели пол"></p>
</div>
</div>
<br><br>
<div class="input_date">
<input type="date" id="date" style="width: 175px;">
<div class="for_date" id="forDate">
<p style="margin: 0;"><img src="img/red-cross.png" alt="Red Cross" style="margin-top: 2.5px;" title="Вы слишком молоды для этого сайта"></p>
</div>
</div>
<br><br>
<input type="submit" value="Войти" name="submit" id="myButton"/>
</form>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Когда создается объект jquery, в него можно добавить различные свойства через объект, будь то текст, атрибут или стили:
Мне нужно получить цвет пикселя, на который нажал пользователь на BitmapДелаю я это в событии MouseClick вот так:
В pictureBox'e есть несколько разных изображенийОдно из этих изображений должно поворачиваться в сторону координат клика мыши и следовать к ним
Как сделать так , что бы одни и те же данные не записывались в БД