Jquery ile input kontrolü nasıl yapılır iki örnek ile anlatacağım.İlk örneğimizde iki input’tan biri dolu ise diğeri otomatik kapalı olacak. Bu işlemde readonly kullanımını göreceğiz
Aşağıdaki kodlar ‘html + js + css’ birlikte verilmiştir. Kodları kopyalayıp “.html” olarak kaydederek canlı çalıştırabilirsiniz.
<html>
<head>
<title>İnput duruma göre disable etme (readonly kullanımı)</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
.readonly {
background-color:#d0d0d0;
}
</style>
</head>
<body>
<p><b>HANGİ İNPUT DOLUYSA DİĞERİ KAPANACAKTIR</b></p><br>
<label for="">T.C. NO: </label>
<input type="text" class="birinci" value="" placeholder="Giriniz">
<label for="">YAB. KİMLİK NO: </label>
<input type="text" class="ikinci" value="" placeholder="Giriniz">
<br><br>
<script type="text/javascript">
$(".birinci").change(function() {
var obj=$(this);
if(obj.val() !=="") {
$(".ikinci").attr("readonly","true").addClass("readonly");
$(".birinci").removeAttr("readonly").removeClass("readonly");
}
else{
$(".ikinci").removeAttr("readonly").removeClass("readonly");
}
});
$(".ikinci").change(function() {
var obj=$(this);
if(obj.val() !=="") {
$(".birinci").attr("readonly","true").addClass("readonly");
$(".ikinci").removeAttr("readonly").removeClass("readonly");
}
else{
$(".birinci").removeAttr("readonly").removeClass("readonly");
}
});
</script>
</body>
</html>
Diğer örneğimiz ise input’un length özelliğine göre işlem yapabilme olacak.
Yukarıdaki fotoğraftaki örneğin kaynak kodları html + js aşağıda birlikte verilmiştir.Kodları “.html” olarak kaydederek canlı deneyebilirsiniz.
<html>
<head>
<title>İnput Length Kontrolü</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
</style>
</head>
<body>
<p><b>İNPUT 11 HANE KONTROLÜ</b></p><br>
<label for="">T.C NO</label>
<input type="text" class="birinci" value="" placeholder="Giriniz">
<button id="giris">BAS</button>
<br><br>
<script type="text/javascript">
$("#giris").on("click", function() {
if ($(".birinci").val().length <= 10) {
alert("11 Hane'den Az olamaz");
}
else if($(".birinci").val().length == 11) {
alert("11 Hane");
}
else if($(".birinci").val().length > 11) {
alert("11 Hane'den Fazla olamaz");
}
});
</script>
</body>
</html>
Daha Fazlasını Görüntüleyin!
