Текст в инпут не сохраняется?

Question

dfymrf3 @dfymrf3

Текст в инпут не сохраняется?

Не могу понять как при введении нового текста в инпут,что бы он сохранялся при нажатии на save_buttons

<script>
            let edit_buttons = document.querySelectorAll(".edit-btn");
            let save_buttons = document.querySelectorAll(".save-btn");
            let cancel_buttons = document.querySelectorAll(".cancel-btn");

            for (let i = 0; i < edit_buttons.length; i++) {
                let inputValue = edit_buttons[i].previousElementSibling.innerText;
                 

                edit_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].previousElementSibling.innerHTML = `<input type="text" value="${inputValue}">`;
                    save_buttons[i].hidden = false;
                    cancel_buttons[i].hidden = false;
                    edit_buttons[i].hidden = true;               
                });
                save_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].hidden = true;
                    
                    save_buttons[i].hidden = true;
                    cancel_buttons[i].hidden = false;
            })
            cancel_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].hidden = false;
                    edit_buttons[i].previousElementSibling.innerHTML = inputValue;
                    save_buttons[i].hidden = true;
                    cancel_buttons[i].hidden = true;
            })
            };

    </script>

Вопрос задан более трёх лет назад
196 просмотров

4 комментария

Подписаться 1 Простой 4 комментария

Stalker_RED @Stalker_RED

Куда сохранялся?

Написано более трёх лет назад

dfymrf3 @dfymrf3 Автор вопроса

Stalker_RED,получается в инпут,там изначально стоит значение Иван,а ща я могу кинуть показать же
a0559877.xsph.ru/lk.php
Чтобы я мог вписать туда другое имя и оно сохранилось там

<body>
        <div class="container mt-5">
            <h1>Личный кабинет</h1>
            <p>Имя: <span><?= $_SESSION['name']?></span>
                <span class="edit-btn" >[Изменить]</span>
                <span class="save-btn" hidden>[Сохранить]</span>
                <span class="cancel-btn" hidden>[Отменить]</span>
            </p>
            <p>Фамилия: <span><?= $_SESSION['lastname']?></span>
                <span class="edit-btn" >[Изменить]</span>
                <span class="save-btn"hidden>[Сохранить]</span>
                <span class="cancel-btn"hidden>[Отменить]</span>
            </p>
            <p>E-mail:<?= $_SESSION['lastname']?> </p>
            <p>Id:<?= $_SESSION['lastname']?> </p>
        </div>
        <script>
            let edit_buttons = document.querySelectorAll(".edit-btn");
            let save_buttons = document.querySelectorAll(".save-btn");
            let cancel_buttons = document.querySelectorAll(".cancel-btn");

            for (let i = 0; i < edit_buttons.length; i++) {
                let inputValue = edit_buttons[i].previousElementSibling.innerText;
                 

                edit_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].previousElementSibling.innerHTML = `<input type="text" value="${inputValue}">`;
                    save_buttons[i].hidden = false;
                    cancel_buttons[i].hidden = false;
                    edit_buttons[i].hidden = true;               
                });
                save_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].hidden = true;
                    

                    save_buttons[i].hidden = true;
                    cancel_buttons[i].hidden = false;
            })
            cancel_buttons[i].addEventListener("click", () => {                   
                    edit_buttons[i].hidden = false;
                    edit_buttons[i].previousElementSibling.innerHTML = inputValue;
                    save_buttons[i].hidden = true;
                    cancel_buttons[i].hidden = true;
            })
            };

    </script>

Написано более трёх лет назад

v3shin @v3shin

Он и так сохраняется в инпуте, если руками ничего не трогать и страницу не перезагружать.
Вы где хотите хранить значение инпута?

Написано более трёх лет назад
dfymrf3 @dfymrf3 Автор вопроса

v3shin, Когда нажимаю отмена,поле ввода исчезает.Вот нужно когда нажимаю сохранить ,поле ввода исчезает и там новое введенное имя

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Skillbox

JavaScript

3 месяца

Далее
Яндекс Практикум

Фронтенд-разработчик расширенный

13 месяцев

Далее
Академия Eduson

Fullstack-разработчик на JavaScript

11 месяцев

Далее

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

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

Похожие вопросы

JavaScript

+1 ещё

