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

This is my whole page. I have no idea what's wrong. It's so frustrating because it is so simple.

这是我的整个页面。我不知道出了什么问题。这太令人沮丧,因为它太简单了。

When i'm trying to get out the value if my input fields it gives back nothing. Even if i make an alert before AJAX it writes out nothing. I copied an input dom get under mine and it was exactly the same one.

当我想要输出值时,如果我的输入字段它什么也没有给出。即使我在AJAX之前发出警报,它也没有写出任何内容。我复制了一个输入dom得到我的,它是完全相同的。

What's wrong?

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>
        ');
    }
?>

1 个解决方案

#1

just put your javascript outside echo statement and also wrap it inside $(document).ready();

只需将你的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>

            }
        ?>