Show message when start typing inside textbox using javascript - javascript

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;
}

Related

How to access textbox inside grid view of parent page in popup page?

I have a pop up page where I want to get the textbox value which is inside gridview of main page,
and populate value in that textbox.
I have tried:
var Emp = window.opener.document.getElementById('grd_txtEmp');
Emp.rows[1].cells[3].childNodes[0].value="abc";
My popup page:
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table><tr><td>
<asp:TextBox ID="txtEmpy" runat="server" TextMode="MultiLine" ontextchanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
Select
</td></tr></table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%"/>
</asp:TemplateField>
As far as I understood, you are opening the popup, on clicking of some link or button in the grid view row. If this is correct, then while opening the popup, you can pass the textbox id to the popup as a query string. Then you can set the value to the correct text box from the poped up window. To get the id of the textbox in the current row, you can use jQuery
As an example, you can try this idea
Add a css class to the textbox, say, "extdata"
Add a css class to the link/button, say, "popupopener"
Then add the following jQuery
$(document).ready(function () {
$('.popupopener').each(function () {
$(this).click(function () {
//If the textbox is at the same level as the link button
var textBoxId = $(this).closest("table").find('.extdata').attr('id');
window.open("Select.aspx" + "?textboxid=" + textBoxId, "mywindow", 'menubar=1,resizable=1,width=600,height=400, top=200, left=400');
}
);
});
});
Change the layout as below
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtEmpy" CssClass="extdata" runat="server" TextMode="MultiLine" OnTextChanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
<a class="popupopener">Select</a>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%" />
</asp:TemplateField>

Get values from radgrid using jquery

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.

How to pass clientId of a control in Repeater to JavaScript function?

I have a repeater having two columns. In first column i have an image button on click of which i am calling a javascript function.
In the second column i have a label. I want to pass the client id of this label to the javascript function called on click on ImageButton.
<asp:Repeater ID="rptElements" runat="server">
<ItemTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table>
<tr>
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" OnClientClick="return DisplayElementDetails(this);" />
</td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
I figured it out.
I added following code to the javascript function:
function DisplayElementDetails(obj)
{
var name = obj.id.substring(0,(obj.name.length)-7) + "lblElementDetails"
var obj = document.getElementById(name);
obj.style.display = 'none';
return false;
}
and set the style for label control
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" style="display:block" />
Its working now.
This can be done by Jquery. Add CSSclass to button and label for selecting them using CSS selectors
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" CssClass="showButton" /></td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" CssClass="lblElement"/>
</td>
Reference JQuery on aspx page and call function on click event of image button
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".showButton").click(function(){
$(".lblElement").toggle();
});
});
</script>

Get text value of span in repeater by using javascript or jquery

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());

Get Control values of datalist in javascript

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.

Categories