получение скриптом данных со всей формы по onchange

[Greider]

Всем привет! Помогите пожалуйста, делаю ajax-фильтр продуктов по нескольким параметрам, взяв за основу один из примеров. Собственно с одним параметром проблем нет.

Форма примерно такая:

<form name="form"  id="form">
<select name="size" id="size" onchange="showInfo()">
  <option....</option>
 </select>
<select name="weight" id="weight" onchange="showInfo()">
  <option....</option>
 </select>
</form>

Скрипт, обрабатывающие данные для отправки запроса на сервер такой:

function showInfo() {
	var size = document.getElementById('size').value;	
	var weight = document.getElementById('weight').value;
...
тра-та-та
...
        xmlhttp.open("GET","getinfo.php?size="+size+"&"+weight,true);
        xmlhttp.send();
}

Но параметров будет еще много, и не хотелось бы под каждый делать свою переменную а потом их соединять и допиливать яваскрипт при добавлении полей.

Нужно чтобы скрипт принял все данные с формы и отправил их дальше по xmlhttp.open в формате getinfo.php?var1=a&var2=b$var3=c... и т.п. независимо от количества полей (переменных) в форме.

[Nexus]

// © [url]https://stackoverflow.com/questions/11661187/form-serialize-javascript-no-framework[/url]
var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);

[Dilettante_Pro]

Greider,
А без скрипта?
Атрибут метод

[Greider]

// © [url]https://stackoverflow.com/questions/11661187/form-serialize-javascript-no-framework[/url]
var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.send(data);

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

Кстати по этой же ссылке в другом ответе есть довольно большой код, чтобы в лоб перебрать и упорядочить данные с формы для отправки по GET. Я так понял он как раз должен мне подойти, но получается, какого-то стандартного решения для этого нет?

А без скрипта?
Атрибут метод

В смысле без скрипта? "А что, а можно было" ?

[Nexus]

правда не очень понимаю, где указать адрес назначения и можно ли отправить по GET

https://learn.javascript.ru/ajax-xml...BD%D0%B8%D1%8F

[Greider]

Ну вроде так и есть... но не работает (

function showInfo() {
	
	var form = document.querySelector('form');
	var str = new FormData(form);
	
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","getinfo.php",true);
        xmlhttp.send();
    }
}

Что тут не так?

[Nexus]

Greider, откройте консоль и посмотрите в чем причина.
Данные нужно передавать в методе "send" xhr.
У вас этого нет, смотрите комментарий #2

[Greider]

Greider, откройте консоль и посмотрите в чем причина.
Данные нужно передавать в методе "send" xhr.
У вас этого нет, смотрите комментарий #2

В изначальном примере этого не было, как я понял для GET запросов это не нужно: https://learn.javascript.ru/ajax-xml...%8B%D0%B5-send
Впрочем варианте xmlhttp.send(str); тоже не работает.

Т.е. php-скрипт Getinfo.php срабатывает, результирующая таблица отображается, но пустая, т.е. никаких данных Getinfo.php не получил ($_GET['size'] и $_GET['weight'] пустые). В консоли файрфокса ошибок нет...

[laimas]

Т.е. php-скрипт Getinfo.php срабатывает, результирующая таблица отображается, но пустая

Некорректное отправление.

[Nexus]

Greider, отправляйте данные методом "post".
FormData методом get, вроде, не отправляется.