v2.5.2
Giriş yap

select ve input değerlerini alıp anlık sorgulama

omrumdely
323 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Merhaba sizlere bir konu hakkındadanışmak istiyorum.
Elimde bir depo var sayalım deponun içinde ürünler olsun.bu ürünlerinde stok miktarı var.

1 adet select var bu kısımda depolarım var.
1 adet de inputum var bu alanda ürünlerimin id sini çekiyorum( autocomplete ile verileri çekiyorum.)

burda hem depoyu seçip hemde ürün id girip ,stokta kaç adetürün kalmış anlık olarak ekrana yazılmasını istiyorum.

bu arada ajax,jquery bilgim yok denecek kadar azdır.

Cevap yaz
Cevaplar (1)
cemcanpolat
854 gün önce

Biraz detay vermelisin. Depo derken, ürünler ve ürünlerin stok bilgileri veritabanında mı tutuluyor? Bu bilgiler nereden çekilecek. Backend dili kullandın mı, hangisi?
Kullanıcı depoyu seçip id girdiği anda arka planda veritabanına istek göndermen, stok bilgisini çekmen ve ekrana bastırman gerek, bilmiyorum demişsin ama bunu yapmak içinde bir backend dili js, ajax veya jquery bilmen gerek.

En basit hali ile aşağıdaki gibi bir yapı kurman gerekir. Bir form var ancak stok kontrol butonuna bastığında sayfa yenilenmeden ajax(en basit hali ajax'ın) ile backend scriptıne get methodu ile select'de seçilen ve input'a girilen depo ve ürün id bilgisini iletirsin.
Backend scriptinde, veritabanı sorgusu yaparak veya depo dataların nerede bulunuyorsa gidip alıp bilgiyi dönderir ve ekrana bastırılır.
HTML

<form name="stok-kontrol" action="" method="post">
    <select name="" id="depom">
        <option value="depo1">depo1</option>
        <option value="depo2">depo2</option>
        <option value="depo3">depo3</option>
    </select>
    <input type="text" name="urunId">
    <input type="submit" value="stok kontrol" onclick="stokGetir(event)">
</form>

  <div id="stok"></div>

Javascript

function stokGetir(e) {
    e.preventDefault();
    let form   = document.forms["stok-kontrol"];
    let depo   = form.depom.value;
    let urunId = form.urunId.value;
    let stok   = document.getElementById('stok');
      
    // en basit hali ile ajax
    let xhr = new XMLHttpRequest();
    xhr.onload = () => stok.innerHTML = xhr.responseText;
    xhr.open("GET", `depo=${depo}&urunid=${urunId}`); 
    xhr.send();
}