Search code examples
phpjquerymultidimensional-arraycloneimplode

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 ?

Solution

  • 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.