為什么我的javascript DOM不起作用？

Question

這是我的整個頁面。 我不知道出了什么問題。 這太令人沮喪，因為它太簡單了。

當我想要輸出值時，如果我的輸入字段，它什么也沒有給出。 即使我在AJAX之前發出警報也沒有寫出任何內容。 我復制了一個輸入dom得到我的，它是完全相同的。

怎么了？

registration.php的：

<?php
    if(isset($_POST["php_username"]) && isset($_POST["php_password"]) && isset($_POST["php_password2"]) && isset($_POST["php_email"])){
        $error = "";
        if(strlen($_POST["php_username"]) < 8){
            $error = $error."Username has to be at least 8 characters.<br>";
        }
        if(strlen($_POST["php_password"]) < 8){
            $error = $error."password has to be at least 8 characters.<br>";
        }
        if(strlen($_POST["php_username"]) > 16){
            $error = $error."Username can't be more than 16 characters.<br>";
        }
        if(strlen($_POST["php_password"]) < 16){
            $error = $error."Password can't be more than 16 characters.<br>";
        }
        if(strcmp($_POST["php_password"],$_POST["php_password2"])){
            $error = $error."Password confirmation falied.<br>";
        }
        echo($error);

    }else{
        echo('
            <div id="register-form">
                <form>
                    <h2 style="text-decoration: underline; margin-bottom: 10px;">Registration</h2><br><br>
                    Username:<br>
                    <input type="text" maxlength="16" id="username" value="asd" /><br>
                    Password:<br>
                    <input type="password" maxlength="16" id="password" /><br>
                    Confirm password:<br>
                    <input type="password" maxlength="16" id="password2" /><br>
                    E-mail address:<br>
                    <input type="email" id="email" /><br><br>
                    <input type="button" id="registration-submit" value="Signup"><br>
                    <div id="registration-response">                        
                    </div>
                </form>
            </div>
            <script>
                $("#registration-submit").click(function(){
                    var username = document.getElementById("username").value; 
                    var password = document.getElementById("password").value; 
                    var password2 = document.getElementById("password2").value; 
                    var email = document.getElementById("email").value; 

                    $.post("registration.php",{
                        "php_username": username,
                        "php_password": password,
                        "php_password2": password2,
                        "php_email": email
                    },
                    function(data, status){
                        $("#registration-response").html(data);
                        $("#registration-response").fadeIn(750);
                    });

                });
            </script>
        ');
    }
?>

Answer 1

只需將你的javascript放在echo語句之外，並將其包裝在$(document).ready();

        <?php
            if(isset($_POST["php_username"]) && isset($_POST["php_password"]) && isset($_POST["php_password2"]) && isset($_POST["php_email"])){
                $error = "";
                if(strlen($_POST["php_username"]) < 8){
                    $error = $error."Username has to be at least 8 characters.<br>";
                }
                if(strlen($_POST["php_password"]) < 8){
                    $error = $error."password has to be at least 8 characters.<br>";
                }
                if(strlen($_POST["php_username"]) > 16){
                    $error = $error."Username can't be more than 16 characters.<br>";
                }
                if(strlen($_POST["php_password"]) < 16){
                    $error = $error."Password can't be more than 16 characters.<br>";
                }
                if(strcmp($_POST["php_password"],$_POST["php_password2"])){
                    $error = $error."Password confirmation falied.<br>";
                }
                echo($error);

            }else{
                echo('
                    <div id="register-form">
                        <form>
                            <h2 style="text-decoration: underline; margin-bottom: 10px;">Registration</h2><br><br>
                            Username:<br>
                            <input type="text" maxlength="16" id="username" value="asd" /><br>
                            Password:<br>
                            <input type="password" maxlength="16" id="password" /><br>
                            Confirm password:<br>
                            <input type="password" maxlength="16" id="password2" /><br>
                            E-mail address:<br>
                            <input type="email" id="email" /><br><br>
                            <input type="button" id="registration-submit" value="Signup"><br>
                            <div id="registration-response">                        
                            </div>
                        </form>
                    </div>');


    <script>

    $(document).ready(function(){
    $("#registration-submit").click(function(){
        var username = document.getElementById("username").value; 
        var password = document.getElementById("password").value; 
        var password2 = document.getElementById("password2").value; 
        var email = document.getElementById("email").value; 

        $.post("registration.php",{
            "php_username": username,
            "php_password": password,
            "php_password2": password2,
            "php_email": email
             },
         function(data, status){
             $("#registration-response").html(data);
             $("#registration-response").fadeIn(750);
             });

           });
       });                    

   </script>

            }
        ?>