Активация полей по кнопке/ссылке

@ne_Proger · Регистрация: 01.11.2021

Студворк — интернет-сервис помощи студентам

В popUp div'е всплывает форма, поля которой неактивны и в полы вставлены данные из базы

HTML5
1
2
3
4
5
6
7
8
9
<form id="form">
Имя<input type="text" id="name">
<br>
Телефон<input type="text" id="phone" disabled>
<br>
email<input type="text" id="email" disabled>
<button>Редактировать</button>
</form>
Как добавить кнопку Редактировать, при нажатии на которую поля становятся активными и появляется возможность их менять?

Есть такое на JS, но тут указано одно конкретное поле .

JavaScript
1
2
3
4
5
6
7
8
9
<button onclick="disable()">Деактивировать</button>
<button onclick="enable()">Активировать</button>
<script>
function disable() {
document.getElementById("name").disabled = true;
}
function enable() {
document.getElementById("name").disabled = false;
}

Как сделать чтоб кнопка работала для всех полей сразу?

@klyapa · 25.11.2021, 22:10

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form id="form">
  <p>
    <label for="name">Имя</label>
    <input type="text" id="name" disabled>
  </p>
  <p>
    <label for="phone">Телефон</label>
    <input type="text" id="phone" disabled>
  </p>
  <p>
    <label for="email">email</label>
    <input type="text" id="email" disabled>
  </p>
  <p>
    <button id="btn" type="button">Активировать</button>
  </p>
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let inputs = document.querySelectorAll('#form input[type="text"]'),
    btn = document.querySelector('#btn'),
    flag = true;
 
btn.addEventListener('click', e => {
  inputs.forEach(input => {
    if(input.disabled) {
      input.disabled = false;
      e.currentTarget.innerText = 'Деактивировать';
      flag = !flag;
    } else {
      input.disabled = true;
      e.currentTarget.innerText = 'Активировать';
      flag = !flag;
    }
  });
});

@ne_Proger · 26.11.2021, 07:43 **[ТС]**

Странно. Код работает. Но когда вставляю уже в свой код, прекращает работать

@klyapa · 26.11.2021, 15:11

Сообщение от ne_Proger

Странно ... когда вставляю...

Не вставляйте и странности исчезнут

Добавлено через 1 час 50 минут
На все случаи ..

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--
    <form id="form">
      <p>
        <label for="name">Имя</label>
        <input type="text" id="name" disabled>
      </p>
      <p>
        <label for="phone">Телефон</label>
        <input type="text" id="phone" disabled>
      </p>
      <p>
        <label for="email">email</label>
        <input type="text" id="email" disabled>
      </p>
      <p>
        <button id="btn" type="button">Активировать</button>
      </p>
    </form>
-->
 
    <form id="form">
        Имя <input type="text" id="name">
        <br>
        Телефон <input type="text" id="phone" disabled>
        <br>
        email <input type="text" id="email" disabled>
        <button>Редактировать</button>
    </form>
 
<script>
    let inputs = document.querySelectorAll('#form input[type="text"]'),
        btn = document.querySelector('#form button'),
        flag = true;
 
    btn.type = 'button';
    inputs.forEach(input => input.disabled = true);
 
    btn.addEventListener('click', function () {
        for(let input of inputs) {
            if(input.disabled) {
                input.disabled = false;
                this.innerText = 'Деактивировать';
            } else {
                input.disabled = true;
                this.innerText = 'Активировать';
            }
        }
        flag = !flag;
    });
</script>
 
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@ne_Proger 4 / 4 / 5 Регистрация: 01.11.2021 Сообщений: 211
	26.11.2021, 07:43 [ТС]
	Странно. Код работает. Но когда вставляю уже в свой код, прекращает работать 0