0

Есть форма комментария, после заполнения формы комментария и нажатия на кнопку отправить, перед ней должен появляться текст в созданном блоке.

Примерно так (весь код ниже должен появляться только после нажатия на кнопку):

<div class="result">
  <div class="name">
      Здесь название
  </div>
  <div class="comment">
     Здесь какой-то текст
       для примера
  </div>
</div>

Вот тут я подготовил форму, мне бы только скрипт который извлечет текст из формы и поместит его в блок.

https://jsfiddle.net/engenes/Lzqr56ed/6/

( Да я знаю что после обновления страницы и блок и текст в нем пропадут. что тут без AJAX никак. Но смысл не в этом. Мне главное чтобы этот самый блок с текстом выше появился ).

2
  • Блоки по умолчанию не существует так что display block, display none не подойдет.
    – engenes
    1 янв 2016 в 18:37
  • Не размещайте код на сторонних ресурсах вроде jsfiddle. Для таких случаев в редакторе есть специальный инструмент, кнопка в виде <> или Ctrl + M.
    – Nick Volynkin
    2 янв 2016 в 6:31

2 ответа 2

4

Вот основа метода. Думаю, что к своей задаче примените легко:

function onClick() {
    var container = document.getElementById("container");
    var textarea1 = document.getElementById("textarea1");
    var text1 = document.getElementById("text1");
  
    var div1 = document.createElement("div");
    div1.className = "div1";
    div1.innerHTML = text1.value;
  
    var div2 = document.createElement("div");
    div2.className = "div2";
    div2.innerHTML = textarea1.value;
  
    var div = document.createElement("div");
    div.className = "divA";
    div.appendChild(div1);
    div.appendChild(div2);
  
    container.appendChild(div);
}
.divA {
    border: 1px solid gray;
}
.div1 {
    background-color: #fdd;
}
.div2 {
    background-color: #ddf;
}
<div id="container"></div>

<input type="text" id="text1" />
<br />
<textarea id="textarea1" cols="40" rows="3"></textarea>
<br />
<button onclick="onClick();">Send</button>

1
  • создается просто блок. А вот если нужно создать блок с каким то классом или блок с вложенными в него блоками, то непонятно,
    – engenes
    1 янв 2016 в 19:24
3

Вам поможет следующий код

$('.button').on('click', function (event) {
 //Получаем имя и комментарий из инпутов
 var name  = $('#name').val(),
     comment = $('#comment').val(),
     html = '<div class="comment"><div class="name">'+name+'</div><div class="comment">'+comment+'</div></div>';
     //Добавляем результат к нужному блоку
     $('#result').append(html);
});
2
  • что то не работает ..
    – engenes
    1 янв 2016 в 19:28
  • код написан как пример создания блока. Вообще вы можете создавать блок как вашей душе угодно. Например можно еще так var newBlock = document.createElement('div'); если вы хотите класс добавить пишем newBlock.className = 'someclass' когда вам надо добавить дочерний элемент вы можете написать newBlock.append(someBlock) советую вам изучить эту тему прежде чем просить готовые решения тут
    – DStrokov
    1 янв 2016 в 20:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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