Блог

Главная - Вопросы по программированию - Как передать значение из текстового поля с типом email в функцию в javascript

Как передать значение из текстового поля с типом email в функцию в javascript

#javascript #html

Вопрос:

         <form id="form2" method="get" action="#">
            <table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
                <tr>
                    <td>TP Email</td>
                    <td>:</td>
                    <td><input type="email" id="email2" size="40" maxlength="24"/></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td>:</td>
                    <td><input type="password" id="password2" size="40"/></td>
                </tr>
                <tr>
                    <td>amp;nbsp;</td>
                    <td>amp;nbsp;</td>
                    <td><button id="button2" onclick="myFunction();">Login</button>
                        <script type="text/javascript">
                            function myFunction() {
                                var email2 = document.getElementById("email2").value;
                                alert(email2);
                                if (email2.toString() == 'illyam@gmail.com'){
                                    location.replace("admin.html");
                                }else{
                                    alert("Incorrect password or email");
                                }
                            }
                        </script></td>
                </tr>
                <tr>
                    <td>amp;nbsp;</td>
                    <td>amp;nbsp;</td>
                    <td>Do not have an account?<a href="sign_up.html" 
                    style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
                </tr>
            </table>
        </form>

Эта функция должна получить значение из текстового поля с идентификатором email2, и если оно равно определенному значению, то она перенаправляется на другую страницу.

Комментарии:

1. Вы не должны использовать onclick . (Это устарело). Используйте прослушиватели событий: developer.mozilla.org/en-US/docs/web/api/eventlistener

2. Вы не передаете значения из html в javascript. Вы можете получать значения из html с помощью Javascript. Я надеюсь, что это поможет.

3. Фрагмент, которым вы поделились, работает на меня. С какой проблемой вы столкнулись?

4. всякий раз, когда я набираю правильное электронное письмо, оно не перенаправляет меня на другую страницу

Ответ №1:

Когда вы нажимаете кнопку Входа в систему, она должна перенаправляться на другую страницу, но вам нужно использовать event.preventDefault() в своей функции myFunction.

Попробуйте следующий код—

 <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, world!</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
    />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <form id="form2" method="get" action="#">
      <table
        
        style="
          width: 800px;
          border: 0;
          padding: 16px;
          padding-left: 120px;
          vertical-align: central;
        "
      >
        <tr>
          <td>TP Email</td>
          <td>:</td>
          <td><input type="email" id="email2" size="40" maxlength="24" /></td>
        </tr>
        <tr>
          <td>Password</td>
          <td>:</td>
          <td><input type="password" id="password2" size="40" /></td>
        </tr>
        <tr>
          <td>amp;nbsp;</td>
          <td>amp;nbsp;</td>
          <td>
            <button id="button2" onclick="myFunction(event)">Login</button>
            <script type="text/javascript">
              function myFunction(event) {
                event.preventDefault();
                var email2 = document.getElementById("email2").value;
                alert(email2);
                if (email2.toString() == "illyam@gmail.com") {
                  location.replace("admin.html");
                } else {
                  alert("Incorrect password or email");
                }
              }
            </script>
          </td>
        </tr>
        <tr>
          <td>amp;nbsp;</td>
          <td>amp;nbsp;</td>
          <td>
            Do not have an account?<a
              href="sign_up.html"
              style="background-color: #e6e6e6; color: #ce171c"
              >Sign Up</a
            >
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

Ответ №2:

может передавать значения в функции JavaScript, подобные этому:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function myFunction(email) {

            if (email == 'illyam@gmail.com'){
                location.replace("https://admin.html")
               
                alert('redirecting to admin page')
            }else{
                alert("Incorrect password or email");
            }
           
        }
    </script>
</head>
<body>
    <form id="form2" method="get" action="#">
        <table border="0" style="width: 800px; border: 0; padding: 16px; padding-left: 120px; vertical-align: central;">
            <tr>
                <td>TP Email</td>
                <td>:</td>
                <td><input type="email" id="email2" size="40" maxlength="24"/></td>
            </tr>
            <tr>
                <td>Password</td>
                <td>:</td>
                <td><input type="password" id="password2" size="40"/></td>
            </tr>
            <tr>
                <td>amp;nbsp;</td>
                <td>amp;nbsp;</td>
                <td><button id="button2" onclick="myFunction(document.getElementById('email2').value);">Login</button>
                   </td>
            </tr>
            <tr>
                <td>amp;nbsp;</td>
                <td>amp;nbsp;</td>
                <td>Do not have an account?<a href="sign_up.html" 
                style="background-color: #E6E6E6; color: #CE171C;">Sign Up</a></td>
            </tr>
        </table>
    </form>
    
</body>
</html>

Ответ №3:

Я думаю, что вы хотите установить значения внутри текстового поля, а затем получить их в качестве переменных с помощью JS. Вы можете сделать свой HTML похожим на это…

 <td><button id="button2" onclick="myFunction(event);">Login</button></td>

А затем разместите свой тег JS-скрипта под тегом закрывающей формы следующим образом…

 <script type="text/javascript">
    function myFunction(event) {
        event.preventDefault();
        var email2 = document.getElementById("email2").value;
        if(email2.toString() == 'illyam@gmail.com'){
            location.replace("admin.html");
        }else{
            alert("Incorrect password or email");
        }
    }
</script>

Ваша функция HTML onclick теперь передает «событие» в качестве аргумента, этот объект события будет использоваться в вашем сценарии для отмены обычной операции отправки формы, пока вы получаете значения электронной почты и оцениваете их.
Это достигается с помощью функции event.preventdefault (), которая останавливает работу формы по умолчанию для отправки информации.

Примечание: Я бы рекомендовал вам использовать PHP и базу данных для входа в систему, так как наличие ваших учетных данных в вашем сценарии опасно, так как кто-то может легко просмотреть ваш код и увидеть их.

Удачи вам в вашем проекте.

Метки: