Bazen yazdığım uygulamalarda C# form tarafında yer alan Radio Buton List gibi bir nesne içerisinde yer alan seçeneklerden seçilen değeri alıp işlem yaptırmak gerekebiliyor. Bu sebepten de sizlere JavaScript tarafında en kısa yoldan bu işlemi nasıl yaparız onu yazmaya çalıştım. 🙂 Benim burada anlatacağım yöntem iki türlü olacak hatta örnek kodunu paylaşacağım yöntem demek daha doğru olur. İlki bir butona bağlı olarak ikincisi ise Radio Buton List öğesinin Change olayına bağlı olarak.
Öncelikle ilk yöntemimizle işe başlayalım; Bir tane web form açıp aşağıda yer alan basit radio buton list kodunu ve buton kodunu aynen yapıştırın.
<table width="600px" align="center">
<tr>
<td>
<asp:RadioButtonList ID="rdTestList" runat="server">
<asp:ListItem>Test1</asp:ListItem>
<asp:ListItem>Test2</asp:ListItem>
<asp:ListItem>Test3</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:Button ID="btnSelect" runat="server" Text="Seçili Olanı Getir" OnClientClick="GetSelect();"/></td>
</tr>
</table>
Sonrasında da <head></head> tagleri arasına aşağıda yer alan kodu ekleyin;
<script type="text/javascript">
function GetSelect() {
try{
var sl = document.getElementById('<%=rdTestList.ClientID%>');
var slObject = sl.getElementsByTagName('input');
for (var i = 0; i < slObject.length; i++) {
if (slObject[i].checked == true) {
alert('Seçilen Değer ->' + slObject[i].value);
}
}
} catch (e) {
alert('Hata ->' + e.message);
}
}
</script>
Şimdide ikinci yöntemimize gelelim. Yani Radio Buton List tarafında bir seçme yada seçilme işlemi olduğu zaman seçilen değere göre kodun çalışmasının sağlanması. Bu kısımda yapmamız gereken tek değişiklik Radio Buton List objemiz de. Şimdi aşağıdaki gibi ikinci bir Radio Buton List ekleyelim.
<table width="600px" align="center">
<tr>
<td>
<asp:RadioButtonList ID="rdTestList" runat="server">
<asp:ListItem>Test1</asp:ListItem>
<asp:ListItem>Test2</asp:ListItem>
<asp:ListItem>Test3</asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<asp:Button ID="btnSelect" runat="server" Text="Seçili Olanı Getir" OnClientClick="GetSelect();"/></td>
</tr>
<tr>
<td>
Seçime Göre Sonuç Gösterir.
</td>
<td>
<asp:RadioButtonList ID="rbtList" runat="server" OnClick="GetSelect2();">
<asp:ListItem Value="A">Test1</asp:ListItem>
<asp:ListItem Value="B">Test2</asp:ListItem>
<asp:ListItem Value="C">Test3</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
Ardından mevcut JavaScript kodumuzu da eklediğimiz ikinci objeye göre çoğaltıyorum. Durum aşağıdaki gibi oluyor 🙂
<script type="text/javascript">
function GetSelect() {
try{
var sl = document.getElementById('<%=rdTestList.ClientID%>');
var slObject = sl.getElementsByTagName('input');
for (var i = 0; i < slObject.length; i++) {
if (slObject[i].checked == true) {
alert('Seçilen Değer ->' + slObject[i].value);
}
}
} catch (e) {
alert('Hata ->' + e.message);
}
}
function GetSelect2() {
try {
var sl = document.getElementById('<%=rbtList.ClientID%>');
var slObject = sl.getElementsByTagName('input');
for (var i = 0; i < slObject.length; i++) {
if (slObject[i].checked == true) {
alert('Seçilen Değer ->' + slObject[i].value);
}
}
} catch (e) {
alert('Hata ->' + e.message);
}
}
</script>