Как отправить форму с помощью jquery

"jquery отправка формы" - или "как отправить форму в jquery".

Подробно об отправке данных из формы в jquery

1. Форма для отправки в jquery
2. Скрипт для отправки формы в jquery.
3. Получение данных, обработка, вывод результата:
Живой пример отправки формы в jquery

4. Скачать

Форма для отправки в jquery

Для того, чтобы отправить форму в jquery нам понадобится:

Тег input - здесь, в принципе, атрибут "type" ни на что не влияете... его можно и не ставить...

Всего input - будет 2:

<input type = "text" placeholder = "имя" id="name">
<input type = "text" placeholder = "email" id = "email">

Кнопка отправить форму в jquery - тег button

<button id="send">Отправить</button>

И возвращать будем результат из php файла в тег div

Форма для отправки форм в jquery.

<input type = "text" placeholder = "имя" id="name">
<input type = "text" placeholder = "email" id = "email">
<button id="send">Отправить</button>
<div id="rezult">здесь "Ответ из php обработчика"</div>

Разместим выше приведенную форму прямо здесь:

Результат вывода формы для отправки в php файл на jquery

Отправить
здесь "Ответ из php обработчика"



Скрипт для отправки формы в jquery.

Далее... нам нужно данные получить из выше приведенной формы.

Обработать.

Отправить.

Получить ответ из php файла:

Разбор скрипта для отправки формы в jquery

Первым шагом не забываем - подключить jquery

Проверяем страница загрузилась?

$( document ).ready(function(){

Отлавливаем click по кнопке отправить:

$( '#send' ).click(function(){

Создаем три переменные, получаем данные из input обращаемся к тегу используем val() :

var name = $('#name').val();
var email = $('#email').val();
Третья переменная - просто для удобства... потому, что там может быть очень длинный адрес страницы.
var url_post = 'jquery_post_form.php';


Отправляем форму с помощью jquery:

$.post( url_post, { name , email },

Получаем ответ из php файла и отправляем в 4 поле в форме:

function( data ) {
$( '#rezult' ).html(data);
}


Соберем весь скрипт отправки формы в jquery

Скрипт jquery отправки данных в php файл

<script>

$( document ).ready(function(){

    $( '#send' ).click(function(){

         var name = $('#name').val();

         var email = $('#email').val();

         var url_post = 'jquery_post_form.php';

         $.post( url_post, { name , email },

              function( data ) {

              $( '#rezult' ).html(data);

              }

    );

    });

});

</script>




Получение данных, обработка, вывод результата:

Получаем данные с помощью post + trim + strip_tags

$name = strip_tags (trim($_POST['name']));
$email= strip_tags (trim($_POST['email']));


Если обе переменные существуют:

if($name and $email)
{
выполняем код....
}


Иначе:

else{ $bad = 'Что-то пошло не так...';}

Пример проверки емайла на собаку "@"(здесь можно сделать много проверок полученных данных.):

if(!@substr_count($email , '@')) $bad='email - введен не правильно';

Если не "bad"(всё плохо) в переменную($echo) помещаем результат:

if(!$bad)
{
    $echo = '....


Прямо в echo делаем условие... если существует переменная $bad, обернем её в красный(red)...

echo $bad ? '<red>'.$bad.'</red>' : $echo;

Нам осталось собрать весь php в одно целое:

Php код для обработки данных из формы с помощью jquery :

<?

$name = strip_tags (trim($_POST['name']));

$email= strip_tags (trim($_POST['email']));

if($name and $email)

{

    if(!@substr_count($email , '@')) $bad='email - введен не правильно';

    if(!$bad)

    {

         $echo = '

              Отправленные данные :

              <div class="border">

              1). name (имя) = '.$name.'<br>

              2). email (почта) = '.$email.'

              </div>

              ';

    }

}

else{ $bad = 'Что-то пошло не так...';}

echo $bad ? '<red>'.$bad.'</red>' : $echo;

Живой пример отправки формы в jquery:

Для того, чтобы протестировать выше приведенные скрипты вы можете пройти на страницу пример:

Пример отправки формы jquery