TypeError: form.serialize is not a function

@FreeYourMind · Регистрация: 13.11.2016

Студворк — интернет-сервис помощи студентам

товарищи, подскажите что я делаю не так постоянно вижу ошибку TypeError: form.serialize is not a function
в чем проблема может быть?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<form action="testapi.php" id="flights-main-search" name="flights" method="post" accept-charset="utf-8">
        <div style="display: none">
        <input type="hidden" name="_method" value="POST"></div>
        <div class="row">
            <div class="radio-button-group col-sm-12">
                <input type="radio" id="one-way1" name="dataWay" value="0" checked="">
                <label for="one-way1">return</label>
                <input type="radio" id="one-way2" name="dataWay" value="1">
                <label for="one-way2">oneway</label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 col-lg-2">
                <div class="md-form">
                    <input type="text" class="form-control ui-autocomplete-input" area-describeby="from" placeholder="Izbraukšana" id="FlightsSearchFrom" autocomplete="off" name="data[FlightsSearch][from]">
                </div>
            </div>
            <div class="col-sm-6 col-lg-2">
                <div class="md-form">
                    <i class="fas fa-map-marker-alt"></i>
                    <input type="hidden" name="data[FlightsSearch][to_code]" id="FlightsSearchToCode" value="">
                    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input name="data[FlightsSearch][to]" id="FlightsSearchTo" aria-describedby="to" type="text" class="form-control ui-autocomplete-input" placeholder="Ierašanās" autocomplete="off">
                </div>
 
            </div>
            <div class="col-sm-3 col-lg-2">
                    <div class="dropdown_line">
                        <div class="col-sm-6">
                            <p class="font-weight-bold">grown up<</p>
                        </div>
                        <div class="col-sm-6">
                            <input name="data[FlightsSearch][adults]" value="1" aria-label="FlightsSearchAdults" readonly="readonly" type="text" id="FlightsSearchAdults">
                        </div>
                    </div>
                    <div class="dropdown_line">
                        <div class="col-sm-6">
                            <p class="font-weight-bold">children</p>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" id="FlightsSearchChild" name="data[FlightsSearch][children]" value="0" aria-label="FlightsSearchChildren">
                        </div>
                    </div>
                    <div class="dropdown_line">
                        <div class="col-sm-6">
                            <p class="font-weight-bold">infant</p>
                        </div>
                        <div class="col-sm-6">
                            <input type="text" id="FlightsSearchInfants" name="data[FlightsSearch][infants]" aria-label="FlightsSearchInfants" value="0">
                        </div>
                    </div>
            </div>
            <div class="col-sm-3 col-lg-2">
                <button class="btn btn-success button_search" id="send">
                    <i class="fa fa-search"></i>
                    find
                </button>
                <input type="submit" value="submit" name="sbm">
            </div>
        </div>
    </form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  var form = document.querySelector('[name="flights"]');
        var send = document.getElementById('send');
        send.addEventListener('click', e=>{
            e.preventDefault();
            
            var flightWay = document.querySelector('input[name="dataWay"]:checked').value,
                from = document.getElementById('FlightsSearchFrom').value,
                to = document.getElementById('FlightsSearchTo').value,
                adults = document.getElementById('FlightsSearchAdults').value,
                children = document.getElementById('FlightsSearchChild').value,
                infants = document.getElementById('FlightsSearchInfants').value;
            
        });
        console.log(form.serialize());

@Yura007 · 26.11.2019, 17:07

Проблема скорее всего в том, что вы не подключили jquery. Ведь данный метод от туда .

Добавлено через 1 минуту

JavaScript
1
2
3
4
$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $(this).serialize() );
});

@FreeYourMind · 26.11.2019, 18:09 **[ТС]**

Yura007, спасибо,помогло, а есть что то подобное только на чистом js?

@shvyrevvg · 26.11.2019, 18:28

FreeYourMind, почитайте про FormData https://developer.mozilla.org/... ta_Objects

