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条)

报告相同问题？

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置