Проверьте, нажата ли кнопка с помощью javascript - PullRequest
Новая
       0

Проверьте, нажата ли кнопка с помощью javascript

0 голосов
/ 17 марта 2020

Это мой HTML код 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact V17</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>


    <div class="container-contact100">
        <div class="wrap-contact100">
            <form method="POST" action="/student" class="contact100-form validate-form">
                <span class="contact100-form-title">
                    STUDENT LOGIN
                </span>

                <label class="label-input100" for="phone">Enter your Student Number*</label>
                <div class="wrap-input100">
                    <input id="Sid" class="input100" type="text" name="Sid" placeholder="Eg: 957">
                    <span class="focus-input100"></span>
                </div>

                <label class="label-input100" for="email">Enter Password*</label>
                <div class="wrap-input100 ">
                    <input id="Password" class="input100" type="password" name="Password" placeholder="Password">
                    <span class="focus-input100"></span>
                </div>

                <div class="container-contact100-form-btn" class="label-input100">
                <button type="submit" id="login" class="contact100-form-btn" >
                        LOGIN 
                    </button>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                 <button type="submit" id="signup" class="contact100-form-btn">
                        SIGN UP
                    </button> 
                </div>
            </form>

            <div class="contact100-more flex-col-c-m" style="background-image: url('images/bg-01.jpg');">
                <div class="flex-w size1 p-b-47">
                    <div class="txt1 p-r-25">
                        <span class="lnr lnr-map-marker"></span>
                    </div>

                    <div class="flex-col size2">
                        <span class="txt1 p-b-20">
                            Address
                        </span>

                        <span class="txt2">
                            Anna University,Chennai
                        </span>
                    </div>
                </div>

                <div class="dis-flex size1 p-b-47">
                    <div class="txt1 p-r-25">
                        <span class="lnr lnr-phone-handset"></span>
                    </div>

                    <div class="flex-col size2">
                        <span class="txt1 p-b-20">
                            Lets Talk
                        </span>

                        <span class="txt3">
                            +91 9789404492
                        </span>
                    </div>
                </div>

                <div class="dis-flex size1 p-b-47">
                    <div class="txt1 p-r-25">
                        <span class="lnr lnr-envelope"></span>
                    </div>

                    <div class="flex-col size2">
                        <span class="txt1 p-b-20">
                            General Support
                        </span>

                        <span class="txt3">
                            contact@hostel_annaUniv.com
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div id="dropDownSelect1"></div>

<!--===============================================================================================-->
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/animsition/js/animsition.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/select2/select2.min.js"></script>
    <script>
        $(".selection-2").select2({
            minimumResultsForSearch: 20,
            dropdownParent: $('#dropDownSelect1')
        });
    </script>
<!--===============================================================================================-->
    <script src="vendor/daterangepicker/moment.min.js"></script>
    <script src="vendor/daterangepicker/daterangepicker.js"></script>
<!--===============================================================================================-->
    <script src="vendor/countdowntime/countdowntime.js"></script>
<!--===============================================================================================-->
<script src="my_js/student.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-23581568-13');
    </script>
    <script src="https://npmcdn.com/js-alert/dist/jsalert.min.js"></script>

    <!-- <script src="my_js/rc_login.js"></script> -->



</body>
</html>

Я хочу выяснить, если кто-то нажал кнопку входа или регистрации, используя внешний файл javascript. Это код, который я пробовал, но не работал. Я также пытался использовать консольные журналы вместо предупреждений, но все еще не мог получить правильный ответ. Я могу понять, что он входит в функцию EventListener формы, но не может go внутри функций. студент. js



const Form = document.querySelector('form')



Form.addEventListener('submit',(e) =>{
   document.getElementById('login').onclick = function() {
   alert("button was clicked");
}​;​

document.getElementById('sign_up').onclick = function() {
   alert("button was clicked");
}​;​
})

1 Ответ

0 голосов
/ 18 марта 2020

Связать события за пределами отправки 

let btnClicked = null

const clicked = (event) => {
  btnClicked = event.target.id
}

document.getElementById('login').addEventListener('click', clicked)
document.getElementById('sign_up').addEventListener('click', clicked)

const form = document.querySelector('form')
form.addEventListener('submit', (e) => {
  e.preventDefault()
  console.log(btnClicked)  
})  
<form>
  <button id="login">Login</button>
  <button id="sign_up">sign up</button>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...