В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.
Библиотека jQuery очень удобный инструмент. Она очень сильно упрощает работу с ajax-запросами, для этого у неё есть специальная конструкция.
Рабочую форму, а так же её создание можно найти в другой нашей статье Простая форма обратной связи своими руками. Или сразу скачать готовый пример из той статье:
Так, как мы работаем с библиотекой jQuery, не забываем подключить её в <head> файла index.html следующей строкой:
Теперь создадим папку js, в которую поместим наш будущий скрипт в файле под названием ajax.js. Подключаем этот файл в index.html, следующей строкой в <head>:
Теперь добавим id тэгу <form>, пусть, как бы это не было банально он будет со значением form.
Вот как будет выглядеть наша форма теперь:
Открываем файл ajax.js и добавляем туда следующий код:
Если у вас есть базовые знания по JavaScript, то комментарии помогут вам разобраться и полностью понять код выше.
Стоит обратить внимание на 7 строчку, где задается обработчик формы, путь нужно указывать так, чтобы скрипт нашел его, иначе сообщения не будут отправляться и вы будете долго ломать голову - почему. Смотреть то, нашел скрипт или нет, можно в Средствах разработчика любого браузера.
Мы записали функцию, которая будет отправлять данные через ajax, теперь добавим <input> с типом submit событие onClick(Выполняет при нажатии на элемент), по которому и будет вызываться эта функция.
Вот как станет выглядеть форма полностью:
Если теперь попробовать послать сообщение, то страница всё равно перезагрузится, потому что для <input> с типом submit это заложено в коде по-умолчанию. Проблема решается изменением типа на button:
Результат работы вы можете проверить на демо-странице (напоминаем, что письмо отсылается на адрес, который вы указали в поле формы):
А исходники скачать по ссылке ниже:
Если у вас есть вопрос, задавайте их в комментариях ниже.
Добавить комментарий
Авторизоваться с помощью: