Отправка форм с одинаковым классом

@Haski · Регистрация: 28.01.2015

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

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

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
34
35
36
37
38
39
40
41
42
43
44
$(function() {
            var acc = document.getElementsByClassName("form_modal_persone");
            var i;
            for (i = 0; i < acc.length; i++) {
                alert(acc[i]);
                acc[i].submit = (function(e) {
                var formData = new FormData($('.form_modal_persone')[0]);
                  $.ajax({
                    url: 'persone.php',
                    data: formData,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType: 'JSON',
                    success: function(data) {
                        var status = innerHTML = data.status;
                        if (status == 1) {
 
                        }else if (status == 'emptyName') {
                            swal({
                                title: "Что-то не так!",
                                text: "Введите Ваше имя",
                                type: "warning",
                                showCancelButton: false,
                                confirmButtonClass: 'btn-success',
                                confirmButtonText: 'ОК'
                            }); 
                        }else if (status == 'emptyPhone') {
                            swal({
                                title: "Что-то не так!",
                                text: "Введите Ваш телефон",
                                type: "warning",
                                showCancelButton: false,
                                confirmButtonClass: 'btn-success',
                                confirmButtonText: 'ОК'
                            }); 
                        }
 
                    }
                  });
                  e.preventDefault();
                });
            }
        });

Так форма не отправляется, если заменяю submit на onclick то при клике просто на любую область формы она отправляется - тоже не подходит.

Что не верно в моем коде?

@fanatikus · 19.09.2019, 00:10

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

в процессе понял что задать для каждого id

правильно

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

и при этом делать кучу дубля кода js

у форм один класс и разные id
событие вешаем на класс
при возникновении события, получаем id формы и выполняем действия для этой формы

@Mr_Sergo · 20.09.2019, 02:14

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

Что не верно в моем коде?

Попробуйте что-то вроде того -> http://some-test.onlinewebshop... ual-forms/

index.php

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Код</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
 
<form class="form_modal_persone">
    <input type="text" name="name" placeholder="name">
    <input type="text" name="phone" placeholder="phone">
    <input type="submit" value="Отправить">
</form>
<br><br>
 
<form class="form_modal_persone">
    <input type="text" name="name" placeholder="name">
    <input type="text" name="phone" placeholder="phone">
    <input type="submit" value="Отправить">
</form>
<br>
 
<div class="status"></div>
 
<script src="script.js"></script>
</body>
</html>

script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('.form_modal_persone').each( (_,el) => {
    $(el).on('submit', e => {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: 'persone.php',
            dataType:'json',
            data: $(el).serialize(),
            success: function(data) {
                if (data.status == 1)
                    $('.status').html(1);
                
                if (data.status == 'emptyName')
                    $('.status').html('swal : emptyName');
                
                if (data.status == 'emptyPhone')
                    $('.status').html('swal : emptyPhone');
            }
        });
    });
});

persone.php

PHP
1
2
3
4
5
6
7
8
9
10
11
header('Content-Type: text/html; charset=utf-8');
 
if (!$_POST['name']) {
    echo json_encode(array('status' => 'emptyName'));
}
else if (!$_POST['phone']) {
    echo json_encode(array('status' => 'emptyPhone'));
}
else {
    echo json_encode(array('status' => 1));
}

@Haski · 21.09.2019, 11:53 **[ТС]**

Спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@Haski 0 / 0 / 0 Регистрация: 28.01.2015 Сообщений: 226
	21.09.2019, 11:53 [ТС]
	Спасибо!!! 0

Отправка форм с одинаковым классом

Решение