Кнопки, которые скрывают/отображают генерируемые PHP формы

У меня есть две формы на PHP, которые имеют для них разные цели. Сейчас они только становятся видимыми, если администратор вошел в систему. Этот код работает отлично для этогоКнопки, которые скрывают/отображают генерируемые PHP формы

<?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>'; 
     } 

      ?>

Я не хочу, значение по умолчанию формы, чтобы быть видимыми даже для администратора, я только хочу, чтобы показать их при нажатии кнопок, которые говорят «Показать форму 1» и «Показать форму 2».

Как мне подойти к этому? Я не знаю, использовать ли Javascript или чистый PHP для него, в случае PHP, я не понимаю, как переключить видимость. Мне больше нравится javascript, но я даже не знаю, насколько вы можете комбинировать php с javascript.

PS: При переключении видимости я не хочу переключать непрозрачность.

источник

2016-06-04 JohnMichael

вывода контента вы хотите с PHP (если содержимое не является безопасным, если так что вы» вам нужно будет использовать AJAX) и не показывать никаких элементов, которые вы хотите скрывать. Затем с JS на клике нужно отобразить блок или что-то в этом роде. (или даже видимость: скрытая, видимая) – chris85

Вы можете использовать 'XMLHttpRequest()' для запроса определенного 'html' при нажатии кнопки' .innerHTML' для замены содержимого в элементе контейнера, когда запрос завершен – guest271314

Возможный дубликат [toggle show/hide div с кнопкой?] (http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button) – JohnMichael

Более ранний ответ ссылается на то, как это можно сделать с помощью jQuery. Для того, чтобы сделать то же самое без загрузки библиотеки JQuery, это поможет вам начать:

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

Примечания:

(1) Для того, чтобы создать чистый JS slideUp/slideDown эффект, см .:

https://gist.github.com/ludder/4226288

(2) jQuery намного проще и значительно меньше набирает текст, но требует загрузки библиотеки jQuery. Для того, чтобы загрузить библиотеку JQuery, просто включить ссылку на свой CDN место либо в <head> тегов или непосредственно перед </body> тегом:

<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
</head>

источник

2016-06-04 15:16:17 gibberish

Этот вопрос задан несколько раз. Но в случае, если вы не смогли найти по ссылке:

Jquery Toggle Show/Hide Div

Вы хотите использовать JavaScript для этого. Связанный метод довольно прост. Вы также можете использовать чистый CSS, но Javascript более совместим.

источник

2016-06-04 14:47:02 DMort

Спасибо, я не выглядел достаточно хорошо для ответа. Я поставил вопрос как дубликат. – JohnMichael

Кнопки, которые скрывают/отображают генерируемые PHP формы

ответ

Смежные вопросы