Главная » Языки программирования

Bootstrap Modal Form Submission

Содержание
  1. Bootstrap Modal Form Submit PHP MySQL
  2. Bootstrap Modal Form Submit using Ajax in PHP MySQL
  3. Step 1: Setting up the Database
  4. Step 2: Connecting to the Database
  5. Step 3: Handling Form Submission with PHP
  6. Step 4: Create the Modal Form with Bootstrap
  7. Step 5: Handling Form Submission with AJAX
  8. Conclusion
  9. Webslesson
  10. PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial
  11. Sunday, 23 October 2016
  12. PHP Ajax Update MySQL Data Through Bootstrap Modal
  13. Source Code
  14. index.php
  15. fetch.php
  16. insert.php
  17. select.php
  18. tbl_employee
  19. Edit or Update Data with Bootstrap Modal in PHP & MySQL Using Ajax
  20. Index.html
  21. Save.php
  22. All.php
  23. Get.php
  24. Update.php
  25. Scripts.js
  26. Styles.css

Bootstrap Modal Form Submit PHP MySQL

Bootstrap modal form submit using Ajax with PHP MySQL; In this tutorial, you will learn how to create a bootstrap modal form and submit it using Ajax jquery with PHP Mysql.

Bootstrap Modal Form Submit using Ajax in PHP MySQL

  • Step 1: Setting up the Database
  • Step 2: Connecting to the Database
  • Step 3: Handling Form Submission with PHP
  • Step 4: Create the Modal Form with Bootstrap
  • Step 5: Handling Form Submission with AJAX

Step 1: Setting up the Database

First of all, you need to create a MySQL database and table to store the data for your bootstrap form data. Open your preferred MySQL management tool (e.g., phpMyAdmin) and execute the following SQL query to create a table named users :

CREATE TABLE users ( id INT(11) PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL, );

Step 2: Connecting to the Database

Next, you need to connect to the MySQL database using PHP. So, Create a new PHP file named submit.php and add the following code:

connect_error) < die("Connection failed: " . $conn->connect_error); > ?>

Step 3: Handling Form Submission with PHP

Now, you need to save or store bootstrap form data. So, you can use the following code. Add the following code after the database connection code in submit.php file:

query($sql) === TRUE) < echo "Data inserted successfully!"; >else < echo "Error: " . $sql . "
" . $conn->error; > $conn->close(); ?>

Step 4: Create the Modal Form with Bootstrap

Next, you need to create an HTML file named index.html and add the following code to create bootstrap form:

Step 5: Handling Form Submission with AJAX

If you prefer to submit the form using AJAX for a smoother user experience, modify the JavaScript code in your HTML file. Add the following code after including the Bootstrap JavaScript:

Читайте также:  Php escape json string

This code uses jQuery to handle the form submission event, serialize the form data, and send it to the submit.php file via AJAX. It then displays the response from the server and closes the modal.

Conclusion

By following this tutorial guide, you have learned how to create a Bootstrap modal form to submit data using AJAX in PHP script and store it in MySQL database.

Источник

Webslesson

PHP, MySql, Jquery, AngularJS, Ajax, Codeigniter, Laravel Tutorial

Sunday, 23 October 2016

PHP Ajax Update MySQL Data Through Bootstrap Modal

Hello friends in this post we are going to discuss how can we update data into mysql table data with Bootstrap Modal by using php script with Ajax jquery without page refresh. In previous tutorial on Bootstrap Modal we have show how to insert data into Mysql table by using Bootstrap Modal with PHP script with Ajax jquery. The main use of Bootstrap Modal we can do any type of database operation like Insert, Update, fetch and delete or display any message without opening of new page but we can do this type things on page in the form of pop up alert box. We can called this Bootstrap Modal by click on anchor tag or any button by using jquery code or we can also show Bootstrap Modal window by defining data attribute in element. Here we have use Ajax Jquery and by jquery we have get employee id from edit button, we have create all employee separate edit button with different id and in this id we have store employee id and by using jquery code we have get employee id from button and by using ajax we have fetch that employee id data from database and then after we have display that data into Bootstrap Modal html form field and in html form we can change data and by clicking on update button we can update data into mysql database by using Ajax request method.

Source Code

index.php

         
 
 
PHP Ajax Update MySQL Data Through Bootstrap Modal
 
 
 
 
 
 Employee Name Edit View    " btn-info btn-xs edit_data" /> " btn-info btn-xs view_data" />  ?>
×

Close
×

Enter Employee Name



Close

fetch.php

