@CAMOBAP4UK

Как сделать редактирование профиля в окне?

Не могу понять , как сделать что бы окнo передавались данные , которые находятся в блоке profile__Info. Нужно что бы можно было редактировать свое описание и имя в этом окне.Можно без сохранения. Спасибо
https://codepen.io/camobap6/pen/Rwrjzqo
  • Вопрос задан
  • 675 просмотров
Решения вопроса 1
@LazarchukNazar
Джаваскриптизер
Для начала, в форму необходимо добавить поля для редактирования в форму и заполнить их атрибут defaultValue через JS:
<form class="form" id="form">
            <button class="profile__buttonClose"></button>
          
          <label>
            Имя
            <input type="text" name="firstname"/>
          </label>
          <label>
            Описание
            <input type="text" name="description"/>
          </label>

          
            <button class="form__sumbit-button" type="submit">
                <h3 class="form__save">Сохранить</h3>

            </button>
        </form>

document.querySelector('input[name="firstname"]').defaultValue = 'Старое значение поля Firstname'
document.querySelector('input[name="description"]').defaultValue = 'Старое значение поля Description'

Далее, необходимо сделать нужный запрос. Если перезагрузка сайта нужна, тогда просто указываем адресс в атрибутах
<form action="..." method="..." ... >. Но если нужен асинхронный запрос, тогда делаем его через JS (в таком случае это называют AJAX), для этого можно найти сотни-тысяч примеров на codepen
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const firstname = document.querySelector('input[name="firstname"]').value;
  const description= document.querySelector('input[name="description"]').value;
  fetch('....', { body: JSON.stringify({ firstname, description}) }) // как-то так примерно, тут от ситуации
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы