Suppose you have the following button:

<button class="btn-u btn-large ">Ответить</button>

How to make it so that when you click on this button an HTML form appears below it?

  • You can add to the page immediately below the button the input form and the button, and when you click on the desired button, show the form. Either when you click to create a form (or load Ajax) and paste it on the page under the button. - Moonvvell
  • 2
    How did you try to solve the problem? Where is your code with a minimal desire to solve the problem yourself? what did you try to read on this issue? - Alex

3 answers 3

 function out() { var p = document.getElementById('out'); p.innerHTML = 'Hello'; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <link rel="stylesheet" href="D:\test\style\main.css"> <script src="D:\test\js\adaptiveMenu.js" defer></script> </head> <body> <div class="test"> <button onclick="out()" class="btn-u btn-large">Ответить</button> <hr> <p id="out"></p> </div> </body> </html>

    Hang the onclick event handler on the button. And in the body of the handler, control the display property of the form.

    https://learn.javascript.ru/introduction-browser-events

      There are 2 options:

      1. We place on the page where it is necessary in the block with display: none; our form, and when you click a button, we remove this property from the block

      2. We place on the page where you need an empty block, when you click on the button, we send ajax request to the required address, where the form code is generated, and in success ajax'a we register the insertion of the received answer into our empty block.

      Option 2 is preferred, since the form will not take up space on the page when the page loads. If in the form of just a couple of inputs, and she herself is alone on the page, then this will not give a big advantage, but if you have a lot of such buttons with a form for each page, then optimization will be on your face.