Переход на сайт с помощью кнопки

134
20 декабря 2020, 00:00

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

Моя кнопка была реализована с помощью 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>

READ ALSO
Добавить набор свойств к элементу

Добавить набор свойств к элементу

Когда создается объект jquery, в него можно добавить различные свойства через объект, будь то текст, атрибут или стили:

121
Как получить цвет пикселя на который нажал пользователь picturebox? (C#)

Как получить цвет пикселя на который нажал пользователь picturebox? (C#)

Мне нужно получить цвет пикселя, на который нажал пользователь на BitmapДелаю я это в событии MouseClick вот так:

94
Как повернуть изображение,не влияя на общий угол графики в PictureBox

Как повернуть изображение,не влияя на общий угол графики в PictureBox

В pictureBox'e есть несколько разных изображенийОдно из этих изображений должно поворачиваться в сторону координат клика мыши и следовать к ним

111
одни и те же данные в БД, entity framework

одни и те же данные в БД, entity framework

Как сделать так , что бы одни и те же данные не записывались в БД

102