隐藏/显示PHP生成表单的按钮

隐藏/显示PHP生成表单的按钮

问题描述:

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.

我在PHP中有两种形式,它们有不同的用途。 现在只有管理员登录才会显示它们。这段代码可以正常工作 p>

 &lt;?php 
 if(isset($ _ SESSION ['username'  ]))
 {
 echo'&lt; / nav&gt; 
&lt; br&gt;&lt; br&gt;  &lt; div class =“blogscript”&gt; 
&lt; form id =“form1”action =“sent.php”method =“post”&gt; 新页面&lt; br&gt; 
&lt; input type =“text”placeholder =“Title”method =“POST”name =“pagetitle”/&gt;&lt; br&gt;&lt; br&gt; 
&lt; textarea id =“message  “name =”message&lt; / textarea&gt;&lt; br&gt; 
&lt; input type =“submit”value =“确认”/&gt; 
&lt; / form&gt;&lt; / div&gt;'; 
} 
  
 if(isset($ _ SESSION ['username']))
 {
 echo'&lt; / nav&gt; 
&lt; br&gt;&lt; br&gt;&lt; div class =“collagescript”&gt; 
&lt;  ; form id =“form2”action =“sent.php”method =“post”&gt; new collage&lt; br&gt; 
&lt; textarea id =“collage”name =“message”&gt;&lt; / textarea&gt;&lt;  br&gt; 
&lt; input type =“submit”value =“确认”/&gt; 
&lt; / form&gt;&lt; / div&gt;'; 
} 
 
?&gt; 
  code>   pre> 
 
 

我不希望表格的默认值即使对于管理员也可见,我只想在单击按钮时显示它们,表示“显示表单1”和“显示表单” 2“。 p>

我怎么会这样 接近那个? 我不知道是否使用Javascript或纯PHP,在PHP的情况下,我不知道如何切换可见性。 我对javascript感觉更舒服,但我甚至不知道你可以将php与javascript结合起来。 p>

PS:通过切换可见性,我不是指切换不透明度。 p> div>

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>
</div>

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.