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

@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 **[ТС]**

Спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

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

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

Решение