Home/ Questions/Q 8890099
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:25:21+00:00

I need to hide html controls like buttons, when alert message popups. As initially

  • 0

I need to hide html controls like buttons, when alert message popups. As initially some controls are hidden but when alert message popups it shows the controls. How to make controls hidden when alert message popup. The below image shows the problem..

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

?>

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If I were you I’ll create a function like this to cover my entire document and call 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();
        }

    And Call it like:

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

    AND

    If you want to hide certain elements only. Give it something in common. Here I’m using html5 data attribute and javascript querySelectorAll, no 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>
    • 0