SyntaxFix

[html] Hidden property of a button in HTML

I am trying to show three buttons on one button click. Before a button click all three buttons are hidden. I set the hidden property and I am also calling a function on a button click. The problem is that when I load the page all buttons are visible. It was working perfectly before I added CSS. I don't understand where the problem is.

Here is my code:

_x000D_
_x000D_ 
    .buttons a, .buttons button{_x000D_
    display:block;_x000D_
    float:left;_x000D_
    margin:0 7px 0 0;_x000D_
    background-color:#f5f5f5;_x000D_
    border:1px solid #dedede;_x000D_
    border-top:1px solid #eee;_x000D_
    border-left:1px solid #eee;_x000D_
_x000D_
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;_x000D_
    font-size:12px;_x000D_
    line-height:130%;_x000D_
    text-decoration:none;_x000D_
    font-weight:bold;_x000D_
    color:#565656;_x000D_
    cursor:pointer;_x000D_
    padding:5px 10px 6px 7px; /* Links */_x000D_
    }_x000D_
    .buttons button{_x000D_
    width:auto;_x000D_
    overflow:visible;_x000D_
    padding:4px 10px 3px 7px; /* IE6 */_x000D_
    }_x000D_
    .buttons button[type]{_x000D_
    padding:5px 10px 5px 7px; /* Firefox */_x000D_
    line-height:17px; /* Safari */_x000D_
    }_x000D_
    *:first-child+html button[type]{_x000D_
        padding:4px 10px 3px 7px; /* IE7 */_x000D_
    }_x000D_
    .buttons button img, .buttons a img{_x000D_
    margin:0 3px -3px 0 !important;_x000D_
    padding:0;_x000D_
    border:none;_x000D_
    width:16px;_x000D_
    height:16px;_x000D_
    }_x000D_
_x000D_
    /* STANDARD */_x000D_
_x000D_
    button:hover, .buttons a:hover{_x000D_
    background-color:#dff4ff;_x000D_
    border:1px solid #c2e1ef;_x000D_
    color:#336699;_x000D_
    }_x000D_
    .buttons a:active{_x000D_
    background-color:#6299c5;_x000D_
    border:1px solid #6299c5;_x000D_
    color:#fff;_x000D_
    }_x000D_
_x000D_
    /* POSITIVE */_x000D_
_x000D_
    button.positive, .buttons a.positive{_x000D_
    color:#529214;_x000D_
    }_x000D_
    .buttons a.positive:hover, button.positive:hover{_x000D_
    background-color:#E6EFC2;_x000D_
    border:1px solid #C6D880;_x000D_
    color:#529214;_x000D_
    }_x000D_
    .buttons a.positive:active{_x000D_
    background-color:#529214;_x000D_
    border:1px solid #529214;_x000D_
    color:#fff;_x000D_
    }_x000D_
_x000D_
    /* NEGATIVE */_x000D_
_x000D_
    .buttons a.negative, button.negative{_x000D_
    color:#d12f19;_x000D_
    }_x000D_
    .buttons a.negative:hover, button.negative:hover{_x000D_
    background:#fbe3e4;_x000D_
    border:1px solid #fbc2c4;_x000D_
    color:#d12f19;_x000D_
    }_x000D_
    .buttons a.negative:active{_x000D_
    background-color:#d12f19;_x000D_
    border:1px solid #d12f19;_x000D_
    color:#fff;_x000D_
    }_x000D_
_x000D_
    /* REGULAR */_x000D_
_x000D_
    button.regular, .buttons a.regular{_x000D_
    color:#336699;_x000D_
    }_x000D_
    .buttons a.regular:hover, button.regular:hover{_x000D_
    background-color:#dff4ff;_x000D_
    border:1px solid #c2e1ef;_x000D_
    color:#336699;_x000D_
    }_x000D_
    .buttons a.regular:active{_x000D_
    background-color:#6299c5;_x000D_
    border:1px solid #6299c5;_x000D_
    color:#fff;_x000D_
    }
_x000D_ 
<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
    <head>_x000D_
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />_x000D_
      <link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" />_x000D_
      <title>Untitled Document</title> _x000D_
      _x000D_
      <script type="text/javascript">_x000D_
      function change(){_x000D_
    document.getElementById("save").hidden = "";_x000D_
    document.getElementById("change").hidden = "";_x000D_
    document.getElementById("cancel").hidden = "";_x000D_
_x000D_
      }_x000D_
      </script>_x000D_
_x000D_
    </head>_x000D_
   _x000D_
    <body>_x000D_
      <form name="form1" method="post" action="">_x000D_
      <div class="buttons">_x000D_
_x000D_
          <button class="regular" name="edit" id="edit" onclick="change();">_x000D_
              <img src="dba_images/textfield_key.png" alt=""/>_x000D_
              Edit_x000D_
          </button>_x000D_
_x000D_
          <button type="submit" class="positive" name="save" id="save" hidden="hidden">_x000D_
              <img src="dba_images/apply2.png" alt=""/>_x000D_
              Save_x000D_
          </button>_x000D_
