JQuery отправка формы

[startus]

Удобная ф-ция оптравки формы аля POST методом JQuery.

1) Подключаем JQuery: (лучше закачайте эти библиотеки на свой хост, ибо сайт случайно нашел с ними, желательно перед тегом </head>)

<script src="http://vibrolux.ru/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://vibrolux.ru/media/js/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://vibrolux.ru/media/js/jquery.form.js"></script>

2) Сама функа: (где bystartus - id <div> блока, куда выводить ответ обработчика формы)

<script type="text/javascript">
 
 
    function SendForm(result_id,form_id,url) {
      jQuery.ajax({
        url:    url, //Адрес подгружаемой страницы
        type:    "POST", //Тип запроса
        dataType: "html", //Тип данных
        data: jQuery("#"+form_id).serialize(),
        success: function(response) { //Если все нормально
        document.getElementById("bystartus").innerHTML = response;
        },
          error: function(response) { //Если ошибка
          document.getElementById(result_id).innerHTML = "Ошибка отправки";
          }
        });
    }
 
</script>

3) Сама форма:

<form id="xzform" method="post" action="#">
      Ваше имя:<br /><input name="value1" type="text" size="40" value="" required><br />
      Ваш город:<br /><input name="value2" type="text" size="40" value="" required><br />
      <input type="image" src="send.png" value="Оставить отзыв" onclick="SendForm('result_div_id', 'xzform', 'obrabotchik.php');" >
  </form> 
<div id="bystartus">Тут ответ обработчика</div>

4) Сам обработчик: (РНР)

<?php
 
// htmlspecialchars - анти xss
$namez = htmlspecialchars($_POST["value1"]);
$gorod = htmlspecialchars($_POST["value2"]);
 
// Проверка на заполненность полей или против ламеров
if (empty($namez)){ die('Заполните все поля!'); };
if (empty($gorod)){ die('Заполните все поля!'); };
 
// Выводим полученное
echo $namez.' '.$gorod;
 
/* Coded by Makovyak */
?>

Надеюсь, может кому пригодится =)

 

[allseo]

Я в небольшом проекте, дабы не тянуть jQuery, делал сериализацию так:

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;
}
function parseForm(form){
 var mas1=form.getElementsByTagName('input');
 var mas2=form.getElementsByTagName('select');
 var mas3=new Array();
 for (var i=0;i<mas1.length;i++){
  mas3.push(mas1[i]);
 }
 for (var i=0;i<mas2.length;i++){
  mas3.push(mas2[i]);
 }
 return mas3;
}
function submitForm(form,link,result){
 var vars=parseForm(form);
 var xmlhttp=openScript(link);
 var post='';
 for (var i in vars){
  post+=vars[i].name+'='+encodeURIComponent(vars[i].value)+'&';
 }
 post=post.slice(0,post.length-1);
 xmlhttp.send(post);
 xmlhttp.onreadystatechange=function() {renderResponse(xmlhttp,result);};
}
function openScript(name){
 var xmlhttp=getXmlHttp();
 xmlhttp.open('POST',name,true);
 xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 return xmlhttp;
}
function renderResponse(xmlhttp,elem) {
 if (xmlhttp.readyState == 4) {
  if(xmlhttp.status == 200) {
   elem.innerHTML=xmlhttp.responseText;
  } else {
   elem.innerHTML=xmlhttp.statusText;
  }
 }
}

Сурово и легковесно

 

[esche]

Сурово и легковесно

ИМХО, слишком сурово.. Сейчас много где JQuery используется..
Понятно, что в данном конкретном случае всё работает.. пока

А потребуется текстовое поле добавить в форму.. или просто захотят "input в две строчки" - в коде разбираться.. Это хорошо, если сам помнишь. После двух-трёх потерянных дней в разборах "в чём же дело" из-за таких "экономий" получается, что нифига не сэкономил.

* не призываю JQuery использовать.. но, возможно, сделать что-то чуть более универсальное.. или посмотреть в сторону других библиотек... в т.ч. для работы с ajax-ом (xajax в своё время использовал)

p.s. минималистичный ya.ru тоже jquery тянет...