Buttons that hide/show PHP generated forms

Question

I've got two forms in PHP that have different purposes to them. Right now they are only made visible if the admin is logged in. This code works fine for it

<?php           
    if (isset($_SESSION['username']))
        {
            echo '</nav>
            <br><br>  <div class="blogscript">
            <form id="form1" action="sent.php" method="post"> New page<br>
            <input type="text" placeholder="Title" method="POST" name="pagetitle" /><br><br>
            <textarea id="message" name="message</textarea><br>
            <input type="submit" value="Confirm" />
            </form></div>'; 
        }   

    if (isset($_SESSION['username']))
        {
            echo '</nav>
            <br><br>  <div class="collagescript">
            <form id="form2" action="sent.php" method="post"> New collage<br>
            <textarea id="collage" name="message"></textarea><br>
            <input type="submit" value="Confirm" />
            </form></div>'; 
        }   

            ?>

I don't want the default of the forms to be visible even for the admin, I only want to show them when buttons are clicked that say "Show form 1" and "Show form 2".

How would I need to approach that? I don't know whether to use Javascript or pure PHP for it, in the case of PHP, I don't how how to toggle the visibility. I'm more comfortable with javascript, but I don't even know to the extent you can combine php with javascript.

PS: By toggling visibility, I don't mean toggling the opacity.

Output the content you want with PHP (unless the content is secure, if so you'll need to use AJAX) and do display none on the parts you want hidden. Then with JS on click do display block or something. (or even visibility :hidden, visible ) — chris85, Jun 04 '16 at 14:44
You could use `XMLHttpRequest()` to request specific `html` at click on button, `.innerHTML` to replace content within a container element when request completes — guest271314, Jun 04 '16 at 14:44
Possible duplicate of [toggle show/hide div with button?](http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button) — ZoEM, Jun 04 '16 at 14:58

cssyphus · Accepted Answer · 2016-06-04T15:23:43.323

The earlier answer links to how this can be accomplished with jQuery. To do the same thing without loading the jQuery library, this should get you started:

//On document ready
document.addEventListener('DOMContentLoaded', docReady, false);

function docReady(){
  document.getElementById('f1').addEventListener('click', fnF1, false )
  document.getElementById('f2').addEventListener('click', fnF2, false )
}
function fnF1(){
  document.getElementsByClassName('blogscript')[0].style.display = 'block';
  this.style.display = 'none';
}
function fnF2(){
  document.getElementsByClassName('collagescript')[0].style.display = 'block';
  this.style.display = 'none';
}

.blogscript{display:none;}
.collagescript{display:none;}

<div class="blogscript">
  <form id="form1" action="sent.php" method="post">New page
    <div>
      <input type="text" placeholder="Title" method="POST" name="pagetitle" />
    </div>
    <div>
      <textarea id="message" name="message"></textarea>
    </div>
    <input type="submit" value="Confirm" />
  </form>
</div>
<div class="collagescript">
  <form id="form2 " action="sent.php " method="post ">New collage
    <div>
      <textarea id="collage " name="message "></textarea>
    </div>
    <input type="submit " value="Confirm " />
  </form>
</div>
<button id="f1">Show Form 1</button>
<button id="f2">Show Form 2</button>

Notes:

(1) To create a pure js slideUp/slideDown effect, see:

https://gist.github.com/ludder/4226288

(2) jQuery is much simpler and significantly less typing, but requires the jQuery library to be loaded. To load the jQuery library, just include a link to its CDN location either in the <head> tags or just before the </body> tag:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

This question has been asked hundreds of times. But in case you couldn't find the link:

Jquery Toggle Show/Hide Div

You will want to use javascript for this. The linked method is pretty easy. You could also go pure CSS, but Javascript is more compatible.

edited May 23 '17 at 10:29

Community

1
1

answered Jun 04 '16 at 14:47

DMort

347
1
2
10

Thanks, I didn't look well enough for an answer. I've flagged the question as duplicate. – ZoEM Jun 04 '16 at 14:58

Buttons that hide/show PHP generated forms

2 Answers2