Js value sorunu
Selam arkadaşlar, aşağıdaki linkte input değeri boş olduğunda butonu pasif hale getiriyorum. eğer value'su 0dan büyükse buton aktif olsun istiyorum.
ilk açılışta problem olmuyor ama input değerini doldurduğum zaman buton aktif hale gelmiyor. hatayı nerde yapıyorum? teşekkürler şimdiden.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
Bu durumda herhangi bir input'un input olayı tetiklendiğinde tüm input'ları kontrol etmelisiniz.
Kodunuzda şu değişikliği yapabilirsiniz:
$inputRequired.on("input", function() {
let buttonWillBeActive = true; // kontrolümüzden sonra bu değer halen true kalırsa butonu aktif edeceğiz.
for(i=0; i<$inputRequired.length; i++) { // tüm input'ları tek tek dolaşıp değerlerini kontrol edelim.
const val = $inputRequired.eq(i).val().trim(); // şu an baktığımız input'un değerini alalım.
if(!val) { buttonWillBeActive = false; break; } // değer boşsa buttonWillBeActive değerini false edip döngüden çıkalım.
}
if(buttonWillBeActive) buttonActived(); // buttonWillBeActive değeri kontrolden sonra halen true kalabilmişse buton aktif olacak.
else buttonDisabled(); // buttonWillBeActive değeri kontrol sırasında false edilmişse buton pasif olacak.
});
https://jsfiddle.net/no2mzkuy/?fbclid=IwAR3d2n94AzeGxsWA-0G0xL6hpKI3iSA_OvUcc6pdtqlBxI0NHbNr9UJ86UM
Önerilerinizi yaparak ilerledim çalıştı aslında ama şöyle bir sorun var. 3 tane input alanım var ve bu inputların classında .inputRequired classı var ben istiyorum ki eğer input içerisinde bu class varsa button disabled olsun. Bunu nasıl yapabilirim? sadece 1 inputu doldurduğumda çalışıyor.
var value;
$(".inputRequired").change(function(){
value = $(this).val();
if(value.length > 0) {
$("#genelBilgiler").css({'opacity' : '1', 'pointer-events' : 'initial' });
}
else {
$("#genelBilgiler").css({'opacity' : '.7', 'pointer-events' : 'disable' });
}
})
$("#genelBilgiler").css({'opacity' : '.7', 'pointer-events' : 'disable' });
JSFiddle üzerindeki kodunuzun çalışmamasının nedeni, input'a veri girişi yapıldığını dinleyen bir olay oluşturmamış olmanız.
Siz sadece sayfa ilk oluşturulduğu andaki değeri alıyor, ona göre işlem yapıyorsunuz. Sonraki değişimleri dinlemiyorsunuz.
Şu düzenleme işe yarayacaktır:
$button_genelBilgiler = $("#genelBilgiler");
$input_adSoyad = $("[name=adSoyad]");
$input_adSoyad.on("input", function() {
const val = $(this).val();
if(val.trim()) $input_adSoyad.css({'opacity' : '1', 'pointer-events' : 'initial' });
else $input_adSoyad.css({'opacity' : '.7', 'pointer-events' : 'none' });
});