_x000D_
          <button class="regular" name="change" hidden="hidden" id="change">_x000D_
              <img src="dba_images/textfield_key.png" alt=""/>_x000D_
              change_x000D_
          </button>_x000D_
_x000D_
          <button class="negative" name="cancel" id="cancel" hidden="hidden">_x000D_
              <img src="dba_images/cross.png" alt=""/>_x000D_
              Cancel_x000D_
          </button>_x000D_
      </div>_x000D_
      </form>_x000D_
    </body>_x000D_
 </html>
_x000D_
_x000D_
_x000D_

What changes can I make, so that when I click on edit it sets the hidden property of three buttons to false?

This question is related to html button hidden

The answer is

It also works without jQuery if you do the following changes:

  1. Add type="button" to the edit button in order not to trigger submission of the form.

  2. Change the name of your function from change() to anything else.

  3. Don't use hidden="hidden", use CSS instead: style="display: none;".

The following code works for me:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="STYLESHEET" type="text/css" href="dba_style/buttons.css" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function do_change(){
document.getElementById("save").style.display = "block";
document.getElementById("change").style.display = "block";
document.getElementById("cancel").style.display = "block";
}
</script>
<body>
<form name="form1" method="post" action="">
<div class="buttons">

<button type="button" class="regular" name="edit" id="edit" onclick="do_change(); return false;">
    <img src="dba_images/textfield_key.png" alt=""/>
    Edit
</button>

<button type="submit" class="positive" name="save" id="save" style="display:none;">
    <img src="dba_images/apply2.png" alt=""/>
    Save
</button>

<button class="regular" name="change" id="change" style="display:none;">
    <img src="dba_images/textfield_key.png" alt=""/>
    change
</button>

    <button class="negative" name="cancel" id="cancel" style="display:none;">
        <img src="dba_images/cross.png" alt=""/>
        Cancel
    </button>
</div>
</form>
</body>
</html>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>

function showButtons () { $('#b1, #b2, #b3').show(); }

</script>
<style type="text/css">
#b1, #b2, #b3 {
display: none;
}

</style>
</head>
<body>

<a href="#" onclick="showButtons();">Show me the money!</a>

<input type="submit" id="b1" value="B1" />
<input type="submit" id="b2" value="B2"/>
<input type="submit" id="b3" value="B3" />

</body>
</html>

Source: Stackoverflow.com

Examples related to html

• Embed ruby within URL : Middleman Blog • Please help me convert this script to a simple image slider • Generating a list of pages (not posts) without the index file • Why there is this "clear" class before footer? • Is it possible to change the content HTML5 alert messages? • Getting all files in directory with ajax • DevTools failed to load SourceMap: Could not load content for chrome-extension • How to set width of mat-table column in angular? • How to open a link in new tab using angular? • ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to button

• How do I disable a Button in Flutter? • Enable/disable buttons with Angular • Disable Button in Angular 2 • Wrapping a react-router Link in an html button • CSS change button style after click • Circle button css • How to put a link on a button with bootstrap? • What is the hamburger menu icon called and the three vertical dots icon called? • React onClick function fires on render • Run php function on button click

Examples related to hidden

• bootstrap 4 responsive utilities visible / hidden xs sm lg not working • How to get current formatted date dd/mm/yyyy in Javascript and append it to an input • Hidden property of a button in HTML • What's the best way to identify hidden characters in the result of a query in SQL Server (Query Analyzer)? • Making a button invisible by clicking another button in HTML • Check div is hidden using jquery • Windows batch script to unhide files hidden by virus • jQuery - Detect value change on hidden input field • posting hidden value • Make one div visible and another invisible

Tags

Sitetemplate Google-alerts Sendmail Mpeg-2 Headset Quote Recurring Icloneable Hyperion Pivotaltracker Tdbgrid Tadotable System-integration Toplink-essentials Crystal-reports-export Apache-commons-cli Nsfilewrapper Linqdatasource Dmd Qtoolbar Rules Logical-tree Descendant Add-in Timeval Server-error Presenter Inches Word-2007 Ads-api Asdf Broadcast Transactionscope Flowdocumentscrollviewer Routed Android-package-managers Qlineedit Oc4j Usage-tracking Doctest Attr-accessible Paperless Pypy Temp Height Associative Appleevents Printf Asp.net-mvc Mnemonics Menu Josso Inexact-arithmetic Xps-generation Mapnik Altiris Ati Target-framework Asp.net-4.0 Proof-system Java-ws Powershell-jobs Stunnel Smoothing Python-import Nhibernate-metadata Prime-factoring Launchdagent Spam Profiler Setthreadaffinitymask Hungarian-notation Countdownevent Spectrogram Sens Dvd Stringbuffer Multivalue-database Jacl Editview Uitabbar Uppercase Nslocale Errordocument Online-storage Composite-component Datagridviewcellstyle Ternary-operator Winhelp File-descriptor Spl Nssearchfield Env Password-encryption Sympy Arrange-act-assert 256color Dbghelp Xnu Model-glue