Question

我有一个javascript代码，我已经硬编码到我的html文件中，但它似乎永远不会加载。我的表单立即通过post将数据发送到php文件，而不是每次都通过javascript验证。有任何想法吗？谢谢！

<!DOCTYPE html>
<html>
    <head>

        <!-- Stylesheets - boostrap and get-shit-done, a free UI -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="styelsheet" type="text/css" href="css/get-shit-done.css">
        <link rel="stylesheet" type="text/css" href="css/styles.css">

        <h1>Registration</h1>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <script>
        $('#registration').on('submit', function(e){
            var usernameValue = $("#username").val();
            var passwordValue = $("#password").val();
            var confirmationValue = $("#confirmation").val();

            // Returns successful data submission message when the entered information is stored in database.
            var dataString = 'username1='+ usernameValue + '&password1='+ passwordValue + '&confirmation1='+ confirmationValue;
            if(usernameValue==''||passwordValue==''||confirmationValue=='') {
                alert("Please Fill All Fields");
            }
            else {
                // AJAX Code To Submit Form.
                $.ajax({
                    type: "POST",
                    url: "register.php",
                    data: dataString,
                    cache: false,
                    success: function(result){
                        alert(result);
                    }
                });
            }
            return false;
        });

        </script>

    </head>


    <body>



        <form id ="registration" action="register.php" method="post">
            <fieldset>
            <legend>Registration Details</legend>
                <form class="form-inline">
                    <div class="form-group">
                        <input autocomplete="off" autofocus class="form-control" id="username" placeholder="Username" type="text"/>
                    </div>
                    <div class="form-group">
                        <input class="form-control" id="password" placeholder="Password" type="password"/>
                    </div>
                    <div class="form-group">
                        <input class="form-control" id="confirmation" placeholder="Password" type="password"/>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-default btn-round" type="submit" id="submit">
                            <span aria-hidden="true" class="glyphicon glyphicon-log-in"></span>
                            Log In
                        </button>
                    </div>
                </form>
            </fieldset>
        </form>

        <div>
            <p class="text-center">or <a href="welcome.php">login</a></p>
        </div>

</body>
</html>

Answer 1

在文档准备好之前，您需要将$('#registration').on('submit', function(e){ });包裹在$(function(){ });（或$(document).ready()）中，因为它当前已绑定 -

<script>
$(function(){    
    $('#registration').on('submit', function(e){
        ...
        [rest of your code]
        ...
    });
});
</script>

Answer 2

请尝试在jquery文档中添加脚本。实施例

    $( document ).ready(function() {
       $('#registration').on('submit', function(e){
        var usernameValue = $("#username").val();
        var passwordValue = $("#password").val();
        var confirmationValue = $("#confirmation").val();

        // Returns successful data submission message when the entered information is stored in database.
        var dataString = 'username1='+ usernameValue + '&password1='+ passwordValue + '&confirmation1='+ confirmationValue;
        if(usernameValue==''||passwordValue==''||confirmationValue=='') {
            alert("Please Fill All Fields");
        }
        else {
            // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "register.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
            });
        }
        return false;
      });
    });

永远不会加载Javascript代码

2 个答案: