How do I click a button to see a form with js? [duplicate]

Navigation
0

I looked for the stackoverflow and did not find anything similar, so here's the question:

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

Thank you.

    
asked by anonymous 21.01.2017 / 21:12

2 answers

1

You can do 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 do so toggle by clicking on 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>
    
21.01.2017 / 21:18
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 click and fadeIn events, but as you did not specify, I used JS vanilla

    
21.01.2017 / 21:18
Receiving JSON Data - PHP Receive Firebird exception message in PHP