@FreeYourMind · 26.11.2019, 18:33 **[ТС]**

shvyrevvg, пробовал через new FormData(form) а возвращенное значение было пустым объектом

@shvyrevvg · 26.11.2019, 18:46

FreeYourMind, так Вам данные на сервере нужны или на клиенте?

@FreeYourMind · 26.11.2019, 18:50 **[ТС]**

shvyrevvg, на сервере.. но я на данный момент хочу видеть как эти данные предоставлены.. и сейчас еще до кучи пытаюсь увидеть в каком виде их получает скрипт которому отправляют их..

@shvyrevvg · 26.11.2019, 18:55

FreeYourMind, всегда можно глянуть в инструментах разработчика вкладка networks запросы

Посмотреть что данные есть в formdata можно так

JavaScript
1
2
3
4
const data = new FormData(form);
for (let entry of data.entries()) {
  console.log(entry);
}

@amr-now · 26.11.2019, 20:57

FreeYourMind, как раз недавно делали:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
        function prepareXWwwFormUrlencoded(form) {
            let s = ""
            let emptedRadios = [],
                checkedRadios = [];
            for (let el of Array.from(form.elements)) {
                if (!el.name) continue;
                let item;
                switch (el.type) {
                    case "checkbox":
                        item = encodeURIComponent(el.name) + "=" + (el.checked ? "1" : "0");
                        break;
                    case "radio":
                        if (el.checked) {
                            item = encodeURIComponent(el.name) + "=" + encodeURIComponent(el.value);
                            if (!checkedRadios.includes(el.name))
                                checkedRadios.push(el.name);
                        }
                        else
                            if (!emptedRadios.includes(el.name))
                                emptedRadios.push(el.name);
                        break;
                    default:
                        item = encodeURIComponent(el.name) + "=" + encodeURIComponent(el.value);
                        break;
                }
                if (item !== undefined) s += (s === "" ? "" : "&") + item;
            }
            for (let e of emptedRadios) {
                if (!checkedRadios.includes(e))
                    s += (s === "" ? "" : "&") + encodeURIComponent(e) + "=";
            }
            return s;
        }

Если какие особо хитрые поля попадутся, покажите.

Добавлено через 6 минут

Сообщение от FreeYourMind

сейчас еще до кучи пытаюсь увидеть в каком виде их получает скрипт которому отправляют их

https://api.jquery.com/serialize/
С checkbox там какой-то извращенный пример:

HTML5
1
2
3
4
  <input type="checkbox" name="check" value="check1" id="ch1">
  <label for="ch1">check1</label>
  <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
  <label for="ch2">check2</label>

Зачем они чекбоксами имитируют радиокнопки?

@FreeYourMind · 26.11.2019, 21:27 **[ТС]**

Сообщение от amr-now

С checkbox там какой-то извращенный пример

точь в точь такое же на руселлере видел, единственная у меня проблема - не прибегать к jquery ибо бытует мнение что эта библиотека доживает свои последние дни.. и делаю все на чистом js и даже не знаю на сколько это хорошая практика. да и собственно этот форум - единственное место где могут что то подсказать и объяснить.. в гугле не всегда доступное объяснение можно найти

@amr-now · 26.11.2019, 21:51

Сообщение от FreeYourMind

бытует мнение что эта библиотека доживает свои последние дни

Потому что всю работу с коллекциями можно сделать в LINQ,
плюс современные фреймворки Vue, React, Angular (c RxJS, в котором тоже много от LINQ).

@amr-now · 27.11.2019, 11:04

Близкий эквивалент штатного кодирования x-www-form-urlencoded:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>serialize demo</title>
    <style>
        body,
        select {
            font-size: 12px;
        }
 
        form {
            margin: 5px;
        }
 
        p {
            color: red;
            margin: 5px;
            font-size: 14px;
        }
 
        b {
            color: blue;
        }
    </style>