Простой
Как лучше реализовать подобное?
- 1 подписчик
- вчера
- 165 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно реализовать что то вроде селекта внутри родителя у которого есть скрытые элементы и должна быть горизонтальная прокрутка?
- 1 подписчик
- 11 дек.
- 110 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как идентифицировать проксированные ошибки?
- 1 подписчик
- 05 дек.
- 126 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать резкое переключение слайдов?
- 1 подписчик
- 03 дек.
- 167 просмотров
0

ответов
JavaScript

Простой
Как сделать чтоб условия не перезаписывались?
- 1 подписчик
- 02 дек.
- 226 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Элемент стилизации на js, как сделать чтобы не было резкой смены картинки фона?
- 1 подписчик
- 27 нояб.
- 214 просмотров
1

ответ
JavaScript

Простой
Переход по ссылке с параметром на конкретный узел в vis.js?
- 1 подписчик
- 24 нояб.
- 119 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как сделать сложную виртуализацию?
- 1 подписчик
- 22 нояб.
- 288 просмотров
2

ответа
HTML

+1 ещё

Средний
В какую сторону копать решение чтобы решить проблему с наложением?
- 1 подписчик
- 22 нояб.
- 142 просмотра
0

ответов
HTML

+1 ещё

Простой
Как растянуть вложенный блок внутри других блоков на максимальную длину, но не более чем на ширину страницы?
- 1 подписчик
- 21 нояб.
- 144 просмотра
0

ответов
Показать ещё Загружается…

Fullstack JavaScript разработчик

MakeDifference

от 60 000 до 110 000 ₽

Frontend-разработчик (Vanilla JS, high-load media platform)

Karma8

от 200 000 до 300 000 ₽

Fullstack-разработчик (PHP, Vue.js)

Qwintry

от 1 200 до 2 000 $

Stalker_RED,получается в инпут,там изначально стоит значение Иван,а ща я могу кинуть показать же
a0559877.xsph.ru/lk.php
Чтобы я мог вписать туда другое имя и оно сохранилось там

<body> <div class="container mt-5"> <h1>Личный кабинет</h1> <p>Имя: <span><?= $_SESSION['name']?></span> <span class="edit-btn" >[Изменить]</span> <span class="save-btn" hidden>[Сохранить]</span> <span class="cancel-btn" hidden>[Отменить]</span> </p> <p>Фамилия: <span><?= $_SESSION['lastname']?></span> <span class="edit-btn" >[Изменить]</span> <span class="save-btn"hidden>[Сохранить]</span> <span class="cancel-btn"hidden>[Отменить]</span> </p> <p>E-mail:<?= $_SESSION['lastname']?> </p> <p>Id:<?= $_SESSION['lastname']?> </p> </div> <script> let edit_buttons = document.querySelectorAll(".edit-btn"); let save_buttons = document.querySelectorAll(".save-btn"); let cancel_buttons = document.querySelectorAll(".cancel-btn"); for (let i = 0; i < edit_buttons.length; i++) { let inputValue = edit_buttons[i].previousElementSibling.innerText; edit_buttons[i].addEventListener("click", () => { edit_buttons[i].previousElementSibling.innerHTML = `<input type="text" value="${inputValue}">`; save_buttons[i].hidden = false; cancel_buttons[i].hidden = false; edit_buttons[i].hidden = true; }); save_buttons[i].addEventListener("click", () => { edit_buttons[i].hidden = true; save_buttons[i].hidden = true; cancel_buttons[i].hidden = false; }) cancel_buttons[i].addEventListener("click", () => { edit_buttons[i].hidden = false; edit_buttons[i].previousElementSibling.innerHTML = inputValue; save_buttons[i].hidden = true; cancel_buttons[i].hidden = true; }) }; </script>
Он и так сохраняется в инпуте, если руками ничего не трогать и страницу не перезагружать.
Вы где хотите хранить значение инпута?
v3shin, Когда нажимаю отмена,поле ввода исчезает.Вот нужно когда нажимаю сохранить ,поле ввода исчезает и там новое введенное имя

Answer 1 · 2021-07-14 12:36:38

Выбрасываем всё, ставим атрибут contenteditable.

Фичи:
Работает во всех браузерах этого тысячелетия (включая ИЕ 5.5, да-да!).
Сохраняет изменеия автоматически.
Кастомизируется стилями!
Поддерживает ctrl+z, ctrl+v и другие фичи привычного текстового редактора!

Можно, конечно, при наведении показать кнопочки типа "редактировать, сохранить" но не очень понятно зачем.

Текст в инпут не сохраняется?

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

Минуточку внимания

Войдите на сайт