I have a datalist and I am calling javascript on div click added in datalist ..
How can i get control values on click of my div added in datalist
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<div id="metroaqui" class="divsub" runat="server"
onclick="javascript:getvalues(this);">
<table>
<tr class="clstd">
<td>
<b>IP NO:-</b>
</td>
<td colspan="2" style="width: 20%">
<asp:Label runat="server" ID="ipnolable"
Text='<%# Eval("IpNo") %>'></asp:Label>
</td>
<td>
<b>PATIENT NO:-</b>
</td>
<td colspan="2">
<asp:Label runat="server" ID="Label1"
Text='<%# Eval("PatientNo") %>'>
</asp:Label>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</asp:DataList>
To access the control inside the DataList, try to use the following way,
function getVal()
{
var datalist = document.getElementById('<%=DataList1.ClientID%>').childNodes[0];
var tb = datalist.getElementsByTagName("input");
for (var i=0;i<tb.length;i++)
{
//TextBox
if (tb[i].type=="text")
{
alert(tb[i].value);
}
//DropDown
if (tb[i].type=="select")
{
alert(tb[i].options[tb[i].selectedIndex].value);
}
}
}
You can simple use document.getElementById to get the values from your controls.
Note that you id's will change at runtime.
Also remember that label render as span on browser so you will have to check for innerText and innerHtml of your control.
You can take benefit of ClientIDMode="static" for static client id of the server controls. like asp:Label etc.
Related
I am creating multiple-choice questions in ASP.NET Web Forms. I am getting the question and multiple choice options from the database. Is there a simple way to hide the 3rd option (C) when there are only two inputs (True or False)? Thank you in advance!
Here is aspx code:
<tr>
<td class="style7">A.</td>
<td style="text-align: left">
<asp:RadioButton ID="RbA" runat="server" GroupName="gtog"/>
</td>
</tr>
<tr>
<td class="style7">B.</td>
<td style="text-align: left">
<asp:RadioButton ID="RbB" runat="server" GroupName="gtog" />
</td>
</tr>
<tr>
<td class="style7">C.</td>
<td style="text-align: left" >
<asp:RadioButton ID="RbC" runat="server" GroupName="gtog" />
</td>
</tr>
As we have no info as to what is happening on your backend I'll keep this generic.
Add an id and runat="server to the final table row. You can then access that serverside to hide an show the row.
ASPX
<tr id="rowC" runat="server">
<td class="style7">C.</td>
<td style="text-align: left" >
<asp:RadioButton ID="RbC" runat="server" GroupName="gtog" />
</td>
</tr>
C#
if(answerCount == 2)
{
rowC.visible = false;
}
On a side note, you really should avoid using tables for layout. It is now 2020 there are many better ways to layout a form (or anything).
Yes, you can check if the item from the database is of Type bool - if this is true make 3rd Options(C) hidden.
So create a variable that checks the item from the database, if its a Boolean then add hide RbC.
Type b = itemFromDB.GetType();
if(b is bool)
RbC.hidden = true;
I have a usercontrol and there is a radgrid included in it. I need to fetch label GetName's text from the radgrid using jquery.I have to check the label's value for each record. Can someone please help me to do it.Thanks.This is my radgrid.
<telerik:RadGrid ID="Gridview1">
<Columns>
<telerik:GridTemplateColumn UniqueName="tempcolumn">
<HeaderTemplate>
<table>
<tr>
<td>
<asp:Label ID="Header" runat="server" Text="Name"></asp:Label>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Getname" runat="server"></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</telerik:RadGrid>
The code you show there is in your .aspx page, not the generated one.
In HTML result, the aps:label would be something like that :
<span Id="ctl00$blablabla$Getname_random"></span>
So, I would suggest to add a class to your label to use it as selector :
<asp:Label ID="Getname" runat="server" CssClass="getNameClass"></asp:Label>
And then :
$(function () {
//Move in any trigger function (e.g: click)
$('.getNameClass').each(function() {
console.log($(this).text() );
});
});
Hope it helps.
i can't get value of span (or label)
here is my html code
<asp:Repeater ID="rpt_district" runat="server" >
<ItemTemplate>
<tbody id='bodies'>
<tr>
<td>
<span id="district_id"><%# Eval("DISTRICT_ID") %></span>
</td>
<td><%# Eval("DISTRICT_NAME") %></td>
<td>
<asp:Label ID="lb_city_id" runat="server" Text='<%# Eval("CITY_ID") %>'></asp:Label>
</td>
<td style="float:left; margin-left:5px;">
<asp:CheckBox ID="cb_status" runat="server" onclick="javascript: return false;" />
<asp:HiddenField ID="hf_status" Value='<%# Eval("ENABLE") %>' runat="server" />
</td>
<td>
<div style="float:left; margin-left:4px;" >
<asp:ImageButton ID="ib_edit" runat="server" ImageUrl="~/Hinh/icons/Edit.png" ToolTip="Edit" />
</div>
<div style="float:left; margin-left:4px;">
<asp:ImageButton ID="ib_delete" runat="server" ImageUrl="~/Hinh/icons/Trash.png"
ToolTip="Delete" CommandArgument='<%# Eval("DISTRICT_ID") %>'
OnClientClick="getvalue(); return false;"/>
</div>
</td>
</tr>
</tbody>
</ItemTemplate>
</asp:Repeater>
i want to get value of district_id in span tag (or label is ok) by using javascript when clicking on imagebutton
function getvalue() {
var thisspan = $('.district_id').eq(0);
alert(thisspan);
}
but it just get the value in first column be cause of ea(0)
i'm just want to get value by using javascript or jquery not code behind
thanks.....
In HTML, no two elements can have the same ID. Your repeater is creating multiple elements with the same ID. In the JavaScript, you are selecting a class with jQuery instead of an ID. Change it to a class in your html.
You are searching after a class but you have an id
var thisspan = $('#district_id').eq(0);
. is the selector for classes and # is selector for ids. Your html has the id not the class, so your code should be like:
var thisspan = $('#district_id').eq(0);
Also, id's are unique in html so you do not need the .eq(0):
var thisspan = $('#district_id');
Finally, to get the text value inside of the span tah you need to do:
var thisspan = $('#district_id').html();
or
var thisspan = $('#district_id').text();
Add a css class to your image button like this. No two elements in the DOM should have the same ID.
<asp:ImageButton ID="ib_delete" CssClass="imgClass" ..../>
The below will give you the value of the 1st instance of the image button.
console.log($('.imgClass').val());
I'm having trouble validating a drop down asp control on button click. I have a panel that contains radio buttons, textboxes, a drop down, and a save button. If the radio button for zip is chosen a drop down list appears (that is binded with data in the code behind) and you must select a zip from the list. I'm having trouble validating on button click of the save button that a selection was made from the downdown list.
I would like to do it with jQuery and tried doing it like so that pops up and alert but its not working. Like to have it validate the selection before it does on the onClick of the button.
<script type="text/javascript">
$(document).ready(function() {
$('#btn_submit').click(function() {
if ($('#ZIPDD').val() > 0) {
return true;
}
else {
alert('Please select a zip.');
return false;
}
});
});
<asp:UpdatePanel runat="server" ID="UP6" ChildrenAsTriggers="false" UpdateMode="conditional">
<ContentTemplate>
<table style="text-align:center;" cellpadding="5px">
<tr>
<td>
<table runat="server" id="_table" width="100%" cellspacing="10">
<tr>
<td style="width:100px; font-weight:bold; padding-bottom:inherit;" valign="middle">
<div>STEP 1:</div>
<div>Enter a #</div>
</td>
<td align="left" valign="middle" style=" margin-bottom:15px;">
<asp:TextBox runat="server" ID="txt_nbr" Width="70px"/>
<asp:Button ID="Button1" Text="Continue" runat="server" OnClick="Button1_Click"/>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
</td>
<td style="border:2px solid gray; background-color:Silver;">
<table runat="server" id="SHTable" visible="false" width="100%">
<tr align="left">
<th style="font-weight:bold;border-bottom:2px solid black;">Methods</th>
<th style="font-weight:bold;border-bottom:2px solid black;">Location</th>
<th style="font-weight:bold;border-bottom:2px solid black;"> <asp:Label runat="server" ID="DOTEXT"></asp:Label></th>
</tr>
<tr align="left">
<td>
<div style="margin-bottom:10px;"><asp:CheckBox runat="server" ID="ZIP" Text="ZIP" AutoPostBack="true" OnCheckedChanged="ZIP_CheckedChanged" /></div>
</td>
<td style="width:300px;">
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/><br /><asp:Label ID="ziplabel" Visible="false" runat="server" style="color: red; font-size:12px;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width:100px; font-weight:bold; margin-bottom:15px;" valign="middle">
<div>Confirm changes and hit save</div>
</td>
<td align="left" valign="middle">
<asp:Button Text="Save" runat="server" ID="btn_submit" OnClick="btn_submit_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ContentTemplate>
Binding to the dropdown in the code behind on page load
protected void Page_Load(object sender, EventArgs e)
{
if (ZIPDD.Items.Count == 0)
{
Loadzips();
}
}
private void LoadBranches()
{
using (SqlConnection SQLCONN)
{
SQLCONN.Open();
SqlCommand SQLCOMM = SQLCONN.CreateCommand();
SQLCOMM.CommandText = "SELECT * FROM table";
IDataReader dr = SQLCOMM.ExecuteReader();
ZIPDD.DataSource = dr;
ZIPDD.DataValueField = "ZIPID";
ZIPDD.DataTextField = "ZIPLABEL";
ZIPDD.DataBind();
ZIPDD.Items.Insert(0, new ListItem(String.Empty, String.Empty));
ZIPDD.SelectedIndex = 0;
}
}
When you are planning to use javascript/jquery, pay attention to how controls are rendered in the client side. You are setting visible="false" to table and controls, they will never render in the client side. You can't find them using jquery. To work properly, you need to set this:
<table runat="server" id="SHTable" visible="false" width="100%">
to this:
<table runat="server" id="SHTable" style="display:none" width="100%">
and also change this:
<asp:DropDownList runat="server" ID="ZIPDD" Visible="false"/>
to this:
<asp:DropDownList runat="server" ID="ZIPDD" style="display:none"/>
To test your script, set style="display:block" for the table and the dropdown also, otherwise you will see porpup to select a zip (dropdown value is 0).
Good luck!
Why dont you look at using the jQuery.validate plugin. It will validate all form items that have the class "required" attached to it. You could use jQuery and addClass to add the class required to the dropdown if the checkbox is highlighted.
if($('#radio_button').is(':checked')) {
$( ".dropDownClassIdentifier" ).addClass( "required" );
}
else
{
$( ".dropDownClassIdentifier" ).removeClass( "required" );
}
http://jqueryvalidation.org/ and
http://api.jquery.com/addClass/ are good places to start looking for documentation
I'm using ASP.NETand I want to show message behind a textbox when I start to write in it, I want to do that on the client side so I think javascript is the key.
Edit :
My code:
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Alternate Email :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Security Question :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtSecurityQuestion" runat="server"></asp:TextBox>
</td>
</tr>
and the javascript
<script type="text/javascript">
function typetext(tb) {
var mySpanElement = document.getElementById("_txtSecurityQuestion");
mySpanElement.innerText = tb.value;
}
</script>
You could handle the onkeyup event in the textbox
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);">
</asp:TextBox>
which calls the typetext method. In your typetext method, you can set the span (or whatever HTML element) to the text of the textbox.
function typetext(tb)
{
var mytextbox = document.getElementById('<%=_txtSecurityQuestion.ClientID %>');
mytextbox.value = tb.value;
}