Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 06.05.2016
Сообщений: 14

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

04.08.2016, 14:08. Показов 1319. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день! Такая ситуация:

На одной странице у меня имеется такой код (пользователь вводит своё имя):
HTML5
1
<input class="input" name="name" maxlength="20" type="text" placeholder="Введите имя*"  />
После ввода имени в это поле он нажимает кнопку и открывается что-то на подобии модального окна, блок div
HTML5
1
<div id="openModal" class="modalDialog">
Задача: отобразить в открывшемся блоке div введённое имя посредством любого языка и метода после клика на ту самую кнопку

Не могу никак разобраться как это реализовать, нужна Ваша помощь!
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
04.08.2016, 14:08
Ответы с готовыми решениями:

Проблема с формой (<form action=1.php method=post> <input type=text name='first'> <input type=submit value=ok>)
Я пишу: &lt;form action=1.php method=post&gt; &lt;input type=text name='first'&gt; &lt;input type=submit value=ok&gt; по идее 1.php должен принять...

результат выборки из БД: rs.next(); String text=rs.getString('text'); <input type=text name=name value=<%=text%>>
Возникла проблема в текстовое поле надо вывести результат выборки из БД rs.next(); String text=rs.getString('text'); &lt;input...

Транслировать текст, набранный в <input type=text>, в элемент <div>
Помогите совсем новичку. Задание: Создать на странице элемент HTML &lt;input type=text&gt; элемент &lt;div&gt;&lt;/div&gt;. Написать...

3
23 / 23 / 7
Регистрация: 27.07.2015
Сообщений: 149
04.08.2016, 14:27
Код писать не буду, лишь скажу с помощью чего это сделать.
1). Подключаешь к странице jquery.
2). Пишешь скрипт javascript.
- считываешь значение поля инпута
- добавляешь в див по на пример кнопке.
0
Эксперт по компьютерным сетямЭксперт NIX
 Аватар для Dmitry
13440 / 7534 / 830
Регистрация: 09.09.2009
Сообщений: 29,554
04.08.2016, 14:27
яваскриптом взять value из поля и вставить в див
0
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
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
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.08.2016, 14:31
Помогаю со студенческими работами здесь

Подскажите как прочитать текстовую строку в поле текст (input type=text)
Я пишу чат и там при клике на чатовца в поле ввода текста появляется например : 'для Login' и дальше сообщение или 'приват Login' и дальше...

Не выделяется текст и не работает input type="text" в IE6-7
Доброго времени суток. Подскажите, кто знает. Столкнулся с такой ситуацией – в ИЕ6-7 не работает в форме элемент input type=”text”, а...

Как сделать текст на фоне у input type="text"?
Уже как то делал, но забыл. Вот пример(нажмите вверху на &quot;Оставить заявку&quot;): del Добавлено через 8 минут Все, до самого доперло....

Значение input type range в type text и обратно
Доброго времени, уважаемые форумчане! Подскажет немного, запутался уже и в гугле найти не получается. Сделал 2 инпута ...

HTML!? На странице есть рисунок.gif, когда я его перетягиваю в INPUT Type"text", то в нем пишется полный адрес его ==>
так вот, как сделать так, чтобы вместо полного адреса вставлялся только код, допустим &lt;1&gt;?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Установка 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. Задача: при создании документов установить период списания автоматически. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru