Проблема со скриптом для формы обратной связи

233
25 апреля 2017, 08:01

Делаю форму обратной связи, сам скрипт и обработчик для формы нашел на просторах интернета. Вот они:

<script> 
            // этот участок кода нужен только для отображения гифки 
            // которая даёт пользователю понять, что что-то происходит 
            // и нужно подождать 
            $(document).ready(function () { 
                $(document).ajaxStart(function () { 
                    // найдем элемент с изображением загрузки и уберем невидимость: 
                    var imgObj = $("#load-indicator"); 
                    imgObj.show(); 
                    // вычислим в какие координаты нужно поместить изображение загрузки, 
                    // чтобы оно оказалось в серидине страницы: 
                    var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height()) / 2; 
                    var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width()) / 2; 
                    imgObj.offset({ 
                        left: centerX, 
                        top: centerY 
                    }); 
                }); 
                //скрываем изображение после окончания AJAX-запроса 
                $(document).ajaxStop(function () { 
                    $('#load-indicator').hide(); 
                }); 
            }); 
  
            // назначаем действие на такое событие как отправка формы 
            $('#feedback').submit(function (evtObj) { 
                evtObj.preventDefault(); 
                // Если элемент формы fileforsending содержит значения (т.е. выбран файл для отправки), 
                // то вместо AJAX-запроса используем FormData() 
                // поскольку файлы через AJAX-запросы не передаются                 
  
                if (document.getElementById("feedback").fileforsending.value !== '') { 
                    //показываем гифку ожидания 
                    var imgObj = $("#load-indicator"); 
                    imgObj.show(); 
                    var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height()) / 2; 
                    var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width()) / 2; 
                    imgObj.offset({ 
                        left: centerX, 
                        top: centerY 
                    }); 
                    // этот кусок кода я спёр отсюда http://javascript.ru/forum/jquery/40698-ajax-i-otpravka-fajjlov-s-formy.html 
                    var form = document.forms.feedback; 
                    var formData = new FormData(form); 
                    var xhr = new XMLHttpRequest(); 
                    xhr.open("POST", "mails_sender.php"); 
                    xhr.onreadystatechange = function () { 
                        if (xhr.readyState == 4) { 
                            if (xhr.status == 200) { 
                                data = xhr.responseText; 
                                $("#result").html('Результат выполнения: ' + data); 
                                // Письмо отправлено, сбрасываем данные формы если прошло успешно 
                                if (data === 'Отправлено письмо с вложениями.') { 
                                    document.getElementById("feedback").reset(); 
                                } 
                                //убираем гифку ожидания 
                                $('#load-indicator').hide(); 
                            } 
                        } 
                    }; 
                    xhr.send(formData); 
                    // В противном случае (не прикреплён файл для отправки) 
                    // Делаем AJAX-запрос для отправки письма 
                } else { 
                    var form = $(this); 
                    $.ajax({ 
                        // Здесь файл, который обрабатывает полученные от пользователя данные и отправляет почту 
                        url: 'mails_sender.php', 
                        type: 'POST', 
                        data: form.serialize(), 
                        // Действия в случае успешной отправки AJAX-запроса (а не письма!) 
                        // Здесь data - полученное от mails_sender.php сообщение 
                        success: function (data) { 
                            if (data === 'Отправлено письмо без вложений.') { 
                                $("#result").html('Отправлено письмо без вложений.'); 
                                // Письмо отправлено, сбрасываем данные формы 
                                document.getElementById("feedback").reset(); 
                                // Следующая строка после успешной отправки сообщения 
                                // перенаправляет пользователь на любую страницу/сайт 
                                // достаточно раскомментировать её и поменять адрес сайта webware.biz 
                                // на ваш собственный 
                                //document.location.href = 'http://webware.biz'; 
                            } else { 
                                $("#result").html(data); 
                            } 
                        }, 
                        error: function (data) { 
                            $("#result").html('Результат выполнения: ' + data); 
                        } 
                    }); 
                } 
            }); 
        </script>
        <div style="color: red;" id="result">some text</div><br /> 
        <img src="ajax-loader.gif" id="load-indicator" alt="loading" style="position:absolute; z-index:1000; display:none;" /> 
  
        <h2>Форма обратной связи</h2> 
        <form method="post" action="mails_sender.php" id="feedback" name="feedback" enctype="multipart/form-data"> 
            <table style="width: 100%"> 
                <tr> 
                    <td style="width: 146px">Ваш e-mail</td> 
                    <td><input name="youremail" type="text" style="width: 440px" size="20" /></td></tr> 
                <tr> 
                    <td style="width: 146px">Тема сообщения</td> 
                    <td><input name="subject" type="text" style="width: 440px" size="20" /></td></tr> 
                <tr> 
                    <td>Телефон:</td> 
                    <td> 
                    <input type="text" name="phone" style="width: 440px" size="20"> 
                <tr> 
                    <td style="width: 146px">Ваше сообщение</td> 
                    <td> 
                        <textarea name="message" style="width: 440px; height: 130px" rows="1" cols="20"></textarea></td></tr> 
                <tr> 
                    <td style="width: 146px">Ваше имя</td> 
                    <td><input name="name" type="text" style="width: 440px" size="20" value="" /></td></tr> 
  
                <tr> 
                    <td style="width: 146px">Вы можете присоединить необходимые файлы</td> 
                    <td><input name="fileforsending" type="file" style="width: 440px" /></td></tr> 
                <tr> 
                    <td style="width: 146px">&nbsp;</td> 
                    <td><br /> 
                        <input name="Reset1" type="reset" value="Очистить" style="width: 97px" /> 
                        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
                            <input name="Submit1" type="submit" value="Отправить" style="width: 157px" /> 
                            &nbsp; </span> 
                    </td></tr> 
            </table> 
        </form>

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

Попытался заменить конструкцию document.getElementById(feedback) на такую document.getElementsByClassName(feedback) но ничего не получилось полагаю из за вот этой строки var form = document.forms.feedback; В ней переменной form присваиваются какие то функции, но к сожалению не могу понять какие и за что это отвечает.

одскажите как можно модифицировать скрипт чтобы можно было отправлять данные с любой формы на странице?

READ ALSO
Последовательные ajax запросы

Последовательные ajax запросы

Прошу помощи связывании в последовательном связывании ajax запросов(пример ниже работает некорректно)

277
Передача ajax , обьекта

Передача ajax , обьекта

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

243