Как показать form при нажатии на кнопку с помощью javascript?

125
19 января 2019, 01:10

В общем, есть несколько одинаковых форм и кнопок под ними. Изначально формы скрыты:

<style>
.form111{
    display: none;
}
</style>
<div>
  <form class="form111">
    <input type="text" placeholder="Enter">
    <input type="submit" value="button">
  </form>
  <button class="button111">button2</button>
</div>
<div>
  <form class="form111">
    <input type="text" placeholder="Enter">
    <input type="submit" value="button">
  </form>
  <button class="button111">button2</button>
</div>
<div>
  <form class="form111">
    <input type="text" placeholder="Enter">
    <input type="submit" value="button">
  </form>
  <button class="button111">button2</button>
</div>

Нужно, чтобы при нажатии на кнопку открывалась форма, а кнопка пропадала.

Также есть код на js, который позволяет кнопке пропадать:

var button111 = document.querySelectorAll('.button111');
for(var i = 0; i < button111.length; i++){
    button111[i].onclick = function(){
        this.style.display = 'none';
    }
}

Но вот как открывать при этом форму, я не знаю.
Пробовал такой код, но открываются сразу все формы:

var form111 = document.querySelectorAll('.form111');
var button111 = document.querySelectorAll('.button111');
    for(var i = 0; i < button111.length; i++){
        button111[i].onclick = function(){
            this.style.display = 'none';
            for(var y = 0; y < form111.length; y++){
                form111[y].style.display = 'block';
        }
    }
}
Answer 1

var button111 = document.querySelectorAll('.button111'); 
for(var i = 0; i < button111.length; i++){ 
    button111[i].onclick = function(){ 
        var form = this.parentElement.getElementsByClassName('form111')[0]; 
        form.style.display = 'block'; 
        this.style.display = 'none'; 
    } 
}
.form111{ 
    display: none; 
}
<div> 
  <form class="form111"> 
    <input type="text" placeholder="Enter"> 
    <input type="submit" value="button"> 
  </form> 
  <button class="button111">button2</button> 
</div> 
<div> 
  <form class="form111"> 
    <input type="text" placeholder="Enter"> 
    <input type="submit" value="button"> 
  </form> 
  <button class="button111">button2</button> 
</div> 
<div> 
  <form class="form111"> 
    <input type="text" placeholder="Enter"> 
    <input type="submit" value="button"> 
  </form> 
  <button class="button111">button2</button> 
</div>

READ ALSO
Как исправить баг sticky topbar + выпадающие меню?

Как исправить баг sticky topbar + выпадающие меню?

Есть topbar для мобильной навигации, при скороле использую sticky от foundation, что бы прикрепить его к верхней части страницыКогда полностью открывается...

208
Поиск по таблице по названию

Поиск по таблице по названию

На странице есть таблица с валютами, вот код

180
Ограничение по объему хранимых данных Vuex Store

Ограничение по объему хранимых данных Vuex Store

Друзья, подскажите, есть ли какие-нибудь ограничения объема данных, которые можно постоянно держать в Vuex StoreОтразиться ли на скорости работы...

113
Перенаправление на другую страницу php

Перенаправление на другую страницу php

есть код отправления почты с формы, нужно сделать перенаправление со страницы отправки на главную страницу сайтаВот код отправки:

138