Insert Checkbox values in Database using Ajax, Jquery & PHP

Hi, friends in this tutorial I show you how to insert checkbox values into MySQL database by using Ajax, jQuery in PHP without page refresh. When a user using checkbox then at that time the checkbox value insert into MySQL database without refreshing the web page by using Ajax, jQuery in PHP. I will insert checkbox value into the database and I have set checkboxes with values example like brand names and how many brands you like, when user select more than one brand in checkbox then all checkbox values to store into an array using jQuery and I am going to convert that array to string and by using jQuery & Ajax method I will insert values of all checkbox to table by using PHP.
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>SoftAOX | Insert Checkbox values in Database using Ajax, Jquery & PHP</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <h3>Insert Checkbox values in Database using Ajax, Jquery in PHP</h3> <input type="checkbox" class="get_value" value="Apple"> <label>Apple</label> <br/> <input type="checkbox" class="get_value" value="IBM"> <label>IBM</label> <br/> <input type="checkbox" class="get_value" value="Google"> <label>Google</label> <br/> <input type="checkbox" class="get_value" value="Microsoft"> <label>Microsoft</label> <br/> <input type="checkbox" class="get_value" value="Amazon"> <label>Amazon</label> <br/> <br/> <button type="button" name="submit" id="submit">Save</button> <br/> <h4 id="result"></h4> <script> $(document).ready(function() { $('#submit').click(function() { var insert = []; $('.get_value').each(function() { if ($(this).is(":checked")) { insert.push($(this).val()); } }); insert = insert.toString(); $.ajax({ url: "insert.php", method: "POST", data: { insert: insert }, success: function(data) { $('#result').html(data); } }); }); }); </script> </body> </html> |
insert.php
1 2 3 4 5 6 7 8 9 |
<?php if(isset($_POST["insert"])) { $conn = mysqli_connect("localhost", "root", "", "tut"); $query = "INSERT INTO checkbox(name) VALUES ('".$_POST["insert"]."')"; $result = mysqli_query($conn, $query); echo "Data Inserted Successfully!"; } ?> |
Download
Mraj
Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]