Bootstrap Example

Email address

success : function(data) <

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

>

>);

>

lodetable();

$('form').on('submit', function (e) <

e.preventDefault();

$.ajax( <

type: 'post',

url: 'insert_form_data.php',

data: $('form').serialize(),

success: function () <

alert('Data Inserted Successfully');

lodetable();

$("form").trigger("reset");

>

>);

>);

>);

insert_form_data.php

$conn = mysqli_connect("localhost","root","root","form");

$name = $_POST['name'];

$email = $_POST['email'];

$query = "INSERT INTO ajax_form(name,email) VALUES ('$name','$email')";

$result = mysqli_query($conn,$query);

?>

$conn = mysqli_connect("localhost","root","root","form");

$query = "SELECT * FROM ajax_form";

$result = mysqli_query($conn,$query);

?>

#

Name

Email

?>

✌️ Like this article? Follow me on Twitter and Facebook. You can also subscribe to RSS Feed.

You might also like.

Источник

Registration Form using Ajax, PHP & MySQL

If you want to create a registration form that will not reload after submitting the registration details. Then you should make the ajax registration form with PHP & MySQL.

The Ajax Registration form is very useful to process the registered data quickly to the database without refreshing the web page. So. It is frequently used in most of web applications to make their registration form userfriendly & attractive.

In this tutorial, I have shared some simple steps to create the registration/signup form using jquery ajax in PHP & MySQL. Once you learn it you can create any type of other registration forms.

Steps to Create Ajax Registration Form with PHP & MySQL

Now, Let’s start the coding to create the ajax registration form with the following simple steps –

1. Create Registration Form Directory Structure

First of all, You should create the following directory structure to build the registration form.

source-code/ |__database.php |__ajax-script.php |__php-script.php |__index.php |

2. Create MySQL Table

Now, Create a MySQL Database –

Database Name – codingstatus

CREATE DATABASE codingstatus

After that create a table in the database ‘codingstatus’

CREATE TABLE `users` ( `id` int(10) NOT NULL AUTO_INCREMENT, `firstName` varchar(50) DEFAULT NOT NULL, `lastName` int(50) DEFAULT NOT NULL, `gender` int(10) DEFAULT NOT NULL, `emailAddress` int(50) DEFAULT NOT NULL, `password` int(20) DEFAULT NOT NULL );

3. Connect PHP to MySQL Database

Now, You have to connect PHP to the MySQL database with the following code

4. Create a Registration Form UI

To create the registration form UI, You have to follow the following points –

• Create a basic HTML structure
• Include the bootstrap5 CDN
• Create a form with id ‘registrationForm’
• Also, create some input fields for firstName, lastName, gender, email & submit button.
• Include the jQuery CDN
• Include the ajax-script.js

     
 
 
 
Ajax Registration Form
  
 
 
Male Female
 
 
 
Register Now  
 
    

5. Write ajax code for Registration

Now, We have to write ajax code to process the user Input to the PHP script. So, create a ajax-script.php and write the jquery ajax code. This code will execute when the user submits the form after filling out their registration.

To write an ajax code for registration, you have to follow the following points –

• Apply the submit event on the form id ‘registrationForm’
• Define the e.preventDefault to prevent the form from the reloading
• Implement the next steps within the $.ajax()
• define the form method post
• define the PHP file path – php-script.php
• also, serialize the input data using serialize() method
• define the success to get the success response
• display the success message in the id ‘msg’
• After the registered successfully, make empty all the input fields.

$(document).on('submit','#registrationForm',function(e)< e.preventDefault(); $.ajax(< method:"POST", url: "php-script.php", data:$(this).serialize(), success: function(data)< $('#msg').html(data); $('#registrationForm').find('input').val('') >>); >);

6. Write PHP to Insert Registration Data

Now, We have to insert input data into the database, So, create a php-script.php file and write the php code with the MySQL query. The code of this file will run while the ajax code will be executed and sent the post request.

To insert registration data, you have to write PHP code with the following points-

1. Include the database.php file
2. and assign connection variable $conn to the $db
3. Create a custom function registerUser() with two parameters $db and $userData.
4. write a MySQLi query to insert data into the database,
5. And then call the created function registerUser()

query($query); echo $db->error; if($execute) < echo "You are registered successfully"; >> else < echo "Wrong Confirm password"; >> else < echo "All Fields are required"; >>

7. Test Ajax Registration Form yourself

Now, You can text the ajax registration form by opening it in the web browser.

When you open the registration form will get the First Name, Last Name, gender, Email, Password & Confirm Password input fields.

After that Enter the required details and submit the form. after that, you will be registered successfully without reloading the web page.

Related posts:

Источник

Отправка формы без перезагрузки страницы на PHP и Ajax

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

Поэтому я не буду украшать ее стилями, применять классы Bootstrap и различные скрипты, как например маска телефона. Это вы сможете сделать при необходимости в зависимости от задачи.

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

HTML-код формы

Для начала создадим саму форму на HTML. Для примера будем использовать только 3 поля: имя, телефон и сообщение.
Один важный момент: у тега обязательно должен быть id. Если на странице будут использоваться несколько форм, то id соответственно должны быть различные.

Зачем это нужно? Именно по этому идентификатору скрипт и будет отличать отправленную форму от других. И при этом не возникнет необходимости делать несколько включений одного и того же JavaScript кода. Но тут опять же все индивидуально и вы можете переделать код как вам удобно.

В форме используем атрибут type в зависимости от типа поля. Это даст дополнительное преимущество при проверке вводимых данных. Чаще всего приходится использовать такие поля как:

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

Так же на данный момент для полей существуют различные атрибуты, которые избавят от лишних проверок на JavaScript. В этом примере используется атрибут required устанавливающий поле обязательным. А вот например в атрибуте pattern можно указать регулярное выражение для проверки маски ввода. Но я все же для этих целей использую соответствующий плагин jQuery.

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

Тут самое интересное. Но как всегда на самом деле все просто. Приведенный ниже код можно подключить в отдельном .js скрипте или прямо в теле страницы перед закрывающим тегом

И не забудьте перед кодом подключить библиотеку jQuery!

$(document).ready(function () < $("form").submit(function () < // Получение ID формы var formID = $(this).attr('id'); // Добавление решётки к имени ID var formNm = $('#' + formID); $.ajax(< type: "POST", url: '/send.php', data: formNm.serialize(), beforeSend: function () < // Вывод текста в процессе отправки $(formNm).html('
Отправка.
 '); >, success: function (data) < // Вывод текста результата отправки $(formNm).html('
'+data+'
'); >, error: function (jqXHR, text, error) < // Вывод текста ошибки отправки $(formNm).html(error); >>); return false; >); >);

Скрипт отслеживает событие submit и получает id той формы, которая была отправлена. Далее по имеющемуся id он обращается к данным этой формы. В данном примере скрипт отслеживает все элементы с тегом .

Хотите купить новый телефон? Здесь вы можете купить айфон краснодар с высоким качеством и по низкой цене.

После получения данных, скрипт передает их PHP обработчику send.php, который находится в корне сайта. Во время отправки данных в теге выводятся сообщения из функций beforeSend — перед отправкой, success — в случае успеха и error в случае ошибки. Сами поля формы и кнопка отправки при этом стираются.

PHP обработчик

 $mailTo = "mail@mail.ru"; // Ваш e-mail $subject = "Письмо с сайта"; // Тема сообщения $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; $headers . ; if(mail($mailTo, $subject, $message, $headers)) < echo "Спасибо, ".$_POST['name'].", мы свяжемся с вами в самое ближайшее время!"; >else < echo "Сообщение не отправлено!"; >> ?>

В самом начале проверяем, что запрос пришел из Ajax и что поле имя не пусто. Далее получаем данные переданные Ajax имя, телефон и сообщение если есть. Устанавливаем заголовки и отправляем с помощью PHP-функции mail() .

$mailTo — ваш e-mail, куда будут приходить сообщения с сайта
$subject — тема сообщения
$headers . mailto:info@site.ru"> info@site.ru \r\n"; — здесь указываем почту с доменом вашего сайта. Почта не обязательно должна существовать (хотя некоторые почтовые сервисы требуют и этого), но обязательно должна быть на домене сайта, с которого отправляется письмо, иначе оно будет попадать в СПАМ.

Заключение

Как вы могли убедиться использовать технологию AJAX с библиотекой jQuery и отправлять письма без перезагрузки страницы вообще проще простого. Надеюсь этот пример формы на PHP и AJAX или отдельные его части пригодятся вам для разработки различных решений для сайта.

Подборка бесплатных IT-курсов и вебинаров от Skillbox.

Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь

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

Источник

Простая форма обратной связи на php и ajax

Недавно я уже писал про форму обратной связи на php, но немного подумав, я решил ее немного модернизировать. Сейчас очень много где используется технология ajax, которая позволяет отправлять запросы на сервер без перезагрузки страницы. Давайте тоже не будем отставать от прогресса и сделаем отправку данных с нашей формы обратной связи средствами ajax.

Алгоритм действий будет не на много отличаться от обычной формы. Для начала сверстаем формочку, после чего напишем серверный скрипт и после этого добавим js скрипт, который свяжет клиентскую и серверную части. Работать с ajax будем с помощью библиотеки jQuery, поэтому не забудьте ее подключить.

Простая форма обратной связи на php и ajax. Код

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

        
 
 
Ваш e-mail: 
 
Текст сообщения: 
   

И второй файл, в котором будет находиться серверная логика, написанная на php:

"; $message .= "E-mail пользователя: " . $_POST['user_email'] . "
"; $message .= "Текст письма: " . $_POST['text_comment']; send_mail($message); // отправим письмо // выведем сообщение об успехе $msg_box = "Сообщение успешно отправлено!"; >else< // если были ошибки, то выводим их $msg_box = ""; foreach($errors as $one_error)< $msg_box .= "$one_error
"; > > // делаем ответ на клиентскую часть в формате JSON echo json_encode(array( 'result' => $msg_box )); // функция отправки письма function send_mail($message)< // почта, на которую придет письмо $mail_to = "my@mail.ru"; // тема письма $subject = "Письмо с обратной связи"; // заголовок письма $headers= "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=utf-8\r\n"; // кодировка письма $headers .= "From: Тестовое письмо \r\n"; // от кого письмо // отправляем письмо mail($mail_to, $subject, $message, $headers); > ?>

Исходные коды подробно прокомментированы, поэтому что либо еще тут писать смысла нет. Остается только выложить исходники — вот они.

Источник