Как положить данные из формы не перезагружая страницы? PHP

Question

Имеется простая форма с двумя полями:

 <div class="form-group row">
  <label class="col-sm-2 col-form-label">Выдан</label>
  <div class="col-sm-4">
    <input type="text" name="vidan" class="form-control" placeholder="Выдан" value="Значение">
  </div>
 </div>
 <div class="form-group row">
  <label class="col-sm-2 col-form-label">Закрыт</label>
  <div class="col-sm-4">
   <input type="date" name="closed" class="form-control" placeholder="Закрыт" value="значение">
  </div>
 </div>

Каким образом без перезагрузки страницы положить в сессию или массив данные из input? У меня получается только POST передать, но страница перезагружается, а это не нужно.

**UPDATE:**Я прочла про sessionStorage в JS, можно как-то подцепить его и потом обработать php? sessionStorage - вот, что именно нужно. Но учить JS ради одной функции не выгодно. Помогите составить код под мой случай.

Answer 1

Используйте AJAX. Можно реализовать асинхронный запрос с помощью jQuery - https://api.jquery.com/jquery.ajax/

Установите на нужную кнопку обработчиком этот асинхронный запрос:

$('body').on("click", '.send-form', function(){
  $.ajax({
    type: "POST",
    url: "some.php",
    data: $("form").serialize()
  });
});

<form> 
<input type="text" name="vidan" class="form-control" placeholder="Выдан" value="Значение">
<input type="date" name="closed" class="form-control" placeholder="Закрыт" value="значение">
<input type="button" class="send-form">
</form>

Answer 2

На странице с формой вставляете следующий код:

<script>
 document.addEventListener("DOMContentLoaded", function() { // событие загрузки страницы

    // выбираем на странице все элементы типа textarea и input
    document.querySelectorAll('textarea, input').forEach(function(e) {
        // если данные значения уже записаны в sessionStorage, то вставляем их в поля формы
        // путём этого мы как раз берём данные из памяти браузера, если страница была случайно перезагружена
        if(e.value === '') e.value = window.sessionStorage.getItem(e.name, e.value);
        // на событие ввода данных (включая вставку с помощью мыши) вешаем обработчик
        e.addEventListener('input', function() {
            // и записываем в sessionStorage данные, в качестве имени используя атрибут name поля элемента ввода
            window.sessionStorage.setItem(e.name, e.value);
        })
    })

}); 
 </script>

Это позволит сохранить данные с формы до момента закрытия браузера.

Чтобы очистить сессию, на кнопку повесьте следующий код:

<script>
localStorage.clear();
</script>

БЛОГ НА HUSL

Как положить данные из формы не перезагружая страницы? PHP

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