JohnMichael JohnMichael - 6 months ago 9
PHP Question

Buttons that hide/show PHP generated forms

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.

Answer

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>