БЛОГ НА HUSL


Как из вэб-формы с помощью jqery вывести данные по кнопкe submit на ту же страницу + чтобы по повторному нажатию все корректно работало

Автор вопроса: Дядя Богдан

друзья, я столкнулся с такой проблемой, (вернее с тысячью проблем, но большую часть из них решил) значит из вэб-формы нужно вывести данные на ту же страницу с помощью jquery в тэги c фоном этих выведенных данных и при повторном нажатии кнопки submit должно все корректно отображаться, типа должен создаваться еще один блок , который будет корректно отображаться с первым и т.д. в общем вот картинки как должно быть в исходном положении и какой должен быть результат список дел пуст

список дел

я разобрался как выводить данные из вэб формы по нажатию кнопки, как их вставлять в нужные мне места по дом модэли, но весь мой код ломается при повторном нажатии кнопки и я честно не понимаю как это исправить, хоть и потратил на это 10+ часов, в обучающих роликах на ютубе показано чаще всего как один раз нажать на кнопку и все чудесно отображается, но у меня задача по сложнее, типа они при повторном нажатии слипаются и ну и по самому html документу добавляются не так как нужно в общем вот мой код:

html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Безумным можно через стены</title>
    <link rel="stylesheet" type="text/css" href="jopastyle.css">
    <script src="jquery-3.6.1.min.js"></script>
    <script src="jopajs.js"></script>
</head>
<body>
    <div id=centeral-container>
        <div class="fixed-container">
            <div id="left-column">
                <h2>Cписок дел:</h2>
                <div id="spisok-del">список пуст...</div>
            </div>
            <div id="right-column">
                <h2>Добавить новое дело</h2>
                <div id="right-column-options">
                    <form id="fullForm" name="test" method="post">
                        <div id="signatures">* Название</div>
                        <input id="lineOne" name="" type="text" size="30">
                        <div class="signatures">* Описание</div>
                        <textarea id="lineTwo" name="" cols="60" rows="10"></textarea>
                        <input id="knopka" type="submit" value="Добавить дело">
                    </form> 
                </div>
            </div>

        </div>
    </div>
</body>
</html>

а вот js:

$(function(){
    
    $(':submit').click(function(event){
        event.preventDefault();
        var lineOne = $('input').val();
        var lineTwo = $('textarea').val();
        $('#spisok-del').remove();

        var newBackground = $('<div></div>');
        $('#left-column').append(newBackground);
        $('#left-column div').attr('id', 'background');

        var newElement1 = $('<div></div>');
        newElement1.text(lineOne);
        $('#background').append(newElement1);
        $('#background div').attr('id', 'style1');

        var newElement2 = $('<div></div>');
        newElement2.text(lineTwo);
        $('#background').append(newElement2);
        $('#background div').attr('id', 'style2');
    });
});

css если надо:

html, body {
    margin: 0;
    padding: 0;
    min-width: 1000px;
    font-family: Arial;
    background-color: #f9f9f9;
}

#central-container {
    padding-top: 20px;
}

.fixed-container {
    height: 620px;
    width: 960px;
    margin: 0 auto;
    position: relative;
}

#left-column {
    width: 470px;
    float: left;
    padding-right: 10px;
}

#right-column {
    width: 470px;
    float: right;
    padding-left: 10px
}

h2 {
    margin-top: 50px;
}

#right-column-options {
    padding: 40px 40px;
    height: 400px;
    width: 470px;
    background-color: #FFFFFF;

}

#style1 {
    font-size: 16px;
}

#style2 {
    margin-bottom: 20px;
    font-size: 16px;
    color: #91919f;
}

#background {
    padding: 15px;
    background-color: #FFFFFF;
    height: 150px;
    width: 470px;
    margin-bottom: 20px;
}

.signatures {
    margin-top: 20px;
    color: #91919f;
    font-size: 14px;
    margin-bottom: 5px;
}

#signatures {
    font-size: 14px;
    margin-top: 0px;
    color: #91919f;
    margin-bottom: 5px;
}

#knopka {
    margin-top: 20px;
    background-color: #349bed;
    color: white;
    border: 0px;
    width: 175px;
    height: 40px;
}

#spisok-del {
    margin-top: 56px;
    color: #91919f;
    font-size: 14px;
}

а вот как это наглядно у меня вышло вместо требуемого результата: исходная первое нажатие второе нажатие

я конечно же наперед вижу в нем ошибки, они детские тупые + есть говнокод, но я тупо не понимаю как сделать это все правильно, потратив день у меня просто мозг вскипел и я уже ниче не понимаю друзья честно, помогите как сделать это задание, я обещаю разобраться в вашем коде и запомнить на всю жизнь, честно говорю


Источник

Ответы (2 шт):

Автор решения: SwaD

Вот один из вариантов. Осталось только со стилями поколдовать

Что сделали: Создали массив для хранения записей. Далее при нажатии на кнопку, добавляется новый элемент и в цикле рисуется заново

    $(function() {
      const myTodo = [];
    
      $(':submit').click(function(event) {
        
        event.preventDefault();
        var lineOne = $('#lineOne')
        var lineTwo = $('#lineTwo');
        myTodo.push({
          title: lineOne.val(),
          descr: lineTwo.val()
        });
        lineOne.val('')
        lineTwo.val('')
    
        const todoListItems = $('#spisok-del');
        todoListItems.empty();
        
        myTodo.forEach((item, index) => {
    
          const divs = $('<div></div>')
          divs.attr('class', 'background');
          divs.attr('id', index)
    
          const titleElement = $('<div></div>');
          titleElement.text(item.title);
          titleElement.attr('class', 'style1');
          divs.append(titleElement);
    
          const descrElem = $('<div></div>');
          descrElem.text(item.descr);
          descrElem.attr('class', 'style2')
          divs.append(descrElem);
    
          todoListItems.append(divs);
        });
      });
    });
