Tambahkan hapus bidang input bootstrap dinamis

Grup bidang Input sangat berguna saat data massal perlu dikirimkan sekaligus. Jika Anda memiliki persyaratan untuk mengirimkan grup data massal dengan beberapa kolom input, grup input memudahkan Anda. Alih-alih menampilkan beberapa grup input dalam jumlah tertentu sekaligus, Anda dapat menambahkan grup input secara dinamis untuk membuat aplikasi web lebih ramah pengguna

Dalam tutorial sebelumnya, kami telah menunjukkan cara menambahkan atau menghapus field input secara dinamis menggunakan jQuery. Tetapi skrip ini memungkinkan pengguna untuk menambahkan satu kolom input dalam satu klik. Sekarang kami akan memperluas fungsinya untuk membuat formulir web lebih produktif. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menambahkan grup kolom input secara dinamis menggunakan jQuery dan mengirimkan nilai grup input menggunakan PHP

Tambah & Hapus Grup Bidang Input Secara Dinamis

Contoh berikut menunjukkan bagaimana Anda dapat menambahkan lebih banyak grup dari beberapa bidang input secara dinamis dengan jQuery dan mengirimkan data grup beberapa bidang input menggunakan PHP. Sebagai contoh, kami akan menggunakan dua kolom (nama & email) di setiap grup dan semua grup dapat dikirimkan sekaligus

Perpustakaan Bootstrap & jQuery
Bootstrap digunakan untuk membuat input dan tombol terlihat lebih baik dan jQuery digunakan untuk mengimplementasikan menambahkan lebih banyak fungsionalitas grup kolom input. Jadi, Anda harus menyertakan library Bootstrap dan jQuery terlebih dahulu

Perhatikan bahwa. Jika Anda tidak ingin menggunakan pustaka Bootstrap, Anda dapat melewati untuk menyertakan pustaka Bootstrap (bootstrap. min. css). Tetapi perpustakaan jQuery diperlukan untuk mengimplementasikan menambahkan lebih banyak fungsionalitas grup bidang input

HTML
Awalnya, satu grup kolom input akan ditampilkan dan lebih banyak grup input dapat ditambahkan dengan tombol Add More yang ditempatkan di sebelah grup kolom input ini. Juga, grup input tersembunyi ditempatkan yang akan digunakan untuk menambahkan lebih banyak kolom input HTML dengan tombol hapus

            
    

        

            
            
            
 
                 Add
            
        

    

    
    
    




    

        
        
        
 
             Remove
        
    

JavaScript
Setelah tombol Tambah Lainnya (.addMore_) diklik, HTML tiruan dari grup input tersembunyi akan ditambahkan setelah fieldGroup terakhir. Anda juga dapat membatasi batas untuk menambahkan grup kolom input dengan maxGroup. Tombol Hapus (.remove) menghapus fieldGroup induk

$(document).ready(function(){
    //group add limit
    var maxGroup = 10;
    
    //add more fields group
    $(".addMore").click(function(){
        if($('body').find('.fieldGroup').length < maxGroup){
            var fieldHTML = '
'+$(".fieldGroupCopy").html()+'
';
            $('body').find('.fieldGroup:last').after(fieldHTML);
        }else{
            alert('Maximum '+maxGroup+' groups are allowed.');
        }
    });
    
    //remove fields group
    $("body").on("click",".remove",function(){ 
        $(this).parents(".fieldGroup").remove();
    });
});

Dapatkan Nilai Input dari Beberapa Grup Bidang di PHP

Setelah formulir beberapa grup bidang teks dikirimkan ke skrip sisi server (submit.php), gunakan metode $_POST untuk mengambil nilai dari bidang input di PHP

if(isset($_POST['submit'])){
    $nameArr = $_POST['name'];
    $emailArr = $_POST['email'];
    if(!empty($nameArr)){
        for($i = 0; $i < count($nameArr); $i++){
            if(!empty($nameArr[$i])){
                $name = $nameArr[$i];
                $email = $emailArr[$i];
                // Database insert query goes here
            }
        }
    }
}
?>

