Javascript Form How to - Show and hide buttons

Question

We would like to know how to show and hide buttons.

Answer


<html>
<script type="text/javascript">
  function do_change() {<!--from   w  w w  .ja  v a  2  s  .  co m-->
    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;">Edit</button>

      <button type="submit" class="positive" name="save" id="save"
        style="display: none;">Save</button>

      <button class="regular" name="change" id="change"
        style="display: none;">change</button>

      <button class="negative" name="cancel" id="cancel"
        style="display: none;">Cancel</button>
    </div>
  </form>
</body>
</html>

The code above is rendered as follows: