В JavaScript работа с формами — обычная задача при разработке веб-приложений. Одним из важных аспектов является получение значения элемента управления формой (ввод, выбор, текстовая область и т. д.) для обработки пользовательского ввода или выполнения проверки. В этой статье мы рассмотрим несколько методов получения значения элемента управления формы, а также приведем практические примеры кода.

Метод 1. Использование свойства value

const inputElement = document.getElementById('myInput');
const value = inputElement.value;
console.log(value);

Метод 2: использование API FormData

const formElement = document.getElementById('myForm');
const formData = new FormData(formElement);
const value = formData.get('myInput');
console.log(value);

Метод 3: доступ к значению через form.elements

const formElement = document.getElementById('myForm');
const value = formElement.elements['myInput'].value;
console.log(value);

Метод 4. Использование querySelector

const value = document.querySelector('#myForm input[name="myInput"]').value;
console.log(value);

Метод 5: доступ к значению с помощью getAttribute

const inputElement = document.getElementById('myInput');
const value = inputElement.getAttribute('value');
console.log(value);

Метод 6: использование jQuery

const value = $('#myInput').val();
console.log(value);

Метод 7: доступ к значению с помощью угловых форм

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
  selector: 'my-component',
  template: `
    <form #myForm="ngForm">
      <input name="myInput" ngModel>
    </form>
  `
})
export class MyComponent {
  logValue(form: NgForm) {
    console.log(form.value.myInput);
  }
}

Вот некоторые методы, которые можно использовать для извлечения значения элемента управления формой в JavaScript. В зависимости от требований вашего проекта и используемых вами фреймворков или библиотек вы можете выбрать наиболее подходящий метод. Не забудьте выбрать метод, который лучше всего соответствует вашим потребностям с точки зрения простоты, совместимости и производительности.