insert.php

  else < $query = " INSERT INTO tbl_employee(name, address, gender, designation, age) VALUES('$name', '$address', '$gender', '$designation', '$age'); "; $message = 'Data Inserted'; >if(mysqli_query($connect, $query)) < $output .= '

select.php

 '; while($row = mysqli_fetch_array($result)) < $output .= '  '.$row["name"].'   '.$row["address"].'   '.$row["gender"].'   '.$row["designation"].'   '.$row["age"].' Year  '; > $output .= '  '; echo $output; > ?>

tbl_employee

 -- -- Table structure for table `tbl_employee` -- CREATE TABLE IF NOT EXISTS `tbl_employee` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, `address` text NOT NULL, `gender` varchar(10) NOT NULL, `designation` varchar(100) NOT NULL, `age` int(11) NOT NULL, `image` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=187 ; -- -- Dumping data for table `tbl_employee` -- INSERT INTO `tbl_employee` (`id`, `name`, `address`, `gender`, `designation`, `age`, `image`) VALUES (1, 'Bruce Tom', '656 Edsel Road\r\nSherman Oaks, CA 91403', 'Male', 'Driver', 36, '1.jpg'), (5, 'Clara Gilliam', '63 Woodridge Lane\r\nMemphis, TN 38138', 'Female', 'Programmer', 24, '2.jpg'), (6, 'Barbra K. Hurley', '1241 Canis Heights Drive\r\nLos Angeles, CA 90017', 'Female', 'Service technician', 26, '3.jpg'), (7, 'Antonio J. Forbes', '403 Snyder Avenue\r\nCharlotte, NC 28208', 'Male', 'Faller', 32, '4.jpg'), (8, 'Charles D. Horst', '1636 Walnut Hill Drive\r\nCincinnati, OH 45202', 'Male', 'Financial investigator', 29, '5.jpg'), (175, 'Ronald D. Colella', '1571 Bingamon Branch Road, Barrington, IL 60010', 'Male', 'Top executive', 32, '6.jpg'), (174, 'Martha B. Tomlinson', '4005 Bird Spring Lane, Houston, TX 77002', 'Female', 'Systems programmer', 38, '7.jpg'), (161, 'Glenda J. Stewart', '3482 Pursglove Court, Rossburg, OH 45362', 'Female', 'Cost consultant', 28, '8.jpg'), (162, 'Jarrod D. Jones', '3827 Bingamon Road, Garfield Heights, OH 44125', 'Male', 'Manpower development advisor', 64, '9.jpg'), (163, 'William C. Wright', '2653 Pyramid Valley Road, Cedar Rapids, IA 52404', 'Male', 'Political geographer', 33, '10.jpg'), (178, 'Sara K. Ebert', '1197 Nelm Street\r\nMc Lean, VA 22102', 'Female', 'Billing machine operator', 50, ''), (177, 'Patricia L. Scott', '1584 Dennison Street\r\nModesto, CA 95354', 'Female', 'Urban and regional planner', 54, ''), (179, 'James K. Ridgway', '3462 Jody Road\r\nWayne, PA 19088', 'Female', 'Recreation leader', 41, ''), (180, 'Stephen A. Crook', '448 Deercove Drive\r\nDallas, TX 75201', 'Male', 'Optical goods worker', 36, ''), (181, 'Kimberly J. Ellis', '4905 Holt Street\r\nFort Lauderdale, FL 33301', 'Male', 'Dressing room attendant', 24, ''), (182, 'Elizabeth N. Bradley', '1399 Randall Drive\r\nHonolulu, HI 96819', 'Female', ' Software quality assurance analyst', 25, ''), (183, 'Steve John', '108, Vile Parle, CL', 'Male', 'Software Engineer', 29, ''), (184, 'Marks Johnson', '021, Big street, NY', 'Male', 'Head of IT', 41, ''), (185, 'Mak Pub', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40, ''), (186, 'Louis C. Charmis', '1462 Juniper Drive\r\nBreckenridge, MI 48612', 'Male', 'Mental health counselor', 40, '');

Источник

Edit or Update Data with Bootstrap Modal in PHP & MySQL Using Ajax

In this code, we will show you how to display the data with Bootstrap Modal and Update it in PHP & MySQL using AJAX. This function is one of the most important functions when creating an application. So we hope that you found it helpful to your research.

Showing records to your Bootstrap modal with PHP is helping the user experience for not loading your web page.

Edit or Update Data in PHP & MySQL Using Ajax

Index.html

