Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Sumbit формы (https://javascript.ru/forum/events/43703-sumbit-formy.html)

Riddik 17.12.2013 05:32

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']);
}
?>

danik.js 17.12.2013 06:14

В нормальных браузерах можно так сделать:
<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....>

Riddik 17.12.2013 11:46

Цитата:

Сообщение от danik.js
В нормальных браузерах можно так сделать:

Т.е. в IE ниже 9ки работать не будет?

Спасибо!

danik.js 17.12.2013 12:33

Цитата:

Сообщение от Riddik
Т.е. в IE ниже 9ки работать не будет?

К сожалению в 9 работать тоже не будет. Только начиная с 10.
Если нужна кроссбраузерность, то у тебя два пути:
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 найти не удалось..

Riddik 17.12.2013 12:54

Принцип понял - спасибо ещё раз!

danik.js 17.12.2013 14:56

Забыл проинициализировать i в коде, поправил.

moskitos80 17.12.2013 15:32

Riddik, то что тебе нужно - можно реализовать вообще без JS, если конечно doctype позволит: загрузка нескольких файлов на сервер

danik.js 17.12.2013 17:30

moskitos80, а причем тут загрузка файлов? И как аякс будет работать без JS по-твоему?
И кстати, разве doctype что-либо позволяет/запрещает?

Vlasenko Fedor 17.12.2013 18:04

есть варианты можно в фрейме отправлять
или JsonP использовать и даже img если не нужно ответ получать

Riddik 17.12.2013 18:09

danik.js,
Вместо request.send(new FormData(form));
Вставил request.send(serialize(form));
Ничего не происходит, php скрипт не вызывается. Неправильно запрос формирую?

moskitos80,
спасибо, попробую так.


Часовой пояс GMT +3, время: 07:52.