隐藏/显示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:
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.