Sipariş oluşturma sırasında dinamik olarak farklı sayılarda input girişi yapmak istiyorsanız, birkaç farklı yöntem kullanabilirsiniz. İşte birkaç öneri:

1. Dinamik Form Alanları Kullanımı:

  • Kullanıcıya bir "input ekle" butonu sunarak, ihtiyacına göre ek input alanları oluşturmasını sağlayabilirsiniz. Bu sayede her sipariş için farklı sayıda input alanı tanımlanabilir.
  • Örneğin, her "Ekle" butonuna tıklayışta yeni bir input alanı oluşturulabilir.

2. Tek Input ile Birden Fazla Değer Girişi:

  • Eğer belirli bir formatta verileri ayırabilirseniz, tek bir input alanı ile birden fazla değer alabilirsiniz.
  • Örneğin, bir metin kutusunda verileri virgülle ayırarak girebilir: Değer1, Değer2, Değer3
  • Bu durumda, backend tarafında bu metni bölerek her bir değeri ayrı input olarak işleyebilirsiniz.

3. Döngü ile Dinamik Input Alma:

  • Backend veya frontend tarafında döngü kullanarak, belirli bir sayıda input almak mümkün olabilir.
  • Kullanıcıdan kaç input gireceğini önceden belirlemesini isteyebilir, ardından bu sayıya göre input alanları oluşturabilirsiniz.

Örnek Bir Senaryo:


Kullanıcının input sayısını belirlemesi için bir dropdown veya input alanı kullanabilirsiniz. Kullanıcı bu sayıyı seçtikten/girdikten sonra, frontend bu sayıya göre o kadar input alanı oluşturur ve bu inputları toplar. Backend tarafında, bu inputların tümünü bir dizi veya liste olarak alabilirsiniz.
html
Kodu kopyala
<!-- Örnek HTML Form -->
<form id="siparisFormu">
<label for="inputCount">Kaç adet input gireceksiniz?</label>
<input type="number" id="inputCount" name="inputCount" min="1" max="10">
<button type="button" onclick="createInputs()">Input Alanları Oluştur</button>

<div id="inputContainer"></div>
<button type="submit">Siparişi Gönder</button>
</form>

<script>
function createInputs() {
const inputCount = document.getElementById('inputCount').value;
const container = document.getElementById('inputContainer');
container.innerHTML = '';
for(let i = 0; i < inputCount; i++) {
const input = document.createElement('input');
input.name = `input${i+1}`;
input.placeholder = `Input ${i+1}`;
container.appendChild(input);
}
}
</script>
Bu yaklaşımlar, sipariş başına farklı sayıda input almanızı sağlar. Kendi senaryonuza ve kullanıcı deneyimine en uygun olanı seçebilirsiniz.
Not: YZ ile oluşturulmuştur.