Jquery not showing button

user_13798104 0
Viewed 223

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>

So when I try to login with the above codes:

  1. It alerts Logged In when credentials are correct.
  2. It only alerts Error when credentials are not correct (password incorrect) (But as per the code it should show the submit button again.)
  3. It alerts Email not found when Email is not found
show forms php jquery javascript
2 Answers

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>';
user_76787880

The thing is alert is first executed before any DOM manipulation. You have to wait for document ready.

Try something like this:

echo '<script> 
        $(document).ready(function(){
           $("#loginsubmitbutton").show(); //Hiding submit button
           $("#register_link").show(); //Hiding Register Link 
        });        
      </script>';

Also if you keep the alert, the DOM manipulation will take post closing the alert. So if you want to handle that you have to trigger some event and add a listener to alert.

user_64657690
Related