Всплывающее окно

Всем здарова! Прошу нубской помощи в js.

Есть форма с данными: тел, ФИО, мыло и тд.
данные отправляется на send.php, в котором обрабатываются и отправляются на почту.
файл send.php:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <?php if (isset($_POST['name'])) {$name = $_POST['name'];} if (isset($_POST['city'])) {$city = $_POST['city'];} if (isset($_POST['phone'])) {$phone = $_POST['phone'];} if (isset($_POST['message'])) {$message = $_POST['message'];} if (isset($_POST['email'])) {$email = $_POST['email'];} $address = "id.bmite@gmail.com"; $mes = "Имя: $name \nГород: $city \nТелефон: $phone \nE-mail: $email \nЗаявка: $message"; $send = mail ($address,$city,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email"); if ($send == 'true') { echo "Ваша заявка принята, в течение 10 минут наш специалист свяжется с Вами."; } else { echo "Не удалось отправить заявку, заполните все поля правильно."; } ?>

как в js или может как то еще проще, сделать, что бы не редиректило на site.ru/send.php , а после того как жму кнопку отправить, появлялось сообщение с моим текстом и при этом все работало(отправлялось на почту)

 

Заюзав ajax - jquery.page2page.ru/index.php5/Ajax-запрос

 

я гуглить тоже умею. можете что то конкретнее написать?

 

Там же есть пример, если конкретнее, то :

Code:

$.ajax({
  url: "some.php",
  success: function(data){
    alert( "Прибыли данные: " + data );
  }
});

Вместо alert( "Прибыли данные: " + data );
можно данные, в переменной data, полученные от some.php вывести в div :

Code:

$.ajax({
  url: "some.php",
  success: function(data){
document.getElementById('tot_samiy_div').innerHTML = data;
  }
});

Предварительно создав div, с нужным id

 

Code:

<input required  type="text" id="name" /><br />
<input required  type="text" id="city" /><br />
<input required  type="text" id="phone" /><br />
<textarea required id="message" /></textarea>

<button onclick="send();">OK</button>
<script>
	function send(){
			var name = document.getElementById('name').value,
			city = document.getElementById('city').value,
			phone = document.getElementById('phone').value,
			message = document.getElementById('message').value;
			var params = 'name='+name+'&city='+city+'&phone='+phone+'&message='+message;
			var xhr = new XMLHttpRequest();
			xhr.open('POST','index.php', true);
			
			xhr.send(params);
			xhr.onreadystatechange=function(){
				if (xhr.readyState != 4) return
				if (xhr.status === 200) {
					alert(xhr.responseText);
				}
			}
			
			
	}
	
</script>

Отвыкайте использовать джопокуери при простейшей задаче.

 

оно!только что то тут не так, данные пустые приходят на почту, где косяк?

 

В php, отформатируй и выложи, лень тыкать на ентер. (измени первое сообщение, лучше ссылку на pastebin)

 

исходник обработчика

 

Накладка (=
После

Добавь

 

спасибо бро :-* все фурычит

 

Вот что бы не было таких накладок и проблем с кроссбраузерностью

var req = new ActiveXObject("Microsoft.XMLHTTP"); // IE
var req = new XMLHttpRequest();

и существует "джопокуери"

 

Gar|k, да, существует, а также существует понятие простота кода.
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

и существует MooTools, и существует scriptjava и еще много хорошего. Но это не значит что это залог здоровья.

 

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

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

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

Лично я советую http://vanilla-js.com/