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, но вам к этому пока рано приступать.
    – zenden2k
    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 that you have read and understand our privacy policy and code of conduct.

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