0

当弹出警报消息时，我需要隐藏按钮等 html 控件。最初，一些控件是隐藏的，但是当弹出警报消息时，它会显示控件。如何在弹出警报消息时隐藏控件。下图显示了问题..

<html>
<head>
<script>
function disableElements()
{
    document.getElementById("name").disabled=true;
    document.getElementById("link").disabled=true;
    document.getElementById("s1").style.display="none";
    document.getElementById("c1").style.display="none";
    document.getElementById("ex1").style.display="none";
    document.getElementById("u1").style.display="none";
    document.getElementById("u2").style.display="none";
    document.getElementById("se1").style.display="none";
    document.getElementById("ladd").style.display="none";
    document.getElementById("ledit").style.display="none";
    document.getElementById("lfind").style.display="none";
    document.getElementById("ldel").style.display="none";
}
function addenable()
{
    document.getElementById("name").disabled=false;
    document.getElementById("link").disabled=false;
    document.getElementById("s1").style.display="inline";
    document.getElementById("c1").style.display="inline";
    document.getElementById("ex1").style.display="inline";
    document.getElementById("a1").style.display="none";
    document.getElementById("e1").style.display="none";
    document.getElementById("f1").style.display="none";
    document.getElementById("d1").style.display="none";
    document.getElementById("u1").style.display="none";
    document.getElementById("u2").style.display="none";
    document.getElementById("ladd").style.display="inline";
    document.getElementById("ledit").style.display="none";
    document.getElementById("lfind").style.display="none";
    document.getElementById("ldel").style.display="none";
}
</script>
</head>
<body onload="disableElements()">
<form method="post" action="#">
<input type="button" name="add" id="a1" value="Add" onclick="addenable()"/>
<input type="button" name="edit" id="e1" value="Edit"/>
<input type="button" name="find" id="f1" value="Find"/> 
<input type="button" name="delete" id="d1" value="Delete"/>
<input type="submit" name="save" id="s1" value="Save"/>
<input type="submit" name="update" id="u1" value="Update"/>
<input type="submit" name="remove" id="u2" value="Update"/>
<input type="reset" name="cancel" id="c1" value="Cancel"/>
<input type="button" name="exit" id="ex1" value="Exit" onclick="javascript:history.go(0);" />

    <table id="tbl1" width="100%" border="0" >
    <tr>
        <td><label>Name :</label></td>
        <td>&nbsp;</td>
        <td><input type="text" name="Name" size="40px" id="name" /></td>
        <td></td>
        <td><label>Website :</label></td>
        <td>&nbsp;</td>
        <td><input type="text" name="Link" size="40px" id="link" /><br/></td>
    </tr>
    <tr>
        <td><input type="button" name="search" id="se1" value="Search"/></td>
    </tr>
</table>
</form>
</body>
</html>

<?php
if(isset($_POST["save"]))
{
    if(($_POST["Name"] == '') || ($_POST["Link"] == ''))
        {
            echo '<script type="text/javascript">alert("insert values....!")</script>';
        }
        else
        {
    $name = $_POST["Name"];
    $link = $_POST["Link"];

        #inserting values
        $insert = mysql_query("INSERT INTO data (Name, Link) VALUES ('$name','$link')");
        if(!$insert)
            {
                //die ("Error". mysql_error());
                echo '<script type="text/javascript">alert("Duplicate Entry!")</script>';
            }
        else
            {
                echo '<script type="text/javascript">alert("Record Save Successflly!")</script>';
            }
    }
}

?>

在此处输入图像描述

4

3 回答 3

4

如果我是你，我会创建一个这样的函数来覆盖我的整个文档并调用 alert()。

        function hideAll(){
            var div = $('<div id="div-cover" style="background:rgba(3,3,3,.7);display:block;position:absolute;left:0px;top:0px;z-index:1000;"></div>');
            $(div).width($(document).width()).height($(document).height());
            $(document.body).prepend(div);
        }
        function showAll(){
            $('#div-cover').remove();
        }

并称它为：

hideAll();
alert();
showAll();

和

如果您只想隐藏某些元素。给它一些共同点。这里我使用 html5 数据属性和 javascript querySelectorAll，没有 jQuery。

    <input type="button" data-group="grp1" name="add" id="a1" value="Add" onclick="addenable()"/>
    <input type="button" data-group="grp1" name="edit" id="e1" value="Edit"/>
    <input type="button" data-group="grp1" name="find" id="f1" value="Find"/> 
    <input type="button" data-group="grp1" name="delete" id="d1" value="Delete"/>
    <input type="submit" data-group="grp1" name="save" id="s1" value="Save"/>
    <input type="submit" data-group="grp1" name="update" id="u1" value="Update"/>
    <input type="submit" data-group="grp1" name="remove" id="u2" value="Update"/>
    <input type="reset" data-group="grp1" name="cancel" id="c1" value="Cancel"/>
    <input type="button" data-group="grp1" name="exit" id="ex1" value="Exit" onclick="javascript:history.go(0);" />


    <script type="text/javascript">

        function hideAll(){
            var arr = document.querySelectorAll('[data-group="grp1"]');
            for(var i=0;i<arr.length;i++){
                arr[i].style.display = 'none';
            }
        }
        function showAll(){
            var arr = document.querySelectorAll('[data-group="grp1"]');
            for(var i=0;i<arr.length;i++){
                arr[i].style.display = 'inline';
            }
        }
    </script>
于 2012-11-26T10:07:54.973 回答
2

尝试$("#ex1").hide()使用 jquery

于 2012-11-26T10:00:37.667 回答
1

代替：

echo '<script type="text/javascript">alert("Duplicate Entry!")</script>';

和：

echo '<script type="text/javascript">disableElements();alert("Duplicate Entry!");</script>';

调用警报时应该隐藏控件。

于 2012-11-26T10:00:33.403 回答