0

По нажатию на #add-button формы в #to-do-list должен появиться блок с карточкой с данными из input и textarea формы. При следующем нажатии кнопки ниже должен появиться новый блок и так далее. Блок появляется только один раз. При новом заполнении формы новый блок не появляется, просто меняются данные в первом созданном. Как реализовать появление новых блоков?

document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  let tmp = `<div class="case">
            <div class="case-title">
            <span></span>
            <div class="clear-button"></div></div>
            <div class="case-body"></div>
         </div>`; // вид карточки

  $('#add-button').on('click', function() {
    let h_val = $('#name-field-input').val().trim(), // значение поля из input
      d_val = $('#description-field').val().trim(); // тоже самое из textarea

    if (h_val.length > 0 && d_val.length > 0) {
      tmp = $(tmp);
      tmp.find('.case-title > span').text(h_val); // вставим в карточку заголовок
      tmp.find('.case-body').text(d_val); // тоже самое с описанием

      $('.fixed-container #to-do-list').append(tmp); // далее добавляем новую карточку 
    }

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

2
  • сниппет целиком то вставьте, а не только js код
    – teran
    3 мая 2022 в 8:38
  • Вы переменную tmp переназначение и теряете шаблон карточки после первого нажатия.
    – De.Minov
    3 мая 2022 в 9:53

2 ответа 2

0

Если вам просто надо вставлять текст в темплейт, то предлагаю вариант намного проще и надёжнее:

document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  const tmp = (titleText, bodyText) => `<div class="case">
            <div class="case-title">
            <span>${titleText}</span>
            <div class="clear-button"></div></div>
            <div class="case-body">${bodyText}</div>
         </div>`; // Карточка

  $('#add-button').on('click', function() {
    const h_val = $('#name-field-input').val().trim(), // значение поля input
      d_val = $('#description-field').val().trim(); // значение поля textarea

    if (h_val.length > 0 && d_val.length > 0) {
      $('.fixed-container #to-do-list').append(tmp(h_val, d_val)); // Добавляем новую карточку 
    }

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

Я ещё вспомнил, что у нас же есть тег template. Можно вообще из JS убрать прописывание шаблона:

document.querySelector('form').addEventListener('submit', (e) => e.preventDefault()); // Чтобы страница не перезгружалась в Code Snippet-е

$(function() {

  const tmp = (titleText, bodyText) => {
    const template = $('#template-case').contents().clone(true);
    
    template.find('.case-title-text').html(titleText);
    template.find('.case-body').html(bodyText);
    
    return template;
  }; // Карточка

  $('#add-button').on('click', function() {
    const h_val = $('#name-field-input').val().trim(), // значение поля input
      d_val = $('#description-field').val().trim(); // значение поля textarea

    if (h_val.length > 0 && d_val.length > 0) {
      $('.fixed-container #to-do-list').append(tmp(h_val, d_val)); // Добавляем новую карточку 
    }

  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="fixed-container">
  <div id="to-do-list">
    <div class="heading">Список дел:</div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 1 </span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
    <div class="case">
      <div class="case-title">
        <span>Новое дело 2</span>
        <div class="clear-button"></div>
      </div>
      <div class="case-body">Пример описания</div>
    </div>
  </div>
  <div id="new-case">
    <div class="heading">Добавить новое дело</div>
    <div class="case">
      <form method="post">
        <label for="name-field">* Название</label>
        <input required="required" id="name-field-input" type="text" name="name-field">
        <label for="description-field">* Описание</label>
        <textarea required="required" id="description-field" name="description-field"></textarea>
        <button id="add-button">Добавить дело</button>
      </form>
    </div>
  </div>
</div>

<template id="template-case">
  <div class="case">
    <div class="case-title">
      <span class="case-title-text"></span>
      <div class="clear-button"></div>
    </div>
    <div class="case-body"></div>
  </div>
</template>

Правда это не поддерживается в IE, но так JS можно избавить от HTML кода. Да и как по мне редактировать HTML в html файле намного удобнее, чем в JS, как бы IDE не пытался подсказывать :)

0

Можно попробовать вместо

tmp = $(tmp);

написать

tmp = $(tmp).clone();

Но это всё равно будет баговать скорее всего


Надо скорее написать вместо

tmp = $(tmp);

вот так:

let localTemplate =  $(tmp);

и далее работать с localTemplate

т.к. в итоге вы перетираете переменную tmp

Ваш ответ

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

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