How to do when clicking a button appear a form with js?

Asked

Viewed 2,295 times

0

I looked, by stackoverflow and found nothing similar, so here’s the question:

How can I, when clicking on 1 button, automatically appear 1 form on the same page with js?

Thank you.

javascript html

2 answers

1


You can do it like this:

var btn = document.getElementById('btn_form');
var form = document.getElementById('my_form');

btn.addEventListener('click', function() {
  form.style.display = 'block';
});
#my_form {
 display: none;
}
<button id="btn_form">Mostrar Form</button>

<form id="my_form">
  <input type="text">
  <input type="submit">
</form>

To toggle (hide/show) by pressing the same button:

var btn = document.getElementById('btn_form');
var form = document.getElementById('my_form');

btn.addEventListener('click', function() {
  if(form.style.display != 'block') {
    form.style.display = 'block';
    return;
  }
  form.style.display = 'none';
});
#my_form {
 display: none;
}
<button id="btn_form">Mostrar Form</button>

<form id="my_form">
  <input type="text">
  <input type="submit">
</form>

0

CSS

#form {
   display: none;
}

HTML

<button id="button">Clique aqui</button>
<form id="form">
    <!--Seu form aqui -->
</form>

JS

document.getElementById("button").addEventListener("click", displayForm);
function displayForm() {
    document.getElementById("form").style.display = 'block';
}

I recommend using jQuery for these events click and fadein, but as you did not specify, I used JS vanilla

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.