Jquery not showing button

Trying to show the submit button when the login fails, but unable to show it.

My Code:-

<html>

<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
  <style>
    .hiddenFramehideclass {
      position: absolute;
      top: -1px;
      left: -1px;
      width: 1px;
      height: 1px;
    }
  </style>
</head>

<body>
  <form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="loginform" target="hiddenFrame">
    <h2>Login</h2>
    <hr />
    <label for="emailid">Email: </label>
    <input id="emailid" type="text" placeholder="Email" name="txtulogindetail" required />
    <br /><br /><br />
    <label for="passwordid">Password: </label>
    <input id="passwordid" type="password" placeholder="Password" name="txtupass" required />
    <hr />
    <button type="submit" class="btn btn-success" name="btn-login" id="loginsubmitbutton">Sign in</button>
    <br /><br /><br />
    <span id="register_link"> <a href= "register">Register!</a></span>

    <hr />


  </form>

  <iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe>
</body>

<script>
  /*Submit Button Clicked Function Starts */

  $("#loginsubmitbutton").click(function() {

    $("#loginsubmitbutton").hide(); //Hiding submit button
    $("#register_link").hide(); //Hiding Register Link

    /*Making Inputs to readonly Starts*/

    $("input").css({
      'pointer-events': 'none'
    });

    /*Making Inputs to readonly Ends*/


  });

  /*Submit Button Clicked Function Ends */
</script>


<?php
if(isset($_POST['btn-login'])) {

$email = trim($_POST['txtulogindetail']); 
$password = trim($_POST['txtupass']); 

$stmt = $myclass->runQuery("SELECT * FROM users WHERE Email=:lrn LIMIT 1");
$stmt->bindparam(":lrn",$email);
$stmt->execute();
if($stmt->rowCount() > 0){

if($myclass->login($email,$password)){
    echo '<script> alert("Logged In"); </script>';
}
else{
    echo '<script>         
        $("#loginsubmitbutton").show(); //Hiding submit button
        $("#register_link").show(); //Hiding Register Link 
        alert("Error");
        </script>';
}
}
else{
    echo '<script> alert("Email Not Found"); </script>';
}

}

?>


</html>

JavaScript
​x
 
<html>​<head><script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>  <style>    .hiddenFramehideclass {      position: absolute;      top: -1px;      left: -1px;      width: 1px;      height: 1px;    }  </style></head>​<body>  <form method="post" class="needs-validation" action="" enctype="multipart/form-data" id="loginform" target="hiddenFrame">    <h2>Login</h2>    <hr />    <label for="emailid">Email: </label>    <input id="emailid" type="text" placeholder="Email" name="txtulogindetail" required />    <br /><br /><br />    <label for="passwordid">Password: </label>    <input id="passwordid" type="password" placeholder="Password" name="txtupass" required />    <hr />    <button type="submit" class="btn btn-success" name="btn-login" id="loginsubmitbutton">Sign in</button>    <br /><br /><br />    <span id="register_link"> <a href= "register">Register!</a></span>​    <hr />​​  </form>​  <iframe name="hiddenFrame" class="hiddenFramehideclass"></iframe></body>​<script>  /*Submit Button Clicked Function Starts */​  $("#loginsubmitbutton").click(function() {​    $("#loginsubmitbutton").hide(); //Hiding submit button    $("#register_link").hide(); //Hiding Register Link​    /*Making Inputs to readonly Starts*/​    $("input").css({      'pointer-events': 'none'    });​    /*Making Inputs to readonly Ends*/​​  });​  /*Submit Button Clicked Function Ends */</script>​​<?phpif(isset($_POST['btn-login'])) {​$email = trim($_POST['txtulogindetail']); $password = trim($_POST['txtupass']); ​$stmt = $myclass->runQuery("SELECT * FROM users WHERE Email=:lrn LIMIT 1");$stmt->bindparam(":lrn",$email);$stmt->execute();if($stmt->rowCount() > 0){​if($myclass->login($email,$password)){    echo '<script> alert("Logged In"); </script>';}else{    echo '<script>                 $("#loginsubmitbutton").show(); //Hiding submit button        $("#register_link").show(); //Hiding Register Link         alert("Error");        </script>';}}else{    echo '<script> alert("Email Not Found"); </script>';}​}​?>​​</html>​

So when I try to login with the above codes:

It alerts Logged In when credentials are correct.
It only alerts Error when credentials are not correct (password incorrect) (But as per the code it should show the submit button again.)
It alerts Email not found when Email is not found

Answer

Your script is running in iframe. And your script wants to change the things in parent. For this you should tell the code where to be executed. (parent.$()…….)

Below will help you to get the submit button.

echo '<script>         
    parent.$("#loginsubmitbutton").show(); //Hiding submit button
    parent.$("#register_link").show(); //Hiding Register Link 
    //alert("Error");
    </script>';

JavaScript
 
echo '<script>             parent.$("#loginsubmitbutton").show(); //Hiding submit button    parent.$("#register_link").show(); //Hiding Register Link     //alert("Error");    </script>';​

Advertisement

Answer