JQuery Menambahkan Input Box Secara Dinamis

Pada saat input data, mungkin anda menginginkan tambah input box. Contoh kasus membuat aplikasi kumpulan sertifikat pada pembuatan CV.

1. Include-kan JQuery
2. Buat kode ajax seperti di bawah ini

<script type="text/javascript">
$(function() {
        var scntDiv = $('#kelompokinput');
        var i = $('#kelompokinput p').size() + 1;
       
        $('#addScnt').on('click', function() {
                $('<p><span class="help-inline"><span for="kelompokinputLabel"><input type="text" id="idInput" size="20" name="idInput[' + i +']" value="" placeholder="Input Nomor ' + i + '" /></span> <a href="#" id="HapusInput">Hapus</a></span></p>').appendTo(scntDiv);
                i++;
                return false;
        });
       
        $(document).on('click','#HapusInput' ,function() {
                if( i > 2 ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});
</script>

3. Tambahkan tag HTML untuk proses ajax

<h2><a href="#" id="addScnt">Tambahkan Input Box</a></h2>
<form action="" method="post">

<div id="kelompokinput">
<p>
        <label for="kelompokinputLabel"><input type="text" id="idInput" size="20" name="idInput[0]" value="" placeholder="Input Nomor 1" /></label>
    </p>
</div>
<input type="submit" name="sb" class="btn btn-primary" value="SUBMIT"/>
</form>

4.Tambahkan kode php untuk menampilkan data postingan

<?php
if(isset($_POST['sb']))
{
    $hasil = count($_POST['idInput']) ? $_POST['idInput'] : array();
    $no=0;   
    foreach($hasil as $l)
    {
        $no=$no+1;
        echo "Input nomor ".$no." adalah ".$l."<br>";
    }
}
?>

Tweet