</head>
<body>
    <form>
        <select name="single">
            <option>Single</option>
            <option>Single2</option>
        </select>
        <br />
        <input type="text" name="text" />
        <br />
        <textarea name="ta"></textarea>
 
        <br />
        <select name="multiple" multiple="multiple">
            <option>Multiple</option>
            <option>Multiple2</option>
            <option>Multiple3</option>
        </select>
 
        <br />
        <input type="checkbox" name="check" value="check1" id="ch1">
        <label for="ch1">check1</label>
        <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
        <label for="ch2">check2</label>
 
        <br />
        <input type="radio" name="radio" value="radio1" id="r1">
        <label for="r1">radio1</label>
        <input type="radio" name="radio" value="radio2" id="r2">
        <label for="r2">radio2</label>
 
        <br />
        <input type="submit" value="Отправить GET" />
    </form>
 
    <p><span id="results"></span></p>
 
    <script>
        function prepareXWwwFormUrlencoded(form) {
            let s = "";
 
            for (let el of Array.from(form.elements)) {
                if (!el.name) continue;
                let item;
                switch (el.tagName) {
                    case "INPUT":
                        switch (el.type) {
                            case "checkbox":
                            case "radio":
                                if (el.checked) {// Если не отмечен, то не отправляется вообще
                                    let value = encodeURIComponent(el.value);
                                    item = encodeURIComponent(el.name) + "=" + (value ? value : "on");
                                }
                                break;
                            default:
                                item = encodeURIComponent(el.name) + "=" + encodeURIComponent(el.value);
                                break;
                        }
                        break;
                    case "SELECT":
                        if (el.selectedOptions.length) { // Если не отмечен, то не отправляется вообще
                            item = "";
                            for (let i = 0; i < el.selectedOptions.length; i++) {
                                item += (item ? "&" : "")
                                    + encodeURIComponent(el.name) + "=" + encodeURIComponent(el.selectedOptions[i].value);
                            }
                        }
                        break;
                    default:
                        item = encodeURIComponent(el.name) + "=" + encodeURIComponent(el.value);
                        break;
                }
 
                if (item !== undefined) s += (s === "" ? "" : "&") + item;
            }
 
            return s;
        }
 
        function showValues() {
            let str = prepareXWwwFormUrlencoded(document.querySelector("form"));
            document.querySelector("#results").textContent = str;
        }
 
        for (let e of document.querySelectorAll("input[type='checkbox'], input[type='radio']"))
            e.onclick = showValues;
        for (let e of document.querySelectorAll("select"))
            e.onchange = showValues;
        for (let e of document.querySelectorAll("input[type='text'], textarea"))
            e.onchange = showValues;
        showValues();
    </script>
</body>
</html>

В данном штатном варианте всё, что не отмечено, форма принципиально отказывается отправлять на сервер.
А предыдущий вариант функции отправляет на сервер именно пустое значение.

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@FreeYourMind 147 / 147 / 104 Регистрация: 13.11.2016 Сообщений: 557
	26.11.2019, 18:09 [ТС]
	Yura007, спасибо,помогло, а есть что то подобное только на чистом js? 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	26.11.2019, 18:28
	FreeYourMind, почитайте про FormData https://developer.mozilla.org/... ta_Objects 1

@FreeYourMind 147 / 147 / 104 Регистрация: 13.11.2016 Сообщений: 557
	26.11.2019, 18:33 [ТС]
	shvyrevvg, пробовал через new FormData(form) а возвращенное значение было пустым объектом 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	26.11.2019, 18:46
	FreeYourMind, так Вам данные на сервере нужны или на клиенте? 0

@FreeYourMind 147 / 147 / 104 Регистрация: 13.11.2016 Сообщений: 557
	26.11.2019, 18:50 [ТС]
	shvyrevvg, на сервере.. но я на данный момент хочу видеть как эти данные предоставлены.. и сейчас еще до кучи пытаюсь увидеть в каком виде их получает скрипт которому отправляют их.. 0