Делаю форму обратной связи, сам скрипт и обработчик для формы нашел на просторах интернета. Вот они:
<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"> </td>
<td><br />
<input name="Reset1" type="reset" value="Очистить" style="width: 97px" />
<span>
<input name="Submit1" type="submit" value="Отправить" style="width: 157px" />
</span>
</td></tr>
</table>
</form>
Но проблема вот в чем в скрипте для отправки формы используется идентификатор формы, а их на странице предполагается быть несколько пусть и абсолютно одинаковых, а так как идентификатор должен быть только один данные будут отправляться только с одной формы.
Попытался заменить конструкцию document.getElementById(feedback)
на такую document.getElementsByClassName(feedback)
но ничего не получилось полагаю из за вот этой строки var form = document.forms.feedback;
В ней переменной form присваиваются какие то функции, но к сожалению не могу понять какие и за что это отвечает.
одскажите как можно модифицировать скрипт чтобы можно было отправлять данные с любой формы на странице?
Виртуальный выделенный сервер (VDS) становится отличным выбором
Прошу помощи связывании в последовательном связывании ajax запросов(пример ниже работает некорректно)
Как передать document , ajax запросом , и обработать его (вывести на экран , сохранить в файле , что угодно)