Вставить в input значение введенное ранее?

Question

Сергей Миллер @blackseabreathe

brackets

JavaScript

Вставить в input значение введенное ранее?

Есть поля

<input type="text" name="name" id="name">
<input type="text" name="surname" id="surname">

Также есть три radio кнопки

<input type="radio" name="shippingMethod" value="sdek" class="shippingMethod">
<input type="radio" name="shippingMethod" value="rupost" class="shippingMethod">
<input type="radio" name="shippingMethod" value="pickup" class="shippingMethod">

Пытаюсь сделать так чтобы если выбран pickup, то в поля name и surname вставить текст "самовывоз" и, при этом, сохранить введенные данные до выбора pickup чтобы если дальше будет выбран не pickup, то вставить в name и surname ранее введенные данные.

$(document).on('change', '.shippingMethod', function(){

if($(this).val() == 'pickup'){

var name = $(document).find('#name').val(), //переменная со значением до того как установить значение "самовывоз"
surname = $(document).find('#surname').val(), //переменная со значением до того как установить значение "самовывоз"

$(document).find('#name, #surname').val('Самовывоз');
}

else{

$(document).find('#name').val(name);
$(document).find('#surname').val(surname);


}

)};

Проблема - не вставляются ранее введенные значения (var name, surname) если после клика на pickup кликаю на кнопку .shippingMethod с другим значением (sdek/rupost). Поля тупо очищаются (или вставляются пустые значения).

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

1 комментарий

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

Влад @Vextor-ltd

Если по-серьёзному, то как-то так :)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio</title>
  <style>
    body {
      min-width: 100vw;
      min-height: 100vh;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    input {
      margin: 10px;
    }
  </style>
</head>

<body>
  <div class="text-btns">
    <input type="text" name="name" id="name">
    <input type="text" name="surname" id="surname">
  </div>
  <div class="radio-btns">
    <input type="radio" name="shippingMethod" value="sdek" class="shippingMethod" checked>
    <input type="radio" name="shippingMethod" value="rupost" class="shippingMethod">
    <input type="radio" name="shippingMethod" value="pickup" class="shippingMethod">
  </div>

  <script>
    const inputName = document.getElementById('name');
    const inputSurname = document.getElementById('surname');

    [...document.querySelectorAll('[name="shippingMethod"]')].map((method) => {
      method.addEventListener('change', () => {
        if (method.value === 'pickup') {
          nameCurrentValue = inputName.value;
          surnameCurrentValue = inputSurname.value;
          inputName.value = inputSurname.value = 'самовывоз';
        } else {
          inputName.value = nameCurrentValue;
          inputSurname.value = surnameCurrentValue;
        }
      });
    });
  </script>
</body>

</html>

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

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

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

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

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

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

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

JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 11 часов назад
- 74 просмотра
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- вчера
- 77 просмотров
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- вчера
- 929 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- вчера
- 51 просмотр
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 83 просмотра
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 95 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 206 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 100 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 91 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Какие есть высокоуровневые компонентные javascript фреймворки?
- 1 подписчик
- 19 дек.
- 171 просмотр
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Расшифровать требуемые параметры из CAN-шины авто Chery Tiggo 7 Pro

23 дек. 2024, в 00:27

20000 руб./за проект

Отправка команды на (раз)блокировку двигателя Chery Tiggo 7 Pro

23 дек. 2024, в 00:15

20000 руб./за проект

Если по-серьёзному, то как-то так :)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Radio</title> <style> body { min-width: 100vw; min-height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } input { margin: 10px; } </style> </head> <body> <div class="text-btns"> <input type="text" name="name" id="name"> <input type="text" name="surname" id="surname"> </div> <div class="radio-btns"> <input type="radio" name="shippingMethod" value="sdek" class="shippingMethod" checked> <input type="radio" name="shippingMethod" value="rupost" class="shippingMethod"> <input type="radio" name="shippingMethod" value="pickup" class="shippingMethod"> </div> <script> const inputName = document.getElementById('name'); const inputSurname = document.getElementById('surname'); [...document.querySelectorAll('[name="shippingMethod"]')].map((method) => { method.addEventListener('change', () => { if (method.value === 'pickup') { nameCurrentValue = inputName.value; surnameCurrentValue = inputSurname.value; inputName.value = inputSurname.value = 'самовывоз'; } else { inputName.value = nameCurrentValue; inputSurname.value = surnameCurrentValue; } }); }); </script> </body> </html>

Answer 1 · 2021-05-11 13:58:00

Объявите переменные name, surname до навешивания обработчика, т.е. напишите вот так

var name, surname;

$(document).on('change', '.shippingMethod', function () {
    if ($(this).val() == 'pickup') {
        name = $(document).find('#name').val();
        surname = $(document).find('#surname').val();
        $('#name, #surname').val('Самовывоз');
    } else {
        $('#name').val(name);
        $('#surname').val(surname);
    }
});

Answer 2 · 2021-05-11 18:12:16

Такое решение предложили на stackOverflow

$(".fio").keyup(function(){
  $(this).data('value', $(this).val() );
});

$(".shippingMethod").change(function(){
  let v = $(this).val();
  console.log(v);
  
  if(v == 'pickup'){
    $(".fio").val("самовывоз")
  }
  else {
    $(".fio").each(function(){
       $(this).val( $(this).data('value') );
    });
  }
});

Вставить в input значение введенное ранее?

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

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

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