Hide forms with javascript

how to hide a form in angular

I have been trying to hide my form and making it appear only when user click on the button. but for some reason, the function I have created never work is there something wrong with my code? and I saw quite a few example that uses angular.module and I tried it but I always get an error message. transfer.component.html

import < Component, OnInit >from '@angular/core'; import < AuthService >from '../auth.service'; import < FormBuilder, FormGroup >from '@angular/forms'; import < Router >from '@angular/router'; import < Http >from '@angular/http'; import < PostsService >from '../posts.service'; @Component(< selector: 'app-transfer', templateUrl: './transfer.component.html', styleUrls: ['./transfer.component.css'] >) export class TransferComponent implements OnInit < constructor(private fb: FormBuilder, private http: Http, private router: Router, private auth: AuthService,private postsService: PostsService) < >transfer = <>; addRiciver = <>; recivers: any; AddRiciverForm: FormGroup; transferForm: FormGroup; public userEmail: string; show=false; ngOnInit() < this.transferForm = this.fb.group(< emailTo: '', amount: '' >); this.AddRiciverForm = this.fb.group(< emailTo: '' >); this.auth.currentEmail.subscribe(email => this.userEmail = email); this.postsService.getAllReciver().subscribe(reciver => < this.recivers = reciver; >); > transFunds() < >addRiciverFunc() < this.addRiciver=< emailFrom: this.userEmail, emailTo: this.AddRiciverForm.value.emailTo >this.http.post('/transfer', this.addRiciver) .subscribe(res => < let >, (err) => < console.log(err); >); > AddEmailFunc() < if(!this.show)< this.show = true; >> > 

Источник

Hide forms with javascript

Last updated: Jan 11, 2023
Reading time · 2 min

# Show/Hide a Form on button click using JavaScript

To show or hide a form on a button click:

1. Add a click event listener to the button element.
2. Each time the button is clicked check if the form element is hidden.
3. If the form is hidden, show it, otherwise hide the form.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> title>bobbyhadz.comtitle> head> body> form id="form"> input type="text" /> input type="text" /> input type="text" /> form> button id="btn">Toggle form visibilitybutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  const form = document.getElementById('form'); if (form.style.display === 'none')  // 👇️ this SHOWS the form form.style.display = 'block'; > else  // 👇️ this HIDES the form form.style.display = 'none'; > >); 

The style.display property removes the form from the DOM, if you want to make the form element invisible, but still take up space on the screen, scroll down to the example that uses the style.visibility property.

We added a click event listener to the button element.

On each click, we check if the form’s display property is set to none .

If the form is already hidden, we show it by setting its display property to block .

On the other hand, if the form is not hidden, we hide it by setting its display property to none .

We used the display property in the example. However, you might need to use the visibility property depending on your use case.

When an element’s display property is set to none , the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, when an element’s visibility property is set to hidden , it still takes up space on the page, however, the element is invisible (not drawn). The element still affects the layout on your page as normal.

# Show/Hide a Form on button click using visibility

Here is an example that uses the visibility property to make the form element invisible, but still take up space on the page.

Copied! 
const btn = document.getElementById('btn'); btn.addEventListener('click', () =>  const form = document.getElementById('form'); if (form.style.visibility === 'hidden')  form.style.visibility = 'visible'; > else  form.style.visibility = 'hidden'; > >); 

If you click on the button element, you will see that the form becomes invisible, but the button doesn’t take its place on the page.

Even though the form element is not rendered, it still affects the layout on the page as normal.

When we used the display property to hide the form element, the button would take its place in the DOM as the form element got completely removed from the document.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Hiding a form after submit with js

I’m trying to hide the form and show a loading GIF after submitting it. I’ve tried many methods and this is one of them. I tried replacing ClassName with Id and it didn’t work. It’s a school project. I’ve spent way too long wondering what I’m doing wrong here and I am not sure what else to try. The login button says «Kirjaudu». html:

* < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: helvetica; font-size: 14px; background-size: 200% 100% !important; background: url('../img/login.jpg'); height: 100vh; overflow-y: hidden; >header < z-index: 2; background: linear-gradient(#2b2b2b 31%, #1b1b1b 100%); opacity: 100%; width: 100%; height: 70px; box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.5); >header < display: flex; position: fixed; top: 0; >header p < color: #AAAAAA; margin-left: 10%; >a img < margin: 10px; >.user < width: 90%; max-width: 340px; margin-left: 39%; margin-top: 10%; position: absolute; >.user__header < text-align: center; opacity: 0; transform: translate3d(0, 500px, 0); animation: arrive 500ms ease-in-out 0.7s forwards; >.user__title < font-family: Arial; margin-bottom: -10px; font-weight: 500; color: white; >.form < margin-top: 40px; border-radius: 6px; overflow: hidden; opacity: 0; transform: translate3d(0, 500px, 0); animation: arrive 500ms ease-in-out 0.9s forwards; >.form--no < animation: NO 1s ease-in-out; opacity: 1; transform: translate3d(0, 0, 0); >.form__input < display: block; width: 100%; padding: 20px; font-family: $font-family; -webkit-appearance: none; border: 0; outline: 0; transition: 0.3s; opacity: 80%; &:focus < background: darken(#fff, 3%); >> .btn-prim < display: block; width: 100%; padding: 20px; font-family: $font-family; -webkit-appearance: none; outline: 0; border: 0; border-radius: 0px 0px 7px 7px; color: white; background: #ABA194; transition: 0.3s; >.btn-prim:hover < background: #91897d; cursor: pointer; >.btn-sec < display: block; width: 100%; padding: 20px; font-family: $font-family; -webkit-appearance: none; outline: 0; border: 3px solid transparent; color: white; background: transparent; transition: 0.3s; >.btn-sec:hover < color: #91897d; cursor: pointer; >.loading < background-image: url(../img/loading.gif); width: 200px; height: 200px; display: none; >@keyframes NO < from, to < -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); >10%, 30%, 50%, 70%, 90% < -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); >20%, 40%, 60%, 80% < -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); >> @keyframes arrive < 0% < opacity: 0; transform: translate3d(0, 50px, 0); >100% < opacity: 1; transform: translate3d(0, 0, 0); >> @keyframes move < 0% < background-position: 0 0 >50% < background-position: 100% 0 >100% < background-position: 0 0 >> 

      else < echo ' Väärä käyttäjänimi ja/tai salasana  '; //Väärä käyttäjänimi ja/tai salasana = Wrong username and/or password header( "refresh:2;url=login.php" ); > > ?>

Источник

Hide or show form elements with Javascript, partially working

Only the last pair of radio buttons work to reveal the last name field, when subscribe is clicked. The target is that whenever one or more subscribe is selected, the last name field is always shown. When no unsubscribe is selected the last name field is hidden. Clicking the various radio buttons should create those results. Thanks in advance. Simple HTML Form

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

3 Answers 3

Try (you write about first_name, but your code snippet show/hide last_name — so I show how to do it for last name — to change this change var lastName = document.getElementById(«2»); to var lastName = document.getElementById(«1»); (I edit only JS code — HTML unchanged)

function test() < var subscr = document.getElementsByClassName("subscribe"); var lastName = document.getElementById("2"); lastName.style.display = "none"; let show=false; for (var i = 0; i < subscr.length; i++) < if(subscr[i].checked) show=true; >if(show) lastName.style.display = ""; >

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

«. you write about first_name, but your code snippet show/hide last_name.» Thanks Kami. I’ve edited my question

Thank you. This works great. I updated my local copy from to E.g. var lastName = document.getElementById(«IdLastName»);

I guess this is what you are looking for

document.getElementById("fn").style.visibility = "hidden"; function test() < var subscr = document.getElementsByClassName("subscribe"); var unsubscr = document.getElementsByClassName("unsubscribe"); var lastName = document.getElementById("2"); for (var i = 0; i < subscr.length; i++) < if (subscr[i].checked) < lastName.style.display = ""; document.getElementById("fn").style.visibility = "initial"; >else < lastName.style.display = "none"; >> >

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

Here, tidied up a bit. NOTE: is invalid, recommend a change.

const getRadioButtons = () => Array.from(document.querySelectorAll('input[type="radio"]')); const getName = () => document.querySelector('input[name="first_name"'); document.addEventListener('DOMContentLoaded', () => < let radioButtons = getRadioButtons(); let name = getName(); radioButtons.forEach(b => < b.addEventListener('change', (event) => < let show = (radioButtons.some(e =>e.checked)) ? "block" : "none"; name.style.display = show; >); >); >);

The target is that whenever one or more ‘subscribe’ is selected, the ‘first name’ field is always shown. When no ‘unsubscribe’ is selected the ‘first name field is hidden. Clicking the various radio should create those results. Thanks in advance.

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

Источник

Hide or show form elements with Javascript, partially working

Only the last pair of radio buttons work to reveal the last name field, when subscribe is clicked. The target is that whenever one or more subscribe is selected, the last name field is always shown. When no unsubscribe is selected the last name field is hidden. Clicking the various radio buttons should create those results. Thanks in advance. Simple HTML Form

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

3 Answers 3

Try (you write about first_name, but your code snippet show/hide last_name — so I show how to do it for last name — to change this change var lastName = document.getElementById(«2»); to var lastName = document.getElementById(«1»); (I edit only JS code — HTML unchanged)

function test() < var subscr = document.getElementsByClassName("subscribe"); var lastName = document.getElementById("2"); lastName.style.display = "none"; let show=false; for (var i = 0; i < subscr.length; i++) < if(subscr[i].checked) show=true; >if(show) lastName.style.display = ""; >

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

«. you write about first_name, but your code snippet show/hide last_name.» Thanks Kami. I’ve edited my question

Thank you. This works great. I updated my local copy from to E.g. var lastName = document.getElementById(«IdLastName»);

I guess this is what you are looking for

document.getElementById("fn").style.visibility = "hidden"; function test() < var subscr = document.getElementsByClassName("subscribe"); var unsubscr = document.getElementsByClassName("unsubscribe"); var lastName = document.getElementById("2"); for (var i = 0; i < subscr.length; i++) < if (subscr[i].checked) < lastName.style.display = ""; document.getElementById("fn").style.visibility = "initial"; >else < lastName.style.display = "none"; >> >

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

Here, tidied up a bit. NOTE: is invalid, recommend a change.

const getRadioButtons = () => Array.from(document.querySelectorAll('input[type="radio"]')); const getName = () => document.querySelector('input[name="first_name"'); document.addEventListener('DOMContentLoaded', () => < let radioButtons = getRadioButtons(); let name = getName(); radioButtons.forEach(b => < b.addEventListener('change', (event) => < let show = (radioButtons.some(e =>e.checked)) ? "block" : "none"; name.style.display = show; >); >); >);

The target is that whenever one or more ‘subscribe’ is selected, the ‘first name’ field is always shown. When no ‘unsubscribe’ is selected the ‘first name field is hidden. Clicking the various radio should create those results. Thanks in advance.

Adhoc
subscribe
unsubscribe

---

news_newsletter
subscribe
unsubscribe

---

Источник