douyou1960 2016-06-04 14:40
浏览 88
已采纳

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

  • 写回答

2条回答 默认 最新

  • duanmiyang6201 2016-06-04 15:16
    关注

    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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥30 Windows Server 2016利用兩張網卡處理兩個不同網絡
  • ¥15 Python中knn问题
  • ¥15 使用C#，asp.net读取Excel文件并保存到Oracle数据库
  • ¥15 C# datagridview 单元格显示进度及值
  • ¥15 thinkphp6配合social login单点登录问题
  • ¥15 HFSS 中的 H 场图与 MATLAB 中绘制的 B1 场 部分对应不上
  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源