Nicky HFE Nicky HFE - 1 month ago 10
PHP Question

Javascript doesn't run in PHP

I tried to look in other similar posts but apparently, I did something wrong somewhere without me noticing it as my PHP, HTML and JavaScript skills are very outdated. Last I touched these things was last year, so a lot of my fault detection skills are rusty.

That being said, the piece of code I'm trying to do is structured like this


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



As far as I can do, the syntax of the PHP seems correct (used php formatter to check if my syntax is wrong). The problem here is the javascript portion does not even run. And if it runs, the remainder of the UI (login form) disappears for no reason (when input is supplied).

Below is the code I'm using.

<?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>";
}
?>


JavaScript for onsubmit is the main concern here. It does not even run when the supposed true condition is triggered (when either of the inputs are empty or both are empty). And the secondary script below, is just my initial test run before supplying the database portion.

Edit 1



Alt code for checkField() using getElementById

<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>


Edit 2



After resolving the typo, the PHP portion which is triggered when both login and password fields are not empty does not run at all. The action attribute might have a hand

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


The code above is to test if the action attribute is the culprit. Still the result is the same. The page will reload with empty fields.

Latest code

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


Edit 3



All problems resolved. Sorry for the newbie question, thank you for all who contributed. Here's the corrected code

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


Issue 1 is due to my own programming sloppiness (using dash instead of other styles of variable referencing) as well as the lack of knowledge on getElementById

Issue 2 is due to my own typo which wasn't spotted.

Issue 3 is due to the lack of understanding on id and name (seems the same)


All recommendation to fix the issues are implemented.

Answer

The post parameters are not set, that may be the reason it's not going to ELSE condition.

<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>

Use, "name" attribute to set the POST parameters.