Very Cool One - PHP Online

Form of PHP Sandbox

Enter Your PHP code here for testing/debugging in the Online PHP Sandbox. As in the usual PHP files, you can also add HTML, but do not forget to add the tag <?php in the places where the PHP script should be executed.



Your result can be seen below.

Result of php executing





Full code of Very Cool One.php

  1. <?php
  2. function generateOneHTMLform(){
  3.     $form = '<form>
  4.         <label>
  5.         <p>Form 1</p>
  6.         <input/>
  7.         </label>
  8.     </form>';
  9.     return $form;
  10. }
  11. function generateNForm($n){
  12.     $form = '<form>';
  13.     for($i =0; $i < $n; $i++){
  14.         $form = $form . '<label><p>It\'s '.$i.'-th form</p></label>';
  15.         $form = $form . '<input/>';
  16.     }
  17.     $form =$form .'</form>';
  18.     return $form;
  19. }
  20. function generateSecondHTMLform(){
  21.     $form = '<form>
  22.         <label>
  23.         <p>Form 2</p>
  24.         <input/>
  25.         <p>Form 2</p>
  26.         <input/>
  27.         <p>From PHP</p>
  28.         <input/>
  29.         </label>
  30.     </form>';
  31.     return $form;
  32. }?>
  33.  
  34. <body>
  35.     <style>
  36.         /*.Modal.active{*/
  37.         /*    display: block;*/
  38.         /*}*/
  39.     </style>
  40.     <section>
  41.         <p>Content</p>
  42.     </section>
  43.     <button class='btn'>Button you press for form 1</button>
  44.     <section>
  45.         <p>Content2</p>
  46.     </section>
  47.     <button class='btn'>Button you press for form 2</button>
  48.     <section>
  49.         <p>Content2</p>
  50.     </section>
  51.     <button class='btn'>Button you press for form 3</button>
  52.     <section>
  53.         <p>Content2</p>
  54.     </section>
  55.     <button class='btn'>Button you press for form 4</button>
  56.     <section>
  57.         <p>Content2</p>
  58.     </section>
  59.     <button class='btn'>Button you press for form 5</button>
  60.     <section>
  61.         <p>Content2</p>
  62.     </section>
  63.     <button class='btn'>Button you press for form 6</button>
  64.     
  65.     <div class="Modal" id="modal" style="position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; background: gray; display: none;"></div>
  66.     <script>
  67.         const modalWrapper = document.querySelector('#modal');
  68.         
  69.         const btns = document.querySelectorAll('.btn');
  70.         
  71.         const formsArray = [`<?= generateOneHTMLform() ?>`, `<?= generateSecondHTMLform() ?>`, `<?= generateNForm(1) ?>`,`<?= generateNForm(2) ?>`,`<?= generateNForm(3) ?>`,`<?= generateNForm(4) ?>`]
  72.         document.addEventListener('click', e => {
  73.             modalWrapper.style.display = 'none';
  74.         })
  75.         modalWrapper.addEventListener('click', e => e.stopPropagation())
  76.         btns.forEach( (el, index) => el.addEventListener('click', e=>{
  77.             e.stopPropagation();
  78.             modalWrapper.style.display = 'block';
  79.             modalWrapper.innerHTML = formsArray[index];
  80.         } ))
  81.     </script>
  82. </body>
  83.  
  84.  
  85.  
  86.  
  87.  
File Description
  • Very Cool One
  • PHP Code
  • 15 Mar-2021
  • 2.34 Kb
You can Share it: