Jquery不显示按钮答案

【问题标题】：Jquery not showing buttonJquery不显示按钮
【发布时间】：2020-06-23 10:35:18
【问题描述】：

登录失败时尝试显示提交按钮，但无法显示。

我的代码：-

<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 php jquery forms show

【解决方案1】：

您的脚本正在 iframe 中运行。而您的脚本想要更改 parent 中的内容。为此，您应该告诉代码在哪里执行。 (父.$().......)

下面将帮助您获取提交按钮。

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

【讨论】：

我认为您已经正确识别了问题但是该解决方案是否真的有效？
是的，解决方案父级.... 非常适合我。 @GarrGodfrey

【解决方案2】：

警报是在任何 DOM 操作之前首先执行的。您必须等待文件准备好。

试试这样的：

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

此外，如果您保留警报，则 DOM 操作将在关闭警报后进行。所以如果你想处理这个问题，你必须触发一些事件并添加一个监听器来提醒。

【讨论】：

问题不是警报，问题是：$("#loginsubmitbutton").show(); $("#register_link").show(); //Hiding Register Link 这里。我刚刚添加了警报以检查脚本是否正常工作。
您准备好文件了吗？就像我更新了我的答案一样
它正在提交到 iframe。所以javascript不会在正确的窗口中运行