Biasanya ketika kita menginputkan sesuatu data yang kita masukan hanyalah, misalkan disini saya ingin menginputkan nama sebanyak yang kita mau, kita bisa gunakan cara ini, maka dari itu disini kita akan belajar Cara Menginputkan banyak data Sekaligus dengan Ajax, jangan kemana-mana simak terus ya.
Jadi untuk Cara Menginputkan banyak data Sekaligus dengan Ajax, saya menggunakan ajax, kenapa menggunkan ajax, karena disini saya membutuhkan DOM dari jquernya karena ketika saya menekan button read more, yang berarti saya ingin menginputkan data yang lain, maka disini kita membutuhkan jquery tersebut, oke langsung saja, karena disini saya menggunakan ajax, silahkan teman-teman buat terlebih dahulu, index.htmlnya, lalu ketikan seperti ini:
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <div class="container mt-3"> <div class="row"> <div class="offset-md-2 col-md-8"> <form id="add_name"> <div class="form-group"> <table class="table table-bordered" id="dynamic_field"> <tr> <td> <input type="text" name="name[]" class="form-control name_list" placeholder="Input Nama"> </td> <td> <button type="button" id="add" class="btn btn-success">Add More </button> </td> </tr> </table> <button class="btn btn-primary" id="submit">Submit</button> </div> </form> </div> </div> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ var i = 1; var app = { addRow: function(){ i++; $("#dynamic_field").append(` <tr id="row${i}"> <td> <input type="text" name="name[]" class="form-control name_list" placeholder="Input Nama yang lain"> </td> <td> <button type="button" id="${i}" class="btn btn-danger btn-remove">X </button> </td> </tr> `) }, remove: function(){ var idBtn = $(this).attr("id"); $("#row"+idBtn+"").remove() }, insertData: function(e){ e.preventDefault() $.ajax({ url: "data.php", method: "POST", data: $("#add_name").serialize(), success: function(response){ alert(response) $("#add_name")[0].reset() } }) } } $("#add").on("click", app.addRow) $(document).on("click", ".btn-remove", app.remove) $("#submit").on("click", app.insertData) }) </script> |
langsung saja copy ya supaya tidak lama-lama dan teman-teman juga bisa merasakan effectnya, lalu sekarang kita buka webservicenya disini saya menggunakan data.php (opsional namanya), dan di webservicenya saya membuatnya seperti ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php $koneksi = mysqli_connect("localhost", "root", "", "dataku"); $number = count($_POST["name"]); if($number > 1){ for($a=0; $a<$number; $a++){ if(trim($_POST["name"][$a] != "")){ $nama = mysqli_real_escape_string($koneksi, $_POST["name"][$a]); $query = mysqli_query($koneksi, "INSERT INTO dynamically_add VALUES('', '$nama') "); } } echo "data berhasil di input"; }else{ echo "Mohon masukan data lebih dari satu wkwk"; } ?> |
Oke sekarang silahkan coba jika berhasil maka hasilnya akan seperti ini:
silahkan teman-teman coba sendiri, ketika kita ingin menambahkan datanya silahkan klik saja addmore dan sekiranya sudah semua silahkan pilih button submit, oke saya rasa cukup sampai disini belajar kita tentang Cara Menginputkan banyak data Sekaligus dengan Ajax, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.