Что отсутствует в моем коде JavaScript? Он не работает внутри поста WordPress - PullRequest
Новая
       3

Что отсутствует в моем коде JavaScript? Он не работает внутри поста WordPress

0 голосов
/ 28 октября 2018

JavaScript, jQuery Experts,

У меня есть следующая кодировка, она отлично работает, когда я проверяю ее в JSFiddle, но не работает, когда я вставляю ее в пост WordPress, так что мне делать?

Пример JSFiddle: https://jsfiddle.net/m1aaaqo9/11/

Ссылка на страницу WordPrss: https://kahoothack.net/kahoot-flood/

Примечание. Кнопка входа не работает в сообщении WordPress и не принимает пароль и имя пользователя.Кажется, JavaScript не работает там.Так как это исправить?

Проверьте мой пост на WordPress и ниже посмотрите окно входа в систему, почему оно не работает.Спасибо

Часть HTML 

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Validation Form</title>
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
<body>
<div class="container">
    <h1>Login Form</h1>
    <span>Name:admin</span>
    <span>password:123</span>
    <div class="row">
        <div class="col-md-4">
            <form action="#" method="post" class="form-box" id="form">
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
                </div>

                <div class="form-group">
                    <input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
                    <span id="Required" style="color:#ff0000;"></span>
                </div>
                <span id="error" style="color:#ff0000"></span>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  </body>
</html>

Часть JavaScript 

 $(document).ready(function(){
        $("#submit").click(function(){
            var name= $("#name").val();
            var pass = $("#pass").val();
            if(name == '' || pass == ''){
                $("#Required").html('All Feild Are Required').css('color','red');
            }else if(name == 'admin' && pass == '123'){
                 $("#form").html('<h4>User Login Successfully</h4><a href="">Back</a>').css('color','green');
             }else{
                 $("#error").html('User Are Not Valid');
             }
        });
    });

Часть CSS 

h1{
            font-size:25px;
            margin:10px 0;
        }
        .form-box{
            border:1px solid #d3d3d3;
            padding:20px;
        }


 $(document).ready(function(){
        $("#submit").click(function(){
            var name= $("#name").val();
            var pass = $("#pass").val();
            if(name == '' || pass == ''){
                $("#Required").html('All Feild Are Required').css('color','red');
            }else if(name == 'admin' && pass == '123'){
                 $("#form").html('<h4>User Login Successfully</h4><a href="https://kahoothack.net">Click</a>').css('color','green');
             }else{
                 $("#error").html('User Are Not Valid');
             }
        });
    });
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Validation Form</title>
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
<body>
<div class="container">
    <h1>Login Form</h1>
    <span>Name:admin</span>
    <span>password:123</span>
    <div class="row">
        <div class="col-md-4">
            <form action="#" method="post" class="form-box" id="form">
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
                </div>

                <div class="form-group">
                    <input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
                    <span id="Required" style="color:#ff0000;"></span>
                </div>
                <span id="error" style="color:#ff0000"></span>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Удалите весь код HTML, CSS и JS / jQuery из вашего поста и поместите в него только следующий код: 

<div class="container lh-custom">
    <h1>Login Form</h1>
    <span>Name:admin</span>
    <span>password:123</span>
    <div class="row">
        <div class="col-md-4">
            <form action="#" method="post" class="form-box" id="form">
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Enter Name"/>
                </div>
                <div class="form-group">
                    <label>Password:</label>
                    <input type="password" id="pass" name="pass" class="form-control" placeholder="Enter Password"/>
                </div>
                <div class="form-group">
                    <input type="submit" id="submit" name="pass" class="btn btn-md btn-info" value="Login"/>
                    <span id="Required" style="color:#ff0000;"></span>
                </div>
                <span id="error" style="color:#ff0000"></span>
            </form>
        </div>
    </div>
</div>

Сохраните ваш пост.

Затем вставьте следующий код вfunctions.php вашей текущей темы (Aspire Pro): 

/* Add custom jQuery and CSS */
function lh_add_custom_js_css(){
?>
    <script>
        jQuery(document).ready(function($){
            $("#submit").click(function(){
                var name= $("#name").val();
                var pass = $("#pass").val();
                if(name == '' || pass == ''){
                    $("#Required").html("All Feild Are Required").css("color","red");
                }else if(name == "admin" && pass == "123"){
                     $("#form").html('<h4>User Login Successfully</h4><a href="">Back</a>').css('color','green');
                }else{
                     $("#error").html("User Are Not Valid");
                }
            });
        });
    </script>
    <style>
        .lh-custom h1{
            font-size:25px;
            margin:10px 0;
        }
        .lh-custom .form-box{
            border:1px solid #d3d3d3;
            padding:20px;
        }
    </style>
<?php
}
add_action( 'wp_footer', 'lh_add_custom_js_css' );

Сохраните файл functions.php и проверьте страницу еще раз.

0 голосов
/ 28 октября 2018

Если вы хотите обработать отправку формы в JavaScript, привяжите к событию submit form, а не к событию click кнопки отправки.Кроме того, вам нужно отменить событие отправки формы по умолчанию следующим образом: 

$('#form').submit(function handler(event) {
     event.preventDefault(); // Cancel default form submission
     const data = new FormData(this); // JQuery binds `this` to the form DOMNode
     console.log("process the form data", data);
});

Имейте в виду, что для отправки формы по умолчанию не требуется JS.Иногда вам лучше просто отправиться на сервер и позволить ему делать свою работу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...