Sumbit формы
Вопрос не совсем по JS, а, возможно, по PHP.
Когда юзер ввёл данные формы и нажал Sumbit, как при этом остаться на этой же странице? Форма - это просто отправка мыла, на мыло отправляю в php скрипте. Но при этом загружается и страница sendmail.php. Как сделать так, чтобы просто показать окно с сообщением вместо перехода на новую страницу? <form action="sendmail.php" method="post"> <p><input type="text" size="40" placeholder="Ваше имя" name="user"></p> <p><input type="text" size="40" placeholder="E-mail" name="email"></p> <p><input type="text" size="40" placeholder="Тема письма" name="subj"></p> <p>Текст обращения<Br> <textarea placeholder="Текст обращения" name="text" cols="40" rows="6"></textarea></p> <p><input type="submit" value="Отправить" name="submit_form1"></p> </form>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body >
<h3>Заявка успешно отправлена!</h3>
<?php
if(isset($_POST['submit_form1']))
{
$name = $_POST['user'];
$mail = $_POST['email'];
$subj = $_POST['subj'];
$body = "Имя отправителя: ".$name."\nE-mail отправителя: ".$mail."\n\nТекст письма:\n\n".$_POST['text'];
mail("mymain@gmail.com", $subj, $body, "Content-Type: text/plain; charset=utf-8\n");
header("Refresh: 4; url=".$_SERVER['HTTP_REFERER']);
}
?>
|
В нормальных браузерах можно так сделать:
<script>
function sendForm(form, success) {
var request = new XMLHttpRequest();
request.open(form.method, form.action);
request.onreadystatechange = function() {
if (request.readyState == request.DONE) {
if (request.code == 200) {
success(request.responseText);
}
}
};
request.send(new FormData(form));
}
</script>
<form onsubmit="return sendForm(this, alert), false" action....>
|
Цитата:
Спасибо! |
Цитата:
Если нужна кроссбраузерность, то у тебя два пути: 1) Подключить либу jQuery, там есть .serialize() и $.ajax() 2) Вместо FormData написать функцию сериализации в строку. Функция выглядит примерно так:
function isSubmittable(control) {
var element = control.nodeName.toLowerCase();
if (['select', 'textarea', 'keygen'].indexOf(element) > -1)
return true;
if (element == 'input') {
if (['submit', 'button', 'image', 'reset', 'file'].indexOf(control.type) > -1)
return false;
if (['checkbox', 'radio'].indexOf(control.type) > -1 && !control.checked)
return false;
return true;
}
return false;
}
function serialize(form) {
var segments = [];
for (var i = 0, control; control = form.elements[i]; i++) {
if (!control.name || control.disabled || !isSubmittable(control))
continue;
segments.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value));
}
return segments.join('&');
}
Код особо не тестил. К сожалению костыля для FormData найти не удалось.. |
Принцип понял - спасибо ещё раз!
|
Забыл проинициализировать i в коде, поправил.
|
Riddik, то что тебе нужно - можно реализовать вообще без JS, если конечно doctype позволит: загрузка нескольких файлов на сервер
|
moskitos80, а причем тут загрузка файлов? И как аякс будет работать без JS по-твоему?
И кстати, разве doctype что-либо позволяет/запрещает? |
есть варианты можно в фрейме отправлять
или JsonP использовать и даже img если не нужно ответ получать |
danik.js,
Вместо request.send(new FormData(form)); Вставил request.send(serialize(form)); Ничего не происходит, php скрипт не вызывается. Неправильно запрос формирую? moskitos80, спасибо, попробую так. |
Цитата:
Цитата:
|
Цитата:
|
Беда прямо какая-то с этим, вроде простая отправка на мыло...
Вариант с FormData работает только в Хроме - во всех остальных ничего не происходит, php-скрипт даже не выполняется. Вариант с serialize вообще не работает нигде. Вариант по ссылке moskitos80 вроде можно обойтись без js, но тогда, насколько я понял, достаточно просто добавить атрибут target в form и какой-то фрейм - в этом весь смысл статьи? Js всё равно придется делать, иначе как окошко, что сообщение отправлено или нет вывести? |
С FormData даже в хроме то работает, то нет.
Выдаёт сообщение: Warning: mail()[function.mail]: Could not execute mail delivery program '/usr/sbin/sendmail -t -i' in /home/uez-host/uez.ru/docs/sendmail.php on line 11 Это уже проблемы на стороне хостера? К ним стучать? |
Цитата:
Цитата:
|
Вариант с target везде сработал, спасибо!
|
Цитата:
Вот полный код:
<script>
function isSubmittable(control)
{
var element = control.nodeName.toLowerCase();
if(['textarea'].indexOf(element) > -1) return true;
if(element == 'input')
{
if(['submit', 'button'].indexOf(control.type) > -1) return false;
return true;
}
return false;
}
function serialize(form)
{
var segments = [];
for(var i = 0, control; control = form.elements[i]; i++)
{
if (!control.name || control.disabled || !isSubmittable(control)) continue;
segments.push(encodeURIComponent(control.name) + '=' + encodeURIComponent(control.value));
}
return segments.join('&');
}
function sendForm(form, success)
{
var request = new XMLHttpRequest();
request.open(form.method, form.action);
request.onreadystatechange = function() {
if (request.readyState == request.DONE) {
if (request.status == 200) {
success(request.responseText);
}
}
};
request.send(serialize(form));
}
</script>
<h3>Форма отправки обращения</h3>
<form onsubmit="return sendForm(this, alert), false" action="../sendmail.php" method="post">
<p><input type="text" size="40" placeholder="Ваше имя" name="user"></p>
<p><input type="text" size="40" placeholder="E-mail" name="email"></p>
<p><input type="text" size="40" placeholder="Тема письма" name="subj"></p>
<p>Текст обращения<Br>
<textarea placeholder="Текст обращения" name="text" cols="40" rows="6"></textarea></p>
<p><input type="submit" value="Отправить" name="submit_form1"></p>
</form>
|
Цитата:
Кстати, ответ сервера на срочку в php-скрипте: header('Content-Type: text/html; charset=utf-8'); Warning: Cannot modify header information - headers already sent by (output started at /home/uez-host/uez.ru/docs/sendmail.php:1) in /home/uez-host/uez.ru/docs/sendmail.php on line 2 Что за ерунда? Как он может быть уже установлен? Настройки сервера виноваты? Т.к. на другом хосте этот же код работает как часы. |
Цитата:
Цитата:
header('Content-Type: text/html; charset=utf-8');
до момента какого либо вывода либо с использованием механизма буферизации опять же можно у меня глянуть: PHP: Буферизация вывода |
moskitos80,
так и есть, спасибо большое за помощь! |
Несмотря на кодировку utf-8, в IE 11 все равно сообщения выводятся в тарабарщине (где используется кириллица)
Обращение РЅРµ отправлено, попробуйте позже! В других браузерах всё нормально. Можно ли как-нибудь это вылечить для IE 11? |
Блин, перед request.send() добавь строчку:
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
Цитата:
|
Благодарю!)
|
| Часовой пояс GMT +3, время: 04:24. |