Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Множественный выбор (https://javascript.ru/forum/misc/68638-mnozhestvennyjj-vybor.html)

Sakhet 28.04.2017 14:27
Множественный выбор
 
Здравствуйте.

Подскажите пожалуйста, как с помощью формы множественного выбора (или checkbox) в html (или html+javascript) получить запрос вида:
example.ru/?cat=1&tag=tag1+tag2+tag3+tagN

Т.е. мне нужно обязательно, чтобы тэги разделялись знаком "+".

Dilettante_Pro 28.04.2017 15:06 
<form>
   Тег 1<input type="checkbox" name="tag1" value = "Тег1"><br>
   Тег 2<input type="checkbox" name="tag2" value = "Тег2"><br>
   Тег 3<input type="checkbox" name="tag3" value = "Тег3"><br>
   <input type="submit" value="Отправить">
</form>
<script>
document.querySelector('form').onsubmit = function(e){
   e.preventDefault();
   var data = "cat=1&tag=";
   var boxes = document.querySelectorAll('input[type="checkbox"]:checked');
   for(var i = 0; i < boxes.length; i++){
      data += (i==0?"":"+") +  boxes[i].value;
   }
   alert(data); // отправка GET
}
</script>

laimas 28.04.2017 15:24
Dilettante_Pro,
Нельзя так, символом + кодируется пробел при передаче данных, а значит сервер получит tag1 tag2 tag3 tagN.

рони 28.04.2017 15:26
Dilettante_Pro,
tag= где?

Dilettante_Pro 28.04.2017 15:27
laimas,
ТС просит
Цитата:
example.ru/?cat=1&tag=tag1+tag2+tag3+tagN Т.е. мне нужно обязательно, чтобы тэги разделялись знаком "+".
т.е. он, очевидно, и имеет в виду, что сервер получит tag1 tag2 tag3 tagN в одном параметре tag

Dilettante_Pro 28.04.2017 15:32
рони,
Сорри, пропустил:(
Исправил:write:

рони 28.04.2017 15:38
Sakhet,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<form>
  Тег 1<input type="checkbox" name="tag1" value = "Тег1"><br>
  Тег 2<input type="checkbox" name="tag2" value = "Тег2"><br>
  Тег 3<input type="checkbox" name="tag3" value = "Тег3"><br>
  <input type="submit" value="Отправить">
</form>
<script>
document.querySelector('form').onsubmit = function(e){
  e.preventDefault();
  var data = "cat=1";
  var boxes = document.querySelectorAll('input[type="checkbox"]:checked');
  if(boxes.length)
  data += "&tag=" + [].map.call(boxes, function(el) {
  return el.value
  }).join("%2B");
  alert(decodeURIComponent(data));
}
</script>


</body>
</html>

laimas 28.04.2017 15:39
Цитата:
Сообщение от Dilettante_Pro
т.е. он, очевидно, и имеет в виду, что сервер получит tag1 tag2 tag3 tagN в одном параметре tag
Ну не знаю так ли это, а если так, то глупо, ибо сервер получит массив элементов формы, и если их именовать подобающе, то проще просто "склеить" на сервере.

Sakhet 28.04.2017 17:21
Спасибо большое, я уж думала, что это невозможно.

laimas 28.04.2017 17:29
Цитата:
Сообщение от Sakhet
я уж думала, что это невозможно.
А о том, что сервер должен проверять данные извне, а вы таким образом усложняете проверку пришедших данных, вы не думали?

Sakhet 28.04.2017 17:32
К сожалению, первый вариант в адресной строке выдает:
?tag1=Тег1&tag2=Тег2


а второй
Просит подтверить действие "cat=1&tag=Тег2+Тег3" и ничего не происходит потом.

Sakhet 28.04.2017 17:35
Цитата:
А о том, что сервер должен проверять данные извне, а вы таким образом усложняете проверку пришедших данных, вы не думали?
Скрипт будет встроен в шаблон Wordpress, и всё, что от него (WP) требуется, это обработать запрос. Если ручками прописать в адресной строке то, что я написала вверху, всё работает. Т.е. сам WP понимает такой запрос, а вот как это автоматизировать для конечного пользователя сайта - неизвестно :(

laimas 28.04.2017 18:14
Да дело то не в запросе, а в проверке данных, то есть я могу отправить и такое cat=1&tag=труля-ля+опа-на, такое будет корректно?

Dilettante_Pro 28.04.2017 18:22
Цитата:
Сообщение от Sakhet (Сообщение 451292)
К сожалению, первый вариант в адресной строке выдает:
?tag1=Тег1&tag2=Тег2


а второй
Просит подтверить действие "cat=1&tag=Тег2+Тег3" и ничего не происходит потом.
Не может быть.
Первый вариант
cat=1&tag=Тег1+Тег2
Что-то не так скопировали из примера.
Я проверял комплексную работу на макете
HTML
<!DOCTYPE html>
<html>
<head>
    <title>Test Tags</title>
</head>
<body>
<form>
   Тег 1<input type="checkbox" name="tag1" value = "Тег1"><br>
   Тег 2<input type="checkbox" name="tag2" value = "Тег2"><br>
   Тег 3<input type="checkbox" name="tag3" value = "Тег3"><br>
   <input type="submit" value="Отправить">
</form>
<script>
    document.querySelector('form').onsubmit = function (e) {
        e.preventDefault();
        var data = "cat=1&tag=";
        var boxes = document.querySelectorAll('input[type="checkbox"]:checked');
        for (var i = 0; i < boxes.length; i++) {
            data += (i == 0 ? "" : "+") + boxes[i].value;
        }
         var req = new XMLHttpRequest();
        req.open("GET", "test.php/?" + data, true);
        req.addEventListener("load", function () {
            alert("Done: " + req.responseText);
        });
        req.send(null);
    }
</script>
</body>
</html>

test.php
<?php
$tag="NoTag"; 
if(isset($_GET['tag'])) {
 $tag=$_GET['tag'];
 }
echo   $tag ;
?>


И все прекрасно отрабатывает.
По второму варианту: Кто просит подтвердить действие?
Что делает обработчик запроса на сервере?

Sakhet 28.04.2017 18:59
Цитата:
Да дело то не в запросе, а в проверке данных, то есть я могу отправить и такое cat=1&tag=труля-ля+опа-на, такое будет корректно?
Да, если есть теги "труля-ля" "опа-на". Поставьте себе Wordpress куда-нибудь и вы сами увидите. Я не обманываю.


Вот ошибка, её показывает браузер.


Дальше я подтверждаю действие и ничего. Вообще ничего.
Тестирую не на сервере, а на своем компьютере в браузере. Но сервер мне тут и не нужен, т.к. javascript исполняется в брауере у клиента, и уже дальше отправляет нужный запрос.

Вот, к примеру я пробовала так сделать:

<form action="http://localhost/wp/" method="get">
<div><select  name='cat' id='category' class='postform' >
	<option value='0'>Выберите категорию</option>
	<option value="1">Категория 1</option>
	<option value="2">Категория 2</option>
</select>
<select name="tag">
	<option value=''>Выберите тэг</option>
	<option value="tag1">Тэг1</option>
	<option value="tag2">Тэг2</option>
	<option value="tag3">тэг3</option>
</select>
<input type="submit" value="Submit">
</div></form>


И такой вариант работает прямо в браузере, но WP ищет только по одной категории и одному тэгу. А вот, чтобы по одной категории и нескольким тегам, нужно разделять их плюсами. И вот сделать так, чтобы были "+" не получается.

Если добавить в мой код еще раз:

<select name="tag">
	<option value=''>Выберите тэг</option>
	<option value="tag1">Тэг1</option>
	<option value="tag2">Тэг2</option>
	<option value="tag3">тэг3</option>
</select>


То форма выдаст в адресную строку: http://localhost/wp/?cat=1&tag=1&tag=2

Такой вариант тоже работает в WP, но ищет как попало. С плюсами же, ищет как надо.

laimas 28.04.2017 19:12
Цитата:
Сообщение от Sakhet
Да, если есть теги "труля-ля" "опа-на". Поставьте себе Wordpress куда-нибудь и вы сами увидите. Я не обманываю.
Wordpress, это просто CMS, он также обязан проверять входные данные, что и делает. Если это допускает ввод любого что угодно, тогда нет вопросов.

Sakhet 28.04.2017 19:22
Допускает ввод того, что я написала в первом сообщении. Не о нем речь. Всё, что нужно, это сформировать строчку с запросом в браузере.

Sakhet 28.04.2017 19:26
Я пробовала вот этот вариант. Не работает, а переделать я не знаю как, т.к. не знаю языка.

Находила вот такой вариант, но куда его засунуть никто нигде не пишет.

laimas 28.04.2017 19:42
Цитата:
Сообщение от Sakhet
Находила вот такой вариант, но куда его засунуть никто нигде не пишет.
Это РНР код, на клиента его не вставить. Причем этот код куда разумнее, так как он получает массив данных $_POST['tags'], который и проверить проще, и если уж надо "склеить", то тоже не сложно. Только вот вопрос как производится выборка по тегам и нужно ли "склеивать".

Sakhet 28.04.2017 20:49
Я не понимаю, что значит склеивать. И куда вставлять код я так и не поняла. В шаблон, в плагин, в код WP?

laimas 28.04.2017 22:03
Цитата:
Сообщение от Sakhet
Я не понимаю, что значит склеивать.
То что вы пытаетесь сделать и что вам предлагают, это соединение значений нескольких флажков в строку. Остается понять, это ли ожидает сервер?

Код по второй ссылке, это не клиентский код, а серверный, прием данных, и в нем описана обработка массива (!) меток (значений флажков), а не склеенных в строку нескольких значений.

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

Dilettante_Pro 28.04.2017 22:04
Цитата:
Сообщение от Sakhet (Сообщение 451313)
Да, если есть теги "труля-ля" "опа-на". Поставьте себе Wordpress куда-нибудь и вы сами увидите. Я не обманываю.


Вот ошибка, её показывает браузер.


Дальше я подтверждаю действие и ничего. Вообще ничего.
Тестирую не на сервере, а на своем компьютере в браузере. Но сервер мне тут и не нужен, т.к. javascript исполняется в брауере у клиента, и уже дальше отправляет нужный запрос.

Вот, к примеру я пробовала так сделать:

<form action="http://localhost/wp/" method="get">
<div><select  name='cat' id='category' class='postform' >
	<option value='0'>Выберите категорию</option>
	<option value="1">Категория 1</option>
	<option value="2">Категория 2</option>
</select>
<select name="tag">
	<option value=''>Выберите тэг</option>
	<option value="tag1">Тэг1</option>
	<option value="tag2">Тэг2</option>
	<option value="tag3">тэг3</option>
</select>
<input type="submit" value="Submit">
</div></form>


И такой вариант работает прямо в браузере, но WP ищет только по одной категории и одному тэгу. А вот, чтобы по одной категории и нескольким тегам, нужно разделять их плюсами. И вот сделать так, чтобы были "+" не получается.

Если добавить в мой код еще раз:

<select name="tag">
	<option value=''>Выберите тэг</option>
	<option value="tag1">Тэг1</option>
	<option value="tag2">Тэг2</option>
	<option value="tag3">тэг3</option>
</select>


То форма выдаст в адресную строку: http://localhost/wp/?cat=1&tag=1&tag=2

Такой вариант тоже работает в WP, но ищет как попало. С плюсами же, ищет как надо.
Вот теперь стало понятно-вы не знаете,как работает форма.
Если форма работает без скрипта, то она отправляет значение всех полей: имя=значение
У вас это первый вариант.
Если же форма работает со скриптом- как в примере рони или моем- то там отменяются действия по умолчанию и посылка формируется программным образом. Но в наших примерах не производится отправка на сервер, а выдается сообщение со сформированной строкой отправки, которое вы сочли сообщением об ошибке.
С отправкой на сервер-мой последний пример

Sakhet 29.04.2017 14:57
Скопировала ваш последний пример. Загрузила за сервер (localhost), в одну папку поместила index.html и test.php. Не работает. Просит подтвердить действие и ничего дальше не происходит.

Изображение с ошибкой.

Dilettante_Pro 29.04.2017 15:31
Sakhet,
Это не ошибка, это сообщение, вернувшееся на клиент с сервера - программа test.php правильно приняла tag и вернула его в ответ.
Вы что, совсем не понимаете программы?

Sakhet 29.04.2017 16:40
Не понимаю. Понимала бы, не приходила на форум за помощью. :cray:

И мне это не нужно. В смысле программа test.php это не то, что нужно. Нужно, чтобы скрипт молча передавал в адресную строку example.ru/?cat=1&tag=tag1+tag2+tag3+tagN без подтверждений каких-либо.

Dilettante_Pro 29.04.2017 19:48
Все, я сдаюсь:cray:

<!DOCTYPE html>
<html>
<head>
    <title>Test Tags</title>
</head>
<body>
<form>
   Тег 1<input type="checkbox" name="tag1" value = "Тег1"><br>
   Тег 2<input type="checkbox" name="tag2" value = "Тег2"><br>
   Тег 3<input type="checkbox" name="tag3" value = "Тег3"><br>
   <input type="submit" value="Отправить">
</form>
<script>
    document.querySelector('form').onsubmit = function (e) {
        e.preventDefault();
        var data = "cat=1&tag=";
        var boxes = document.querySelectorAll('input[type="checkbox"]:checked');
        for (var i = 0; i < boxes.length; i++) {
            data += (i == 0 ? "" : "+") + boxes[i].value;
        }
        window.location = "example.ru/?" + data;

    }
</script>
</body>
</html>

Sakhet 29.04.2017 21:42
Идеально. Это как раз именно то, что мне так нужно.

Спасибо вам большое. :)

Sakhet 02.05.2017 18:29
Здравствуйте.

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

example.ru/?cat=1&tag=tag1+tag2+tag3+tagN

cat=N - это id категории.

Вот, как я писала ранее в моей попытке реализовать:

<form action="http://localhost/wp/" method="get">
<div><select  name='cat' id='category' class='postform' >
	<option value='0'>Выберите категорию</option>
	<option value="1">Категория 1</option>
	<option value="2">Категория 2</option>
</select>
<select name="tag">
	<option value=''>Выберите тэг</option>
	<option value="tag1">Тэг1</option>
	<option value="tag2">Тэг2</option>
	<option value="tag3">тэг3</option>
</select>
<input type="submit" value="Submit">
</div></form>


Часовой пояс GMT +3, время: 20:52.