Отправка формы без перезагрузки браузера

Февраль 5th, 2010 по admin Оставить ответ »

Делаем форму:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form id="regForm" name="regForm" action="" method="post">
    <h2>Форма обратной связи</h2>
	<table cellpadding="0" cellspacing="15" class="feedback">
	   <tr>
        <td>
            <p>
                Ваше имя:<br />
				<div class="message" id="err_name"></div>
                <input name="name" id="name" size="40" maxlength="40" class="input" type="text">
            </p>
            <p>
                Ваш e-mail:<br />
				<div class="message" id="err_email"></div>
                <input name="email" id="email" size="40" maxlength="40" class="input" type="text">
 
            </p>
            <p>
                <strong>ЗДЕСЬ CAPTCHA</strong>
            </p>
        </td>
        <td>
            <p>
                Ваше сообщение:<br />
				<div class="message" id="err_text_message"></div>
                <textarea name="text_message" id="text_message" cols="40" rows="6" class="input"></textarea>
            </p>
        </td>
      </tr>
	   <tr>
        <td colspan="2" style="text-align:center;">
            <input name="mail_submit" type="submit" onclick="SendForm('regForm','name,email,text_message','sendemail.php');return false" value="Отправить сообщение">
 
        </td>
      </tr>
    </table>
	</form>

обработотчик нажатия кнопки отправить:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function SendForm(formid,fieldnames,action){
 
var count = -1;
 
  //проверяем заполненность нужных полей
  var field = fieldnames.split(',');
  for(var i=0;i<=field.length;i++){
    if($('#'+field[i]).val()==''){//если поле пустое, выделяем его
        count++;
        $('#'+field[i]).css({backgroundColor: "#FFCECE",border: "1px solid #BB0000"});
        if(count==0)$('#'+field[i]).focus();//ставим курсор в первое незаполенное поле
        //выводим сообщение
        $('#err_'+field[i]).hide();
        $('#err_'+field[i]).html('заполните поле');
        $('#err_'+field[i]).fadeIn('slow');
 
      }else{//если поле заполено, отменяем выделение
        $('#'+field[i]).css({backgroundColor: "#fff",border: "1px solid #888"});
        $('#err_'+field[i]).empty();
      }
  }
 
  //если все поля заполены, отправвляем обработчику
  if(count==-1){
 
  var dataString = $('#'+formid).serialize();//собираем все данные в строку
 
    $.ajax({
      type: "POST",
      url: action,
      data: dataString,
      success: function(data){
 
        //если в ответе содержится символ '/', выводим сообщение об ошибке заполнениия
        if(data.indexOf('/')>-1){
          field = data.split('/');//отделяем сообщение от id (name) поля
          $('#'+field[1]).css({backgroundColor: "#FFCECE",border: "1px solid #BB0000"});
          if(count==0)$('#'+field[1]).focus();
          $('#err_'+field[1]).hide();
          $('#err_'+field[1]).html(field[0]);
          $('#err_'+field[1]).fadeIn('slow');
 
        }else{
           //если форма отправлена успешно выводим alert с текстом сообщения
           alert(data);
           $('#'+formid)[0].reset(); //сбрасываем значения формы
        }
 
      }
     });
 
  }
 
}

ну и сам отбработчик запощеных данных sendemail.php:

1
2
3
4
5
6
if(!preg_match("|^[-0-9a-z_]+@[-0-9a-z_]+\.[a-z]{2,6}$|i", $_POST['email']))
       {
         echo"Указан некорректный e-mail/email"; exit();
      }
//дальше заносим данные в базу или т.п.
echo "Спасибо! Вашe сообщение отправленно.";
Реклама

Добавить комментарий

Вы должны войти на сайт чтобы оставить комментарий.