Отобразить текст из <input type="text" /> на странице

@Алексей525 · Регистрация: 06.05.2016

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

Добрый день! Такая ситуация:

На одной странице у меня имеется такой код (пользователь вводит своё имя):

HTML5
1
<input class="input" name="name" maxlength="20" type="text" placeholder="Введите имя*"  />

После ввода имени в это поле он нажимает кнопку и открывается что-то на подобии модального окна, блок div

HTML5
1
<div id="openModal" class="modalDialog">

Задача: отобразить в открывшемся блоке div введённое имя посредством любого языка и метода после клика на ту самую кнопку

Не могу никак разобраться как это реализовать, нужна Ваша помощь!

@Programust · 04.08.2016, 14:27

Код писать не буду, лишь скажу с помощью чего это сделать.
1). Подключаешь к странице jquery.
2). Пишешь скрипт javascript.
- считываешь значение поля инпута
- добавляешь в див по на пример кнопке.

Dmitry · 04.08.2016, 14:27

яваскриптом взять value из поля и вставить в див

@evikza · 04.08.2016, 14:31

Алексей525, JS + jQuery

HTML5
1
2
3
4
5
6
7
<input class="input" name="name" maxlength="20" type="text" placeholder="Введите имя*" />
 
<button class="btn">click!</button>
 
<div id="openModal" class="modalDialog">
  <div class="text"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.modalDialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.text {
  padding: 1em 2em;
  background-color: #eee;
  display: none;
}

JavaScript
1
2
3
4
5
6
7
8
$('.btn').click(function() {
  var name = $('input').val();
  if (name.trim() == '') {
    alert('Пожалуйста, введите хоть что нибудь!')
  } else {
  $('.text').html('Ваше имя: ' + name).css('display', 'block').fadeIn().delay(3000).fadeOut();
  }
});

Пример: http://codepen.io/evikza/pen/RRZAyK

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Programust 23 / 23 / 7 Регистрация: 27.07.2015 Сообщений: 149
	04.08.2016, 14:27
	Код писать не буду, лишь скажу с помощью чего это сделать. 1). Подключаешь к странице jquery. 2). Пишешь скрипт javascript. - считываешь значение поля инпута - добавляешь в див по на пример кнопке. 0

Dmitry 13440 / 7534 / 830 Регистрация: 09.09.2009 Сообщений: 29,554
	04.08.2016, 14:27
	яваскриптом взять value из поля и вставить в див 0