2

Пытаюсь сделать форму HTML с 2 полями (Имя и фамиллия) и кнопкой submit. Нужно, чтобы при нажатии кнопки submit страница с формой очистилась и на месте нее появились надписи: Имя - то, что ввел пользователь, Фамиллия - то, что ввел пользователь.

Форму вроде понятно как сделать. Но как через js очистить страницу и ввести введенные данные непонятно. В гугле примеров с результирующей страницей не нашел, везде только как форму делать.

4
  • Что вы уже пытались сделать для решения проблемы сами? Что конкретно не получилось? 19 сен 2015 в 10:11
  • Конкретно не получилось передать данные на результирующую таблицу. У меня сейчас сделана только форма. И я не понимаю: нужно создавать новый файл .htm с результирующей информацией? Как его открыть по нажатии кнопки submit? Мне бы примерчик небольшой посмотреть, и я разберусь. Просто смысл пока не очень понятен.
    – compl
    19 сен 2015 в 10:19
  • Ну так добавьте в вопрос ваш код (пусть и не работающий). 19 сен 2015 в 10:21
  • А нельзя на странице просто 2 контейнера поместить (2 div-а к примеру) и хайдить 1 из них в зависти от действий пользователя?
    – hardsky
    19 сен 2015 в 12:33

2 ответа 2

2

Очистить страницу вы можете либо с помощью document.write, либо обновив содержимое некоторого контейнера с помощью свойства innerHTML document.getElementById("container").innerHTML = "новый текст";

Можно это делать и с помощью jQuery, тогда код будет чуть-чуть короче.

document.getElementById("myform").onsubmit = function() {
    var first_name = document.getElementById("myform_first_name");
    var last_name = document.getElementById("myform_last_name");
    document.write(first_name.value + "<br>" + last_name.value);
}
  <div id="container">
<form id="myform">
  <label>Имя:<input name="first_name" id="myform_first_name"/></label>
  <label>Фамилия:<input name="last_name" id="myform_last_name"/></label>
  <input type=submit>
</form>
  </div>

2
  • Спасибо! А если результат выдавать, например, в таблице? То нужно создать новый htm файл, в нем сделать таблицу и через js передавать туда данные? И теге form написать action="result.htm"? Или можно как-то обойтись без второго файла?
    – compl
    19 сен 2015 в 10:50
  • Вы можете генерировать таблицу на javascript-e и показывать ее с помощью innerHTML (как я показал выше), либо с помощью document.createElement. Более продвинутые способы предполагают генерирование таблицы с помощью шаблонизатора на js, но вам к этому пока рано приступать.
    – Sergey S
    19 сен 2015 в 11:03
0

Если всё это дело будет повторяться 1 раз, то можно просто поверх влепить форму, куда будут выводиться надписи :) А если серьезно, то проще сделать так. Создать 2ю форму такую же, только без полей (для вывода). При загрузке показывать одну, а при нажатии Submit ее прятать и показывать 2ю. А в теге form напиши action=<название функции для смены формы>. Ну а код на js думаю ты сам додумаешься как написать в документе :)

7
  • Да, это будет повторяться 1 раз. Но мне нужно в таблицу выдавать результат.
    – compl
    19 сен 2015 в 10:54
  • а две кнопки 1) reset 2) button к которому привязан js обработчик -- не проще ?
    – user33274
    19 сен 2015 в 10:56
  • Ну так а что мешает на форме таблицу нарисовать?
    – Sfairath
    19 сен 2015 в 10:57
  • 1) Про reset button не очень понял 2) В смысле на форме таблицу нарисовать? Тоже не очень понимаю.
    – compl
    19 сен 2015 в 10:59
  • Ну ты же в форме можешь html код писать. Вот и пиши таблицу там. <table><td><tr></table> и так далее...
    – Sfairath
    19 сен 2015 в 11:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.