Apakah Anda ingin mendapatkan bantuan implementasi, atau memodifikasi atau meningkatkan fungsionalitas skrip ini?

Pada postingan kali ini kami akan memberikan informasi tentang Simple Add menghapus input field secara dinamis menggunakan jquery dengan Bootstrap. Dengar kami akan memberi Anda detail tentang Tambah Sederhana hapus bidang input secara dinamis menggunakan jquery dengan BootstrapDan cara menggunakannya juga memberi Anda demo untuk itu jika perlu

Dalam tutorial ini, saya akan menunjukkan kepada Anda cara menambahkan bidang input hapus secara dinamis di formulir Anda menggunakan jquery. Dalam contoh sederhana ini, saya memberi Anda untuk menambahkan beberapa bidang masukan dengan tombol hapus sehingga Anda dapat menghapus bidang jika Anda tidak memerlukannya. Dalam contoh ini saya menggunakan bootstrap juga karena tata letak menjadi cukup bagus

Dalam contoh ini, Cukup saya menambahkan acara jquery dua klik seperti yang tercantum di bawah ini

1. tambah-lebih Kelas. Pada ". add-more” dengan cara itu kita bisa menulis kode tambahan jquery

2. menghapus Kelas. Pada ". hapus” kelas dengan cara itu kita dapat menghapus bidang input

Saya juga menambahkan div kelas "salin", yang akan ditambahkan setelah kelas "setelah-tambahkan lagi" sehingga Anda juga dapat memodifikasi dengan mudah pada kelas "salin" seperti Anda ingin mengubah teks atau ikon, dll. Ini adalah contoh yang cukup sederhana dan Anda dapat dengan mudah menyesuaikan contoh ini

Anda harus membuat dua file satu untuk menghasilkan kode skrip untuk menambahkan lebih banyak bidang input, dan file kedua untuk mendapatkan nilai nilai bidang dinamis

Jadi, mari buat kedua file, setelah menyelesaikan contoh ini Anda akan menemukan output di bawah ini. Anda dapat memeriksa demo untuk dinamis menambahkan lebih banyak bidang input

Pratinjau

indeks. php

Lihat juga   Laravel - Kotak Pilih Ketergantungan Dinamis menggunakan Contoh JQuery Ajax - Bagian 2

<html lang="en">
<head>
  <title>Bootstrap Jquery Add More Field Example</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

<div >



 <div >
 <div >Bootstrap Jquery Add More Field Example</div>
 <div >

 <form action="action.php" >

 <div >
 <input type="text" name="addmore[]" placeholder="Enter Name Here">
 <div > 
 <button type="button"><i ></i> Add</button>
 </div>
 </div>

 </form>

 <!-- Copy Fields -->
 <div >
 <div style="margin-top:10px">
 <input type="text" name="addmore[]" placeholder="Enter Name Here">



 <div > 
 <button type="button"><i ></i> Remove</button>
 </div>
 </div>
 </div>

 </div>
 </div>
</div>

<script type="text/javascript">

 $(document).ready(function() {

 $(".add-more").click(function(){ 
 var html = $(".copy").html();
 $(".after-add-more").after(html);
 });




 $("body").on("click",".remove",function(){ 
 $(this).parents(".control-group").remove();
 });

 });

</script>

</body>
</html>

tindakan. php

Dalam file PHP ini Anda bisa mendapatkan nilai dari beberapa field input dengan cara ini

Lihat juga. PHP – jquery ajax memotong gambar sebelum mengunggah menggunakan plugin croppie

<?php
print_r($_REQUEST['addmore']);
exit;
?>

Semoga kode dan posting ini akan membantu Anda untuk mengimplementasikan Simple Add menghapus bidang input secara dinamis menggunakan jquery dengan Bootstrap. jika Anda memerlukan bantuan atau umpan balik, berikan di bagian komentar atau Anda memiliki ide bagus tentang posting ini, Anda dapat memberikannya di bagian komentar. Komentar Anda akan membantu kami untuk membantu Anda lebih banyak dan meningkatkan kami. kami akan memberi Anda jenis posting yang lebih menarik di fitur ini juga,