Как отправить форму в БД?

Всем привет! Как правильно отправить форму со значением в БД? через span не получается, вернее получается, но пустое значением записывается в БД, а через input всё замечательно отправляется со всем значением , которое было введено.

Сама форма:

<form action="create_post.php" method="post">
  <div class="wrapper">
    <div class="input-box">
      <div class="tw-area">
       
        <span class="placeholder" type="text" name="textuser" id="textuser">Что нового у Вас?</span>
     
        <div class="input editable" contenteditable="true" spellcheck="false"></div>
        <div class="input readonly" contenteditable="true" spellcheck="false"></div>
      </div>
  
    </div>
    <div class="bottom">
      <ul class="icons">
   
      
      </ul>
      <div class="content">
        <span class="counter">200</span>
        <button type="submit">Отправить</button>
      </div>
    </div>
  </div>
</form>

 <script src="tpl/css/post_load.js"></script>

<br>
 <link rel="stylesheet" type="text/css" href="tw_list/css/style.css">

JS:

const wrapper = document.querySelector(".wrapper"),
editableInput = wrapper.querySelector(".editable"),
readonlyInput = wrapper.querySelector(".readonly"),
placeholder = wrapper.querySelector(".placeholder"),
counter = wrapper.querySelector(".counter"),
button = wrapper.querySelector("button");

editableInput.onfocus = ()=>{
  placeholder.style.color = "#c5ccd3";
}
editableInput.onblur = ()=>{
  placeholder.style.color = "#98a5b1";
}

editableInput.onkeyup = (e)=>{
  let element = e.target;
  validated(element);
}
editableInput.onkeypress = (e)=>{
  let element = e.target;
  validated(element);
  placeholder.style.display = "none";
}

function validated(element){
  let text;
  let maxLength = 200; //максимальное значение символов
  let currentlength = element.innerText.length;

  if(currentlength <= 0){
    placeholder.style.display = "block";
    counter.style.display = "none";
    button.classList.remove("active");
  }else{
    placeholder.style.display = "none";
    counter.style.display = "block";
    button.classList.add("active");
  }

  counter.innerText = maxLength - currentlength;

  if(currentlength > maxLength){
    let overText = element.innerText.substr(maxLength); //извлечение текста
    overText = `<span class="highlight">${overText}</span>`; //создание нового промежутка текста
    text = element.innerText.substr(0, maxLength) + overText; //передача значения overText в переменную textTag
    readonlyInput.style.zIndex = "1";
    counter.style.color = "#e0245e";
    button.classList.remove("active");
  }else{
    readonlyInput.style.zIndex = "-1";
    counter.style.color = "#333";
  }
  readonlyInput.innerHTML = text; 
}

Фото: введите сюда описание изображения введите сюда описание изображения


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

Автор решения: Алексей Шиманский

span, div - не являются элементами формы. Поэтому либо помещать данные в input и сабмитить форму, либо отправлять данные через ajax, тогда можно ручками собрать данные из необходимых элементов и их отправить (тогда в целом и форма не будет нужна)


Элементы формы

введите сюда описание изображения

→ Ссылка