slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда не активна4 / 5
 
Автор: Администратор
Просмотров: 10267
Теги: javascript, form, jQuery, ajax, onclick

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Библиотека jQuery очень удобный инструмент. Она очень сильно упрощает работу с ajax-запросами, для этого у неё есть специальная конструкция.

Рабочую форму, а так же её создание можно найти в другой нашей статье Простая форма обратной связи своими руками. Или сразу скачать готовый пример из той статье:

download

Так, как мы работаем с библиотекой jQuery, не забываем подключить её в <head> файла index.html следующей строкой:

<SCRIPT type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></SCRIPT>

Теперь создадим папку js, в которую поместим наш будущий скрипт в файле под названием ajax.js. Подключаем этот файл в index.html, следующей строкой в <head>:

<script type="text/javascript" src="/js/ajax.js"></script>

Теперь добавим id тэгу <form>, пусть, как бы это не было банально он будет со значением form.

Вот как будет выглядеть наша форма теперь:

	<form action="send.php" method="get" id="form">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="submit" value="Нажмите, чтобы отправить письмо">
	</form>

Открываем файл ajax.js и добавляем туда следующий код:

/* Ajax-запрос */

function SendPost() // Наша функция, которая будет осуществлять ajax-отправку
{
       jQuery.ajax({	// Начала конструкции для работы с Ajax через jQuery
                type: "GET", // Метод, которым получаем данные из формы
                url: "/send.php", // Обработчик формы. 
                data: jQuery("#form").serialize(), // Этот метод, берет форму с id=form и достает оттуда данные
                success: function(html) {	// функция выполняемая при успешном отправлении данных
					jQuery("body").empty();	// очищаем тело документа
					jQuery("body").append("<h2><center>Ваше сообщение успешно отправлено.</center></h2>"); // вставляем сообщение об успехе
                }
        });
}

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

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

Мы записали функцию, которая будет отправлять данные через ajax, теперь добавим <input> с типом submit событие onClick(Выполняет при нажатии на элемент), по которому и будет вызываться эта функция.

Вот как станет выглядеть форма полностью:

	<form action="send.php" method="get" id="form">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="submit" value="Нажмите, чтобы отправить письмо" onClick="SendPost();">
	</form>

Если теперь попробовать послать сообщение, то страница всё равно перезагрузится, потому что для <input> с типом submit это заложено в коде по-умолчанию. Проблема решается изменением типа на button:

	<form action="send.php" method="GET" id="form">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="button" value="Нажмите, чтобы отправить письмо" onClick="SendPost();">
	</form>

Результат работы вы можете проверить на демо-странице (напоминаем, что письмо отсылается на адрес, который вы указали в поле формы):

demo

А исходники скачать по ссылке ниже:

download

 

 Если у вас есть вопрос, задавайте их в комментариях ниже.

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

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
  • JesseBLamurb
    3.00
  • Lambadacit
    3.00
  • LiStudio16
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

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

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее
Простейшие табы(вкладки) контента на jQuery

В этой статье мы реализуем вкладки с любым содержимым при помощи библиотеки jQuery.

Теги:

javascript, jQuery, tabs, tab

Комментариев: 0 Подробнее

Последнее с форума

cyrilsh аватар
Сразу прошу обратить внимание, что это не совсем обычное предложение, потому просьба не писать, пока...
Перейти в тему
Музыкальный сайт 1 мес. 6 дн. назад
giljza аватар
Приветствую друзья! Решил попробовать создать музыкальный сайт но с толкнулся с проблемой при выборе...
Перейти в тему
triada1 аватар
Добрый день.Сразу к сути . В поиске выдает ссылку на удаленную страницу, хотя в файлах сайта этой ст...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.