Jquery ile Form İşlemleri
Jquerynin bize sağlıcağı en büyük kazanç şüpesiz farklı browserlar için tek kod kullanmak.
Aşağıdaki gibi formumuz olsun:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
Yukardaki gibi bir yapı için:
$('select.foo option:selected').val(); // selectlerden class adı foo olanın seçilen değerlerini alır
$('select.foo').val(); // selectlerden class adı foo olanın degerini alır
$('input:checkbox:checked').val(); // checkboxlardan çekli olanın değerini alır
$('input:radio[name=bar]:checked').val(); // radio dügmelerinden name değeri bar olan ve seçili olanın değerinini alır
$('select.foo').val(); // selectlerden class adı foo olanın degerini alır
$('input:checkbox:checked').val(); // checkboxlardan çekli olanın değerini alır
$('input:radio[name=bar]:checked').val(); // radio dügmelerinden name değeri bar olan ve seçili olanın değerinini alır
$('[name=bar] option:selected').val(); // selectlerden name değeri bar olan ve seçili olanın değerinini alır
Aşağıdaki psikopat örneği inceleyebilirsiniz:
<select id="single">
<option>Singleoption>
<option>Single2option>
select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multipleoption>
<option>Multiple2option>
<option selected="selected">Multiple3option>
select>
<script>
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("Single: " +
singleValues +
" Multiple: " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
script>
<option>Singleoption>
<option>Single2option>
select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multipleoption>
<option>Multiple2option>
<option selected="selected">Multiple3option>
select>
<script>
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html("Single: " +
singleValues +
" Multiple: " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
script>
Radyo düğmelerinden herhangi birinin seçili olup olmadığını bulmak için:
<script type="text/javascript">
<!--
function Kontrol(){
if($('input[name=cek_turu]:checked').val()>0){
$('#cek_defteri').submit();
}
else alert("Lütfen Çek Türünü seçiniz");
}
//-->
</script>
<form name="ucret" method="post" id="cek_defteri">
<input type="radio" name="cek_turu" value="1" style="vertical-align: bottom"> Alınan
<input type="radio" name="cek_turu" value="2" style="vertical-align: bottom"> Verilen
<input type="button" class="button buton1" value="Kaydet" onclick="Kontrol()" />
</form>
<!--
function Kontrol(){
if($('input[name=cek_turu]:checked').val()>0){
$('#cek_defteri').submit();
}
else alert("Lütfen Çek Türünü seçiniz");
}
//-->
</script>
<form name="ucret" method="post" id="cek_defteri">
<input type="radio" name="cek_turu" value="1" style="vertical-align: bottom"> Alınan
<input type="radio" name="cek_turu" value="2" style="vertical-align: bottom"> Verilen
<input type="button" class="button buton1" value="Kaydet" onclick="Kontrol()" />
</form>
Tüm inputları kullanılamaz yapıp, tekrar düzeltmek için:
if($('input[name=cek_turu]').is(":disabled")) { //Form elemanlarından biri kullanılamaz mı?
$("#cek_defteri :input").removeAttr("disabled"); //Tüm form elemanlarından disable özelliğini kaldır
}
else {
$("#cek_defteri :input").attr("disabled", true); //Tüm form elemanlarını kullanılamaz yap
}
$("#cek_defteri :input").removeAttr("disabled"); //Tüm form elemanlarından disable özelliğini kaldır
}
else {
$("#cek_defteri :input").attr("disabled", true); //Tüm form elemanlarını kullanılamaz yap
}
Formu yollak için:
$('[name=UyeGirisi]').submit();
<form name="UyeGirisi" method="post">
</form>
<form name="UyeGirisi" method="post">
</form>
Radiolardan Herhangi Biri Seçilimi Anlamak İçin
$("input[name='gonderim']").is(':checked')
Dizi yapısındaki form elemanına erişmek için:
Dizi yapısı
<input type="hidden" name="times[]" value="" />
<input type="hidden" name="times[]" value="" />
<input type="hidden" name="times[]" value="" />
<input type="hidden" name="times[]" value="" />
<input type="hidden" name="times[]" value="" />
$('input[name="times[]"]').each(function(){
alert($(this).val();
});
alert($(this).val();
});
Formu Resetlemek İçin:
$('[name=parcalar]')[0].reset()
Tüm Form Değişkenlerini Almak İçin:
$('form[name=urun_videolari]').serialize()
Checkbox checkli mi kontrolü için
if (!$("input[name=sozlesme]").prop('checked'))
Tüm Checkboxları seçili hale getirmek için:
$('input:checkbox').prop('checked', true);
Select Optionslarını Silmek ve Eklemek
var Taksit = [
[[0, 'Tek Çekim'], ['2', '2 Taksit']],
[[0, 'Tek Çekim']],
[[0, 'Tek Çekim']]
];
Pos = $('select#pos_turu option:selected').index();
$('select#taksit').children().remove(); //tum optionlari sil
for (i in Taksit[Pos]) {
$('select#taksit').append('<option id="' + Taksit[Pos][i][0] + '">' + Taksit[Pos][i][1] + '</option>');
}
[[0, 'Tek Çekim'], ['2', '2 Taksit']],
[[0, 'Tek Çekim']],
[[0, 'Tek Çekim']]
];
Pos = $('select#pos_turu option:selected').index();
$('select#taksit').children().remove(); //tum optionlari sil
for (i in Taksit[Pos]) {
$('select#taksit').append('<option id="' + Taksit[Pos][i][0] + '">' + Taksit[Pos][i][1] + '</option>');
}
Bir Php Kodundan Dönen JSON Veriyi Optiona Eklemek
Php kod kısmı:
$Ilceler = $FN->Myq("SELECT * FROM ilceler WHERE il_id='$ilno''");
unset($IlceDizi);
while ($Ilc = $Ilceler->fetch_object()) {
$IlceDizi[] = array(
'val' => $Ilc->id,
'text' => $Ilc->adi
);
}
echo json_encode($IlceDizi);
unset($IlceDizi);
while ($Ilc = $Ilceler->fetch_object()) {
$IlceDizi[] = array(
'val' => $Ilc->id,
'text' => $Ilc->adi
);
}
echo json_encode($IlceDizi);
JavaScript kısmı:
$.ajax({
type: "GET",
url: '/IlIlceMahalleAj.php',
data: {ilno: IlNo},
dataType: "json",
cache: false,
complete: function (response) {
var DonenDegerler = JSON.parse(response.responseText);
Hedef = 'select[name=ilce]';
$(Hedef).children().remove(); //tum optionlari sil
$.each(DonenDegerler, function(key, value) {
$(Hedef).append(new Option(value['text'], value['val']));
});
/*for (i in DonenDegerler) {
//$(Hedef).append('<option value="' + DonenDegerler[i]['val'] + '">' + DonenDegerler[i]['text'] + '</option>');
$(Hedef).append(new Option(DonenDegerler[i]['text'], DonenDegerler[i]['val']));
}*/
}
}).done(function() {
});
type: "GET",
url: '/IlIlceMahalleAj.php',
data: {ilno: IlNo},
dataType: "json",
cache: false,
complete: function (response) {
var DonenDegerler = JSON.parse(response.responseText);
Hedef = 'select[name=ilce]';
$(Hedef).children().remove(); //tum optionlari sil
$.each(DonenDegerler, function(key, value) {
$(Hedef).append(new Option(value['text'], value['val']));
});
/*for (i in DonenDegerler) {
//$(Hedef).append('<option value="' + DonenDegerler[i]['val'] + '">' + DonenDegerler[i]['text'] + '</option>');
$(Hedef).append(new Option(DonenDegerler[i]['text'], DonenDegerler[i]['val']));
}*/
}
}).done(function() {
});
Yorumunuzu Ekleyin