First, we need to create our index.html just check the below code.

         

 
Edit or Update Data Using PHP & MySQL Ajax
 
 
 
 
Add New Employee
 
 
 
 
 
 
   
 
List of Employees
 
 
 
  
 
 
  
Edit Employee

Save.php

After the above code so we need the save function so that we can enable us to add a new record.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "INSERT INTO employees (email, first_name, last_name, address) VALUES ('".$email."', '".$first_name."', '".$last_name."', '".$address."')"; // Process the query so that we will save the date of birth if ($mysqli->query($sql)) < echo "Employee has been successfully created."; >else < return "Error: " . $sql . "
" . $mysqli->error; > // Close the connection after using it $mysqli->close(); ?>

All.php

Our next code is about getting all records via ajax.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "SELECT * FROM employees"; // Process the query so that we will save the date of birth $results = $mysqli->query($sql); // Fetch Associative array $row = $results->fetch_all(MYSQLI_ASSOC); // Free result set $results->free_result(); // Close the connection after using it $mysqli->close(); echo json_encode($row); ?>

Get.php

In this code, we will get the record and display it via modal.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "SELECT * FROM employees WHERE "; // Process the query so that we will save the date of birth $results = $mysqli->query($sql); // Fetch Associative array $row = $results->fetch_assoc(); // Free result set $results->free_result(); // Close the connection after using it $mysqli->close(); echo json_encode($row); ?>

Update.php

Now in this code, we are enabled to update the record after clicking the «Update» button via modal using ajax.

connect_errno) < echo "Failed to connect to MySQL: " . $mysqli->connect_error; exit(); > // Set the INSERT SQL data $sql = "UPDATE employees SET email='".$email."', first_name='".$first_name."', last_name='".$last_name."', address='".$address."' WHERE "; // Process the query so that we will save the date of birth if ($mysqli->query($sql)) < echo "Employee has been sucessfully updated."; >else < return "Error: " . $sql . "
" . $mysqli->error; > // Close the connection after using it $mysqli->close(); ?>

Scripts.js

In this code, we are enabled to process the above PHP codes via AJAX from saving record, getting all records, retrieving records, and updating it.

 function all() < // Ajax config $.ajax(< type: "GET", //we are using GET method to get all record from the server url: 'all.php', // get the route value success: function (response) '; // Loop the parsed JSON $.each(response, function(key,value) < // Our employee list template html += ''; html += "
" + value.first_name +' '+ value.last_name + " (" + value.email + ")" + "
"; html += "
" + value.address + "
"; html += ""; html += ''; >); html += ''; > else < html += '
'; html += 'No records found!'; html += '
'; > // Insert the HTML Template and display all employee records $("#employees-list").html(html); > >); > function save() < $("#btnSubmit").on("click", function() < var $this = $(this); //submit button selector using ID var $caption = $this.html();// We store the html content of the submit button var form = "#form"; //defined the #form ID var formData = $(form).serializeArray(); //serialize the form into array var route = $(form).attr('action'); //get the route using attribute action // Ajax config $.ajax(< type: "POST", //we are using POST method to submit the data to the server side url: route, // get the route value data: formData, // our serialized array data for server side beforeSend: function () , success: function (response) , error: function (XMLHttpRequest, textStatus, errorThrown) < // You can put something here if there is an error from submitted request >>); >); > function resetForm(selector) < $(selector)[0].reset(); >function get() < $(document).delegate("[data-target='#edit-employee-modal']", "click", function() < var employeeId = $(this).attr('data-id'); // Ajax config $.ajax(< type: "GET", //we are using GET method to get data from server side url: 'get.php', // get the route value data: , //set data beforeSend: function () , success: function (response) >); >); > function update() < $("#btnUpdateSubmit").on("click", function() < var $this = $(this); //submit button selector using ID var $caption = $this.html();// We store the html content of the submit button var form = "#edit-form"; //defined the #form ID var formData = $(form).serializeArray(); //serialize the form into array var route = $(form).attr('action'); //get the route using attribute action // Ajax config $.ajax(< type: "POST", //we are using POST method to submit the data to the server side url: route, // get the route value data: formData, // our serialized array data for server side beforeSend: function () , success: function (response) , error: function (XMLHttpRequest, textStatus, errorThrown) < // You can put something here if there is an error from submitted request >>); >); > $(document).ready(function() < // Get all employee records all(); // Submit form using AJAX To Save Data save(); // Get the data and view to modal get(); // Updating the data update(); >);

Styles.css

Then our last code about the custom style of our page.

Okay, we were done setting up our code and you can now enable to update/edit your record using ajax. I hope this code can help you.

Источник

Оцените статью