select ve input değerlerini alıp anlık sorgulama
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.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
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();
}