1

Есть форма фильтра в ней предоставляется выбор характеристик шин, по нажатию на кнопку подобрать, страница перезагружается и выдает соответствующий запрос, но в форме фильтра выбранное значение не отображается, Как отобразить текст в форме выбора после перезагрузки страницы?

[Пример формы][1]


  [1]: https://jsfiddle.net/nppkLmfr/

4 ответа 4

2

Если для отправки формы используется POST то в свойство value нужных input вписать value='".$_POST['test']."' где test - это name нужного input. Если используется GET - то $_GET['test']

update: Если у вас используются select'ы то в месте где они генерируются необходимо дописать в тег option

    if ('Значение данного option'==$_POST['test']){ echo ' selected ';}

Пример для вашего кода. (При условии что у вас не используется генератор для этой формы, шаблонизатор или ajax)

<select class="btn dropdown-toggle selectpicker btnfull btn-warning" name="filter_высота" size="1">
<option 
<?php if ($_POST['filter_высота']==40){
     echo ' selected '; 
     } ?>
 value="40">10.50</option>
<option>....</option>
...
</select>
10
  • Увы вставив ваш пример, сайт не отвечает
    – Ivan Kling
    2 сен 2016 в 9:55
  • Забыл закрыть тег. ?> добавил после } 2 сен 2016 в 9:57
  • И возможно не стоит использовать русские буквы в name. Не уверен, что они будут корректно везде работать 2 сен 2016 в 9:57
  • Увы опять же сохранение не происходит
    – Ivan Kling
    2 сен 2016 в 10:00
  • Скиньте свойства <form> 2 сен 2016 в 10:01
0

В вашем случае правильнее будет использовать асинхронные запросы (AJAX). Тогда вам не придется перезагружать страницу целиком, а можно будет только обновлять данные, которые пришли в запросе.

Если же у вас нет такой возможности, то можно возвращать значение фильтра в ответе на запрос.

2
  • Изначально так и было обновлялись лишь данные, но клиенту это не нравится, он желает выбрать данные потом нажать кнопку подобрать
    – Ivan Kling
    2 сен 2016 в 9:48
  • по данными имеются в виду результаты запроса. Запрос можно отправлять так же, но не обновлять страницу целиком. 2 сен 2016 в 10:46
0

Один из вариантов на чистом js. Данные формы можно сохранить в специальное хранилище браузера localStorage.

Например:

var form = document.getElementById('filter_form');

function loadData(){
  var data = JSON.parse(localStorage.getItem(form.id));
  if(data != null){ // проверка на null и undefined
    form.elements.forEach(function(element){
      element.value = data[element.name];
    });
  }
}

function saveData(){
  var data = {};
  form.elements.forEach(function(element){
    data[element.name] = element.value;
  });
  localStarage.setItem(form.id, JSON.stringify(data));
}

loadData();

form.addEventListener('submit', saveData, false);
<form id="filter_form" action="/" mthod="GET">
  <select class="btn dropdown-toggle selectpicker btnfull btn-warning" name="filter_ширина" size="1">
    <option value="">Все</option>
    <option value="63">31</option>
    <option value="64">32</option>
    <option value="65">33</option>
    <option value="66">34</option>
    <option value="45">165</option>
    <option value="46">175</option>
    <option value="47">185</option>
    <option value="48">195</option>
    <option value="49">205</option>
    <option value="50">215</option>
    <option value="51">225</option>
    <option value="52">235</option>
    <option value="53">245</option>
    <option value="54">255</option>
    <option value="55">265</option>
    <option value="56">275</option>
    <option value="57">285</option>
    <option value="58">295</option>
    <option value="68">315</option>
  </select>
  <div class="vis">
    <div class="name">Высота</div>
    <select class="btn dropdown-toggle selectpicker btnfull btn-warning" name="filter_высота" size="1">
      <option value="">Все</option>
      <option value="40">10.50</option>
      <option value="41">11.50</option>
      <option value="42">12.50</option>
      <option value="43">35</option>
      <option value="75">40</option>
      <option value="37">45</option>
      <option value="38">50</option>
      <option value="36">55</option>
      <option value="62">60</option>
      <option value="34">65</option>
      <option value="35">70</option>
      <option value="39">75</option>
    </select>
  </div>
  <div class="prof">
    <div class="name">Профиль</div>
    <select class="btn dropdown-toggle selectpicker btnfull btn-warning" name="filter_диаметр" size="1">
      <option value="">Все</option>
      <option value="21">R13</option>
      <option value="22">R14</option>
      <option value="23">R15</option>
      <option value="24">R16</option>
      <option value="25">R17</option>
      <option value="26">R18</option>
      <option value="27">R19</option>
      <option value="28">R20</option>
    </select>
  </div>
  <div class="sez">
    <div class="name">Сезон</div>

    <select class="btn dropdown-toggle selectpicker btnfull btn-warning" class="bu" name="filter_cезон" size="1">
      <option value="">Все</option>
      <option value="19">Лето</option>
    </select>
  </div>
  <div class="bre">
    <div class="name">Бренд</div>

    <select class="btn dropdown-toggle selectpicker btnfull btn-warning" name="filter_бренд" size="1">
      <option value="">Все</option>
      <option value="61">BFGoodrich</option>
      <option value="69">Michelin</option>
    </select>
  </div>
  <input class="btn btn-warning pf-black" id="bu" type="submit" value="Подобрать" />
</form>

К сожалению здесь данный код запустить не удастся, поскольку песочница не работает с localStorage в целях безопасности.

0

Отличная возможность сохранить данные, введённые в форму - через sessionStorage. Вот вполне достойная статья на эту тему:
https://blog.lisogorsky.ru/session-storage-save-data
Суть в следующем: при изменении содержимого любого input, записываем в Storage данные:
sessionStorage["key"] = "value";
При первоначальной загрузке страницы проверяем, есть ли в Storage эти данные. Если есть - значит они были введены и как раз был случай перезагрузки страницы. Извлекаем данные, проходя поля формы через forEach(e):
window.sessionStorage.getItem(e.name, e.value);

Ваш ответ

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

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