wawan Setiyawan wawan Setiyawan - 2 months ago 20
jQuery Question

Post name with array by clone

I want to post to file crud.php, but it form create by jquery

clone
that produce name with array in array. Please see snippet !



$(document).ready(function() {
addBarang();
});

function addBarang() {
var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone");
$(".target_clone:last").append(new_barang);
}

$('body').on('click', '.btn_kurangi_barang', function() {
$(this).closest('.barang_in_clone').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<div class="hidden_input" style="display: none">
<div class="barang_in">
<label class="col-md-4 control-label">Model : </label><input type='text' name='model[]'>
<br>
<label class="col-md-4 control-label">Kode Hanca : </label>
<input type="checkbox" name="aksesoris[]" value="ziper">Ziper
<input type="checkbox" name="aksesoris[]" value="kancing">Kancing
<input type="checkbox" name="aksesoris[]" value="size">Label Size
<input type="checkbox" name="aksesoris[]" value="kain_keras">Kain Keras
<input type="checkbox" name="aksesoris[]" value="karet">Karet
<input type="checkbox" name="aksesoris[]" value="logo">Label Logo
<br>
<button onclick="addBarang()" type="button">add</button>
<button type="button" class='btn_kurangi_barang'> Remove</button>
</div>
</div>
<div class='target_clone'>
</div>

</body>





and this php file :



<?php
include 'conection.php';

$model = $_POST['model'];
$count_model = count($model);
$acc = implode(',' , $_POST['aksesoris']);

for($i=0; $i < $count_model; $i++){
$qry_insert = $db->query("INSERT INTO product SET model='$model[$i]', aksesoris='$acc[$i]' ");
}


?>





but, the result not i want. the result show same data of
$_POST['aksesoris']


How to solve it ?

Answer

To distinguish your input element data you have to change some part (that are commented):-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <form id = "submit_data" action="<?=$_SERVER['PHP_SELF'];?>" method="post"><!-- add one form so that you can submit -->
        <div class="hidden_input"><!-- remove the style -->
            <div class="barang_in">
                <label class="col-md-4 control-label">Model : </label><input type='text' name='new_model[]'>
                <br>
                <label class="col-md-4 control-label">Kode Hanca : </label>
                <input type="checkbox" name="model[0][]" value="ziper">Ziper
                <input type="checkbox" name="model[0][]" value="kancing">Kancing
                <input type="checkbox" name="model[0][]" value="size">Label Size
                <input type="checkbox" name="model[0][]" value="kain_keras">Kain Keras
                <input type="checkbox" name="model[0][]" value="karet">Karet
                <input type="checkbox" name="model[0][]" value="logo">Label Logo
                <br>
            </div>
        </div>
        <div class='target_clone'>
        </div>
        <button onclick="addBarang()" type="button">add</button><!-- put add button outside of the div -->
        <button type="button" class='btn_kurangi_barang'> Remove</button><!-- put remove button outside of the div -->
        <input type = "submit" value = "Submit">
    </form>
</body>

<script type="text/javascript">
    var i = 1; // add a counter 
// remove body reday clone function call
    function addBarang() {

        var new_barang = $(".hidden_input").find(".barang_in").clone().addClass("barang_in_clone"); // clone the entire div
        new_barang.find('input').each(function () {
            this.name = this.name.replace('[0]', '[' + i + ']'); // change the check box index so that you can distinguish
        });
        $(".target_clone:last").append(new_barang); // appen clone to div
        i++;
    }

    $('body').on('click', '.btn_kurangi_barang', function () {
        $('.barang_in_clone').last().remove();
    });

</script>

<?php
include 'conection.php';
if(isset($_POST) && count($_POST)>0){
     $new_model = $_POST['new_model'];
     $count = count($new_model);
    for($i = 0; $i < $count; $i++){
        echo $new_model[$i] . " - " .  implode(",", $_POST['model'][$i]);
    }
 }
?>

Note:-

1.look for prepared statement to prevent yourself from SQL Injection.