How to access radiobutton list value through Javascript? - javascript

I am using an ASP.NET RadioButton List which is bind with ObjectDatasource as given in following
Sample code:
<asp:RadioButtonList runat="server" ID="rdabcType" DataSourceID="roleSource" DataTextField="ABCName" DataValueField="ABCID" RepeatDirection="Horizontal">
</asp:RadioButtonList>
<asp:ObjectDataSource ID="abcSource" SelectMethod="GetABCType" runat="server">
<asp:ObjectDataSource/>
I want to access "value" of radio button list in Javascript. Can anyone suggest how to do that.

I believe you can iterate through the collection and look for selected
var radioObj = document.getElementById("rdabcType");
for(radioItem in radioObj){
if(radioObj[radioItem].selected == true){
//TODO: Implement
var radioValue = radioObj[radioItem].value;
}
}

The easiest way to iterate correctly through all the items is:
var types= document.getElementsByName("<%=rdabcType.UniqueID%>");
for (var j = 0; j < types.length; j++) {
var whatYouWant = types[j].value;
}

Related

Getting the value out of a dynamic asp:DropDownList

Basically, I have a drop down list with a ID and runat="server" tag and is inside a asp:TableCell. The original DDL has no options, but through javascript, I am populating the dropdown with some options that update my table on the front end. On button click, through my vb.net code, I need to retrieve the text inside the ddl. Any suggestions of how to do this would be nice. Thank you in advance, and if you need any more information from me please let me know.
P.S. I am not able to use ajax with this project.
[HTML] - Just showing the tablecell and ddl
<asp:TableCell ID="ocProduct">
<asp:DropDownList ID="myDropDown" CssClass="ocProduct"
OnChange="indexChanged(this);" runat="server">
</asp:DropDownList>
</asp:TableCell>
[VB.net]
Protected Sub updateWeight_Click(Sender As Object, e As EventArgs)
msgbox(myDropDown.text) ' does not work
msgbox(mytable.rows(1).cells(0).text) ' does not work
msgbox(myTable.rows(1).cells(0).controls(0).toString) ' does not work
msgbox(myDrowDown.selectedValue) ' does not work
' All of these are returning ""
end sub
[JavaScript] - This is just showing how I load the ddl
var ddl = document.getElementById('myDropDown');
var tempOption = document.createElement('option');
tempOption.text = "Please select an option..."
tempOption.value = 0;
ddl.options.add(tempOption);
for (var i = 1; i <= counter; i++) {
var option = document.createElement('option');
var tempArray = parsePerHash(i);
option.text = tempArray[0];
option.value = i;
ddl.options.add(option);
}
};
You have to use the specific properties of that control.
Try using "msgbox(myDropDown.SelectedValue)". You can see the list of properties here: https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.dropdownlist_properties(v=vs.110).aspx

HiddenField aspx from TableRow

I have the following setup currently:
<tr class="NoBackgroundTR">
<asp:HiddenField runat="server" Value='<%# Eval("Adresse").ToString() %>' ></asp:HiddenField></td>
</tr>
This would be pretty much be the code I would want to write:
function setBGColor()
{
var table = document.getElementById("AlleAnzeigenTable");
for (var i = 0, row; row = table.rows[i]; i++) {
// here I would like to get the HiddenField inside of my TableRow
if(row.HiddenField.value != 'someValue')
row.style.backgroundColor = '#F79A03';
}
}
How would I access the Hiddenfield inside of my TableRow?
With jQuery, you can access it like this:
var myHiddenField = $(row).find('input[type="hidden"]');
var value = myHiddenField.val();
If you have hidden field as very first control you can use below code.
But i would recommend to use an ID or ClassName in order to access the HiddenFeild inside row.
var table = document.getElementById("AlleAnzeigenTable");
for (var i = 0, row; row = table.rows[i]; i++) {
var value = row.getElementsByTagName("input")[0].value;
}

How to get value from dynamic control in gridview using javascript

I have one dynamic gridview contains one textbox.when user lost focus from the textbox, i want to get the value using javascript.for that i am using onblur() event in the textbox.but i'm not able to get the value .please find the code below
function validateintforDWOnblur(input) {
var row = input.parentNode.parentNode;
var rowindex = row.rowIndex;
var totaldw = document.getElementById('<%=gdvaddmsrcrt.ClientID%>').rows[rowindex].cells[2].innerHTML;
var totaldw1 = document.getElementById(totaldw.id).value;
var dw = document.getElementById('<%=gdvaddmsrcrt.ClientID%>').rows[rowindex].cells[3].innerHTML;
return true;
}
textbox inside the gridview
<asp:TextBox ID="txtdiswei" runat="server" onblur="javascript:return validateintforDWOnblur(this)" Width="100px" Text='<%# Bind("DW") %>' Height="40" CssClass="form-control"></asp:TextBox>
Please help me to sort this out.
I'm not sure that it is what you want but why don't you try
var value = document.getElementById('<%=yourTextBox.ClientID%>').value;
so for your table you can pass the ClietnId property from eachRow and use it in the javascript function
function doSomething(idOfTheTextBox){
var value = document.getElementById(idOfTheTextBox).value;
}
in html
onblur="doSomething('<%# this.ClientID %>')
if you build server side your rows you can do the following
TextBox txt = new TextBox();
txt.ID = "something1";
txt.Text = "text";
txt.Attributes.Add("onBlur","doSomething('" & txt.ClientID & "')");
CellOfTheGrid.Controls.Add(txt);