html, body {
    margin: 0;
    padding: 0;
    min-width: 1000px;
    font-family: Arial;
    background-color: #f9f9f9;
}

#central-container {
    padding-top: 20px;
}

.fixed-container {
    height: 620px;
    width: 960px;
    margin: 0 auto;
    position: relative;
}

#left-column {
    width: 470px;
    float: left;
    padding-right: 10px;
}

#right-column {
    width: 470px;
    float: right;
    padding-left: 10px
}

h2 {
    margin-top: 50px;
}

#right-column-options {
    padding: 40px 40px;
    height: 400px;
    width: 470px;
    background-color: #FFFFFF;

}

.style1 {
    font-size: 16px;
    padding-bottom: 15px;
    font-weight: bold;
}

.style2 {
    margin-bottom: 20px;
    font-size: 16px;
    color: #91919f;
}

.background {
    padding: 15px;
    background-color: #FFFFFF;
    height: 150px;
    width: 470px;
    margin-bottom: 20px;
}

.signatures {
    margin-top: 20px;
    color: #91919f;
    font-size: 14px;
    margin-bottom: 5px;
}

#signatures {
    font-size: 14px;
    margin-top: 0px;
    color: #91919f;
    margin-bottom: 5px;
}

#knopka {
    margin-top: 20px;
    background-color: #349bed;
    color: white;
    border: 0px;
    width: 175px;
    height: 40px;
}

#spisok-del {
    margin-top: 56px;
    color: #91919f;
    font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=centeral-container>
        <div class="fixed-container">
            <div id="left-column">
                <h2>Cписок дел:</h2>
                <div id="spisok-del">список пуст...</div>
            </div>
            <div id="right-column">
                <h2>Добавить новое дело</h2>
                <div id="right-column-options">
                    <form id="fullForm" name="test" method="post">
                        <div id="signatures">* Название</div>
                        <input id="lineOne" name="" type="text" size="30">
                        <div class="signatures">* Описание</div>
                        <textarea id="lineTwo" name="" cols="60" rows="10"></textarea>
                        <input id="knopka" type="submit" value="Добавить дело">
                    </form> 
                </div>
            </div>

        </div>
    </div>

  • Теперь у верхнего div есть id, по которому можно удалять ТОДО(Как развитие на будущее).
→ Ссылка
Автор решения: Andrei

Выучите я завтра проверю:

const fullForm = document.getElementById("fullForm");
const spisokDel = document.getElementById("spisok-del");
const lineOne = document.getElementById("lineOne");
const lineTwo = document.getElementById("lineTwo");
const delBtn = document.getElementById("del-btn");


fullForm.addEventListener('submit', event => {
  event.preventDefault();

  if (document.getElementById("list-info")) document.getElementById("list-info").remove();
  const LI = document.createElement('LI');
  const SPAN = document.createElement('SPAN');
  const DELBTN = document.createElement('BUTTON');
  const DIV = document.createElement('DIV');

  SPAN.setAttribute('class', 'list-title');
  LI.setAttribute('class', 'list-item shadow p-3 mb-5 bg-white rounded');
  DELBTN.setAttribute('id', 'del-btn');
  DELBTN.setAttribute('class', 'del-btn');
  DELBTN.append('X');
  DELBTN.addEventListener('click', event => {
    event.target.parentNode.parentNode.remove();
    if (!spisokDel.children.length) {
      const LI2 = document.createElement('LI');
      LI2.setAttribute('id', 'list-info');
      LI2.textContent = 'список пуст...';
      spisokDel.append(LI2);
    }
  });
  DIV.setAttribute('class', 'btn-wrapper');
  DIV.append(DELBTN);
  LI.append(DIV);
  SPAN.append(lineOne.value);
  lineOne.value = "";
  LI.append(SPAN);
  LI.append(lineTwo.value);
  lineTwo.value = "";
  spisokDel.append(LI);
});
.fixed-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.main-title {
  margin-bottom: 50px;
}

.spisok-del {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left-column {
  padding: 50px;
}

.btn {
  margin-top: 15px;
}

.list-title {
  display: inline-block;
  min-width: 100%;
  text-align: center;
  font-weight: bold;
}

.list-item {
  padding: 10px;
  margin-right: 20px;
  max-width: 250px;
  overflow: hidden;
}

.del-btn {
  display: grid;
  justify-content: center;
  align-content: center;
  background-color: red;
  color: white;
  font-size: 10px;
  font-weight: bold;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.btn-wrapper {
  display: grid;
  justify-content: end;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id=centeral-container>
  <div class="fixed-container container">
    <div id="left-column">
      <h2 class="main-title">Cписок дел:</h2>
      <ul id="spisok-del" class="spisok-del">
        <li id="list-info">список пуст...</li>
      </ul>
    </div>
    <div id="right-column">
      <h2 class="main-title">Добавить новое дело</h2>
      <div id="right-column-options">
        <form id="fullForm" name="test" method="post">
          <label for="lineOne" class="form-label">* Название</label>
          <input id="lineOne" class="form-control" type="text">
          <label for="lineTwo" class="form-label">* Описание</label>
          <textarea id="lineTwo" class="form-control"></textarea>
          <div>
            <input id="knopka" type="submit" value="Добавить дело" class="btn btn-primary mb-3">
          </div>
        </form>
      </div>
    </div>

  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.