v2.5.2
Giriş yap

form tasarımını isteğe göre birden fazla kopyalama.

fatihsahin
408 defa görüntülendi
<div id="siparisekleform" class="form-group col-sm-16">

    <div class="col-sm-1"><label for="input-3" class="col-sm-6 col-form-label">1</label></div>

    <div class="col-sm-2">
        <select class="form-control" id="urun_kategori_name" name="urun_kategori_name" required>
            <option value="0">ÜRÜN SEÇİNİZ.</option>
        </select>
    </div>

    <div class="col-sm-3">
        <select class="form-control" id="urun_ad" name="urun_ad" required >
            <option value="0">ÜRÜN SEÇİNİZ.</option>
        </select>
    </div>

    <div class="col-sm-2">
        <input type="text" name="urun_miktar" class="form-control" id="input-25" >
    </div>

</div>

yukarıdaki gibi bir form tasarımım var ve ben tek tek seçim yaptırarak ürün seçimi ve miktarı yazdırıyorum.
Benim amacım kullanıcı ürün ekle diye bir butona bastığında form un aynısından alta bitane daha atsın ve ürün seçsin
yine aynı şekilde bunu silebilsin. clone method u ile yapmaya çalıştım ama bir türlü başarılı olamadım.

Cevap yaz
Cevaplar (2)
fatihsahin
879 gün önce

hocam çok teşekkür ederim aslında yapmak istediğim şey yukarıdaki html form blogunu tamamen kopyalamak. yani ben kategori ve o kategoricde fg
ye göre ürünleri listeledim db den çekerek o tamam. daha sonra seçilen üründen kaç adet isteniyorsa yanına bir input a kullanıcı yazacak. kaç adet ürün isterse o kadar form ekleyerek seçecek sonra topluca db ye yazdıracam. sipariş takip sistemi gibi bişey yapmaya çalışıyorum

ebykdrms
879 gün önce

Çalışan bir örneği incelemek için codepen hesabıma bakabilirsiniz: https://codepen.io/ebykdrms/pen/yLKyLgX
codepen'den silinirse diye burada da kodları paylaşıyorum:

Diyelim ki şöyle bir html yapınız var:

<div id="content">
  <div class="selectbox-wrapper">
    <select name="product[]">
      <option value=0 selected>ÜRÜN SEÇİNİZ</option>
    </select>
    <button>Sil</button>
  </div>
  <div class="button-wrapper">
    <button disabled>+ Yeni Ekle</button>
  </div>
</div>

Örnek olarak şöyle bir yapı kurulabilir:

// Seçilebilecek Ürünlerimiz
const products = [
  { id: 1, name: "Ürün 1" },
  { id: 2, name: "Ürün 2" },
  { id: 3, name: "Ürün 3" },
  { id: 4, name: "Ürün 4" }
];

// Seçilmiş ürünlerimizi tutacak bir dizi.
const selectedProducts = [];

/**************************************/

// DOM'dan kullanacağımız elementleri (başlangıçta hazır olanları) değişkenlere alıyoruz:
const $content = $("#content");
const $addNewProductButton = $content.find(".button-wrapper button").prop("disabled",true);

/**************************************/

// Bir selectbox'a istediğimiz ürünleri append edebildiğimiz fonksiyon:
function addProductsToSelectBox($selectbox, products) {
  for(let i=0; i < products.length; i++) {
    $selectbox.append('<option value="'+products[i].id+'">'+products[i].name+'</option>');
  }
}

// Yeni select elementi ekleyen fonksiyon:
function addNewProductSelectBox($willCloneSelectBox) {
  
  // Parametrelerden gelen elementi clone ediyoruz.
  const $newProductSelectBox = $willCloneSelectBox.clone();
  
  // Butonun üstüne bu klonu ekliyoruz.
  $addNewProductButton.parent().before($newProductSelectBox.hide());
  
  // Select elementinin bir fade efektiyle görünmesini sağlıyoruz.
  $newProductSelectBox.fadeIn(300);
  
  // Yeni bir select elementi geldiyse henüz seçim yapılmamıştır.
  // Seçim yapılmamış bir select elementi varsa buton pasif olmalı.
  $addNewProductButton.prop("disabled",true);
}

// Select elementinin yanındaki "Sil" butonuna tıklandığında...
$content.on("click",".selectbox-wrapper button", function(){
  
  // Butonun kapsayan selectbox-wrapper elementini seçelim.
  const $wrapper = $(this).closest(".selectbox-wrapper");
  
  // Eğer bu tıklanan ilk selectbox ise (normalde olmamalı ama) silme fonksiyonu çalışmayacak.
  if($wrapper.index()==0) return;
  
  // Elementi direkt siliyoruz:
  $wrapper.remove();
})

/**************************************/

// Başlangıçta elimizde olan ilk select elementine ürünleri ekliyoruz:
addProductsToSelectBox($content.find(".selectbox-wrapper > select"), products);

// "+ Yeni Ekle" butonuna tıklandığında...
$addNewProductButton.on("click",function(){
  // Son eklenmiş olan .selectbox-wrapper klonlanarak yeni bir .selectbox-wrapper oluşturulacak:
  addNewProductSelectBox($content.find(".selectbox-wrapper").last());
});

// Herhangi bir select elementinden seçim yapıldığında...
$content.on("change",".selectbox-wrapper select", function(){
  
  // Değişim yaşanan select elementinin bize lazım verilerini alalım:
  const selectboxIndex = $(this).parent().index();
  const selectedValue = $(this).val();
  const selectedText = $(this).find("option:selected").text();
  
  // Eğer seçilen değer 0 ise (normalde olmamalı ama)  
  if(selectedValue=='0') { 
    
    // Boş bir select elementi olduğu için "+ Yeni Ekle" butonu pasif olacak.
    $addNewProductButton.prop("disabled",true);
    
    // selectedProducts dizindeki ilgili index'i boşaltıyoruz.    
    selectedProducts[selectboxIndex] = null;
    
    // Fonksiyonun işi burada bitmiş olacağı için fonksiyonu sonlandırıyoruz.
    return; 
  }
  
  // selectedProducts dizisinin ilgili index'ine seçilen ürünü ekliyoruz.
  selectedProducts[selectboxIndex] = { id: selectedValue,  name: selectedText };
  
  // selectedProducts dizisini kontrol edip, herhangi bir boş seçim var mı diye bakacağız.
  for(let i=0; i<selectedProducts.length; i++) {
        
    // Eğer seçim yapılmamış bir selectbox varsa buton pasif olmalı.
    if(!selectedProducts[i]) {
      $addNewProductButton.prop("disabled",true);
      
      // Fonksiyonun işi burada bittiği için return ile fonksiyonu sonlandırıyoruz.
      return;
    }
    
    // Fonksiyon bu satıra kadar gelebilmişse her şey yolundadır. Butonu aktif edebiliriz.
    $addNewProductButton.prop("disabled",false);
  }
});

Buradaki selectedProduct dizisine muhtemelen sizin ihtiyacınız yoktur.
Ben yazmayı özlemişim, yazdıkça yazdım... Kurgusal olarak kendinize bir örnek çıkarabilirsiniz umarım.