jQuery input selection - adding up totals inside a repeater

have two textboxes defined like so, which are inside a repeater:
<asp:TextBox ID="txtHours" runat="server" CssClass="text misch" Width="50px" Text='<%# Eval("laborHours") %>'/>
<asp:TextBox ID="txtCosts" runat="server" CssClass="text misc" Width="50px" Text='<%# Eval("totalCosts") %>'/>
i also have two boxes where i want to put totals:
<asp:TextBox ID="txtMiscH" runat="server" CssClass="text hours" Width="200px" />
<asp:TextBox ID="txtMisc" runat="server" CssClass="text add" Width="200px" />
when the value in the repeater changes, i want to add them up and put in the appropriate total boxes.
this is where i am now:
//add up miscaleneous mnumbers
//dollar amoungs
$("input[class~='misc']").change(function (event) {
var sum = 0;
var num = 0;
$("input[class~='misc']").each(function (event) {
num = parseInt($(this).val()) || 0;
sum = sum + num;
});
$("input[id*='txtMisc']").val(sum);
$("input[class~='add']").trigger('change');
});
//hours
$("input[class~='misch']").change(function (event) {
var sum = 0;
var num = 0;
$("input[class~='misch']").each(function (event) {
num = parseInt($(this).val()) || 0;
sum = sum + num;
});
$("input[id*='txtMiscH']").val(sum);
});
but it does not look like the first option works at all.
also i saw that there are different ways to select input
input[class~ or input[class* or input[class^
am i using the wrong one?
i guess because misc is also part of misch, it does the calculations for hours, even when i only update the misc costs box. please hep. would renaming class type be the easiest way to fix this?
http://jsfiddle.net/SKYDr/
Rather than using $("input[class~='misc']") you can use selectors which indicates the dom element directly such as below
$("input.misc")
$("input.misc[type=text]")
$("input.misc:text")
Same could be done for input[id*='txtMiscH'] e.g.
$("input#txtMiscH")
$("input#txtMiscH[type=text]")
$("input#txtMiscH:text")
Hope this will help !!

How can I assign one value to column by js in RadGrid

I have Radgrid with all rows always in edit mode. I want following functionality in one of the columns: after item is edited, all rows in this colum take this value. Here is how my column looks like.
<telerik:GridTemplateColumn HeaderText="Opis" HeaderStyle-Width="125px" ItemStyle-Width="120px"
UniqueName="poz_nazwa">
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "poz_nazwa")%>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadTextBox runat="server" ID="Rtopis" DataTextField="poz_nazwa" DataValueField="poz_nazwa"
Width="120px" Text='<%#Bind("poz_nazwa") %>' onfocus="javascript:podp(this.id);"
AutoCompleteType="Disabled" onpropertychange="Opisblur()">
</telerik:RadTextBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
And here is what i tried and is not working:
function OpisBlur() {
if (event.propertyName == 'value') {
var grid = $find("<%=RadGPozycje.ClientID %>");
var masterTableView = grid.get_masterTableView();
var iloop;
if (masterTableView != null) {
var gridItems = masterTableView.get_dataItems();
var i;
for (i = 0; i < gridItems.length; ++i) {
var gridItem = gridItems[1];
var cell = gridItem.get_cell("poz_nazwa");
var controlsArray = cell.getElementsByTagName('input');
if (controlsArray.length > 0) {
var rdo = controlsArray[0];
rdo.value = "valueofchangeditem";
}
}
}
}
}
There are two most obvious problems with my approach:
I change only selected item, not all. When i try to use masterTableView.get_editItems() IE says that there is no such method.
This code produce stack overflow since function occurs on propertychange, and inside of it i change property.
Can you help me find solution to implement desired functionality?
In your ItemTemplate for the column, can you put a label or something that has a className? Then wouldn't you be able to update everything on the page that has that class with the new value?
$('.poz_nazwaClass').val("valueofchangeditem");
If you don't use jQuery, adding a tag then, element.getElementsByTagName('poz_nazwaTag') then loop through the elements I think.

Categories

Resources