Javascript不能在PHP中运行

我试着看其他类似的帖子，但显然，我做了一些错误的地方没有我注意到它，因为我的PHP, HTML和JavaScript技能是非常过时的。我上次接触这些东西是在去年，所以我的很多故障检测技能都生疏了。

话虽如此，我要做的这段代码的结构是这样的

<?PHP //If?> 
JS //Script to check if input is empty and prevents submission
HTML <!--Input Forms-->
<?PHP //DB actions ?>

就我所能做的，PHP的语法似乎是正确的(使用PHP格式化器检查我的语法是否错误)。这里的问题是javascript部分甚至不运行。如果它运行，UI的其余部分(登录表单)会无故消失(当提供输入时)。

下面是我使用的代码。

        <?php
        if(empty($_POST["username"]) && empty($_POST["password"])){
        ?>
        <script type="text/javacsript">
        function checkField()
                    {
            if((login-form.username.value == "") || (login-form.password.value == ""))
                        {
                            alert("Please fill in both Username and Password fields");
                            return false;
                        }
                        else
                            return true;
                    }
        </script>
                <div class="panel-body">
                    <form role="form" id="login-form" action="login.php" method="post" onsubmit="return checkField();">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="Username" id="username" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" id="password" type="password" value="">
                            </div>
                            <!-- Change this to a button or input when using this as a form -->
                            <!--<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>-->
            <div class="form-group">
                <button class="btn btn-lg btn-success btn-block" type="submit">Login</button>
            </div>
                        </fieldset>
                    </form>
                </div>
        <?php
        }else {
            $message = "wrong answer";
            echo "1<script type='text/javascript'>alert('$message');</script>";
        }
        ?>

这里主要关注的是onsubmit的JavaScript。甚至在触发假定的true条件时(其中一个输入为空或两个输入都为空时)，它也不会运行。下面的第二个脚本只是我在提供数据库部分之前的初始测试运行。 <标题>编辑1

checkField()使用getElementById的Alt代码

        <script type="text/javacsript">
        function checkField()
                    {
            if((document.getElementById("username").value == "") || (document.getElementById("password").value == ""))
                        {
                            alert("Please fill in both Username and Password fields");
                            return false;
                        }
                        else
                            return true;
                    }
        </script>

<标题>编辑2 h1> 决输入错误后，当登录和密码字段都不为空时触发的PHP部分根本不会运行。action属性可能有一个hand

<form role="form" id="login_form" action="" method="post" onsubmit="return checkField();">

上面的代码是用来测试action属性是否是罪魁祸首。结果还是一样的。页面将以空字段重新加载。

最新代码

        <?php
        if(empty($_POST["username"]) && empty($_POST["password"])){
        ?>
        <script type="text/javascript">
        function checkField()
                    {
            if((document.getElementById("username").value == "") || (document.getElementById("password").value == ""))
                        {
                            alert("Please fill in both Username and Password fields");
                            return false;
                        }
                        else
                            return true;
                    }
        </script>
                <div class="panel-body">
                    <form role="form" id="login_form" action="" method="post" onsubmit="return checkField();">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="Username" id="username" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" id="password" type="password" value="">
                            </div>
                            <!-- Change this to a button or input when using this as a form -->
                            <!--<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>-->
            <div class="form-group">
                <button class="btn btn-lg btn-success btn-block" type="submit">Login</button>
            </div>
                        </fieldset>
                    </form>
                </div>
        <?php
        }else {
            $conn = mysqli_connect("localhost","root","rootacc","test");
            if($conn)
            {
                echo "success";
                header("LOCATION:tables.html");
            }
        }
        ?>

<标题> 3 编辑

所有问题解决。对于新手的问题，我很抱歉，感谢所有贡献的人。这是更正后的代码

        <?php
        if(empty($_POST["username"]) && empty($_POST["password"])){
        ?>
        <script type="text/javascript">
        function checkField()
                    {
            if((document.getElementById("username").value == "") || (document.getElementById("password").value == ""))
                        {
                            alert("Please fill in both Username and Password fields");
                            return false;
                        }
                        else
                            return true;
                    }
        </script>
                <div class="panel-body">
                    <form role="form" id="login_form" action="" method="post" onsubmit="return checkField();">
                        <fieldset>
                            <div class="form-group">
                                <input class="form-control" placeholder="Username" id="username" name="username" type="text" autofocus>
                            </div>
                            <div class="form-group">
                                <input class="form-control" placeholder="Password" id="password" name="password" type="password" value="">
                            </div>
                            <!-- Change this to a button or input when using this as a form -->
                            <!--<a href="index.html" class="btn btn-lg btn-success btn-block">Login</a>-->
            <div class="form-group">
                <button class="btn btn-lg btn-success btn-block" type="submit">Login</button>
            </div>
                        </fieldset>
                    </form>
                </div>
        <?php
        }else {
            $conn = mysqli_connect("localhost","root","rootacc","test");
            if($conn)
            {
                echo "success";
                header("LOCATION:tables.html");
            }
        }
        ?>

问题1是由于我自己的编程粗心(使用破折号而不是其他风格的变量引用)以及缺乏对getElementById的了解
问题2是由于我自己的打字错误，没有被发现。
问题3是由于缺乏对id和name的理解(似乎相同)

所有修复问题的建议都已实现。

<div class="form-group">
    <input class="form-control" placeholder="Username" id="username" name="username" type="text" autofocus>
</div>
<div class="form-group">
    <input class="form-control" placeholder="Password" id="password" name="password" type="password" value="">
</div>