Develop Reference

In ASP.NET Web Forms I want to get control inside child Repeater with javascript

I have Parent repeater which contains another child repeater.
For simplicity let's say that the child repeater contains text box and Requiredvalidator.
Simple example of the markup:
<asp:Repeater ID="rpt1" runat="server">
<HeaderTemplate>
....
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl1" runat="server" CssClass=".."></asp:Label>
<div class="..">
<asp:Repeater ID="rpt2" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="...">
<asp:TextBox ID="txt21" runat="server" CssClass="..." MaxLength="7" CssClass="ErrorMessage" ErrorMessage="*" />
<asp:RequiredFieldValidator ID="rfv21" runat="server" CssClass="ErrorMessage" ErrorMessage="*" />
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
I create a method like this to get the second repeater's RequiredField id:
function getId(){
var myId = document.getElementById('<%= rfv21.ClientID %>');
}
but of course it didn't work and there was an exception:
The name control-name Does Not Exist in the Current Context
So how can i do this?
I want to mention that the business need for me is that when the onchange, onkeyup, onkeydown events fires for the txt21 it will get it's equivalent rfv21 and enbale it:
I create this method which fires for onchange, onkeyup, onkeydown events changed:
function txt21_onChange(txtbox) {
var newValue = this.value;
var oldValue = this.oldvalue;
var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
if (newValue != oldValue) {
ValidatorEnable(myRfv2, true);
}
}
and i update txt21 to be:
<asp:TextBox ID="txt21" runat="server" CssClass=".." MaxLength="7" onkeyup="javascript: txt21_onChange(this);this.oldvalue = this.value;" />
but this line want work:
var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
as i explained before.
I think Item.FindControl(..) may help but how can we use it in this case?

You can bind the javascript function call from Repeater Repeater.ItemDataBound event.
Code Bahind
void R1_ItemDataBound(Object Sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
TextBox txt21 = (TextBox)e.Item.FindControl("txt21");
RequiredFieldValidator rfv21 = (RequiredFieldValidator)e.Item.FindControl("rfv21");
txt21.Attributes.Add("onclick", "txt21_onChange('" + txt21.ClientID + "','" + rfv21.ClientID + "'" )
}
}
Javascript
function txt21_onChange(txt21ID, rfv21ID)
{
txt21ID = document.getElementById(txt21ID);
rfv21ID = document.getElementById(rfv21ID);
//The above are TextBox and RequiredFieldValidator objects of row of TextBox that triggered change event.
//You can use these object
}

The problem here is that there going to be many such controls, one per each row of each child repeater. All will have slightly different generated IDs. So instead of querying them by id (impossible), you can use jQuery to quickly find them relatively to the txt that fired an event:
function txt21_onChange(txtbox) {
var rfv2 =
$(textbox) // gives you the jquery object representing the textbox
.closest("div") // the parent div
.find("id*='rfv2'"); // the element you are looking for, id contains rfv2
This answers the immediate question in this thread on how to get hold of the element. But I am not sure it will solve your bigger problem of enabling/disabling validation. You cannot easily do so with server side controls in javascript. Besides, validator is not disabled by default in your code. Although I believe all this is worth a separate question here on SO>

call javascript function on asp dropdown list change

<script type="text/javascript">
function ddl(id) {
// var id = document.getElementById('<%=DDLquestionType.ClientID%>').value;
if (id == "Open") {
AmericanAnswer.style.display = 'none';
document.getElementById('Answer1_Btn').style.visibility = false;
}
alert(id);
}
</script>
<asp:DropDownList ID="DDLquestionType" CssClass="ddlQuestionType box" runat="server" AutoPostBack="True" onchange="ddl(this)" >
<asp:ListItem Text="American" Value="American"></asp:ListItem>
<asp:ListItem Text="Open" Value="Open"></asp:ListItem>
<asp:ListItem Text="Yes/No" Value="YesNo"></asp:ListItem>
<asp:ListItem Text="Numerical" Value="Numerical"></asp:ListItem>
</asp:DropDownList>
I have this java script function:
Which I try to call on drop down list selection change
It doesn't work.
I also tried
onchange="javascript:ddl()" and function without parameters,
ononchange="javascript:ddl(this);",
ononchange="javascript:ddl(this.value);",
and many others.
I'm new to java script, any links with explanations also will be highly appreciated

you dosent need to pass this parameter or id, you just call the function and onchange() event call the function.
in javascript use id of your dropdown list to get the value of dropdown list.
<script type="text/javascript">
function processchange(value)
{
if(ddl.value=="American")
// your code
}
</script>
<dropdownlist id="ddl" onchange="processchange()" >
//enter your dropdown items
</dropdownlist>

When you pass this as a parameter, you pass the DropDownList itself to the Javascript function. Therefore, you don't need to use the id to retrieve the control. You can get the value of the selected item with the value property, and you can access the items with the options array.
<asp:DropDownList runat="server" onchange="processChange(this);" ... >
function processChange(ddl) {
if (ddl.value == 'Open') {
var americanItem = ddl.options[0];
...
}
}
Since you have set AutoPostBack="true" for the DropDownList, some of the changes that you make in your Javascript function may be lost after the postback. You can try with AutoPostBack="false" to see the difference.

Need to identify which textbox is used using javascript

I have four text boxes in 4 different tabs of an ASP.NET Page. I need to provide same validation message to all the text boxes. Presently I am using four different functions with same functionality. Kindly suggest a way to identify which textbox is being used make that a single funtion
Code from Commend:
<asp:TextBox ID="textBox1" runat="server" ValidationonGroup="abcd"></asp:TextBox>
<asp:CustomValidator ID="ID1" runat="server" ValidationGroup="abcd"
ControlToValidate="textBox1" ErrorMessage="message"
ClientValidationFunction="fname"></asp:CustomValidator>
--Javascript Fn--
function fname(sender, args) {
var x = document.getElementById('<%=txtBox1.ClientID%>').value;
if (some condition) {
args.IsValid = false;
} else {
args.IsValid = true;
}
}

Edit
if you are using Asp.Net then you should use like this
Aspx page code
<div>
<asp:TextBox runat="server" ID="txt1" ClientIDMode="Static" onKeyPress="javascript:text_changed(this.id);"></asp:TextBox>
</div>
JS Code
<script type="text/javascript">
function text_changed(event)
{
var id = event;
alert(id);
}
</script>
You got the textbox id in id variable and now u can get value etc using this id you are applying your conditions.... i hope this will help u

JavaScript to Find Index of Selected Dropdown Item, Pass to Hyperlink

I am having some trouble and after quite a bit of research have been unable to find a solution. I am working in SharePoint Designer 2010 and have an ASP.net dropdown populated by a list. I want to get the index value (e.g. 1) of the selected item from the dropdown list and pass it to the URL used to bring up the EditForm.aspx page. See below, and thank you for any help you can provide!
<script type="text/javascript">
function redirect(url) {
var ddl = document.getElementById(&apos;DropDownList1&apos;);
alert("HI!");
var index = ddl.selectedIndex;
var value = ddl.options[index].value;
location.href = url + value;
return false;
}
</script>
<asp:LinkButton runat="server" id="LinkButton1"
href="https://chartiscorp.sp.ex3.secureserver.net/Lists/System_Information/EditForm.aspx?id="
onclientclick="javascript:redirect(this.href)">Edit System Info</asp:LinkButton>
<asp:DropDownList runat="server" id="DropDownList1" DataValueField="Title"
DataTextField="Title" DataSourceID="spdatasource1" />

You should use the rendered ID:
var ddl = document.getElementById('<%=DropDownList1.ClientID%>');
and the OnClientClick event of the LinkButton:
<asp:LinkButton onclientclick="...">
To get the index just use
var index = ddl.selectedIndex;
or if you want to get the value use
var value = ddl.options[ddl.selectedIndex].value;
I would suggest doing the redirect in a function, not the HTML attribute. Bringing all together:
<script type="text/javascript">
function redirect(url) {
var ddl = document.getElementById('<%=DropDownList1.ClientID%>'),
index = ddl.selectedIndex,
value = ddl.options[index].value;
location.href = url + value;
return false;
}
</script>
<asp:LinkButton runat="server" id="LinkButton1"
href="../Lists/System_Information/EditForm.aspx?id="
onclientclick="redirect(this.href)">LinkText</asp:LinkButton>
<asp:DropDownList runat="server" id="DropDownList1" DataValueField="Title"
DataTextField="Title" DataSourceID="spdatasource1" />
This jsfiddle shows a demo of the rendered output.

How to appy one javascript function to multiple textbox onfocus event in asp.net

I have two javascript functions to change background color on enter and leave events.
function ColoronEnter()
{
var txt1 = document.getElementById("<%=txtID1.ClientID%>");
txt1.style.backgroundColor = "red";
}
function ColoronLeave()
{
var txt2 = document.getElementById("<%=txtID1.ClientID%>");
txt2.style.backgroundColor = "";
}
I am calling them as
<asp:TextBox ID="txtID1" runat="server" MaxLength="20" AutoCompleteType="FirstName" onfocus="ColoronEnter()" onblur="ColoronLeave()" ></asp:TextBox>
It is working well. But I want to apply one javascript function to all my textboxes. I have tried something like
function onEnter(_input)
{
var input = _input;
document.getElementById(input).style.backgroundColor ="yellow";
}
function onLeave(_input)
{
var input = _input;
document.getElementById(input).style.backgroundColor ="";
}
trying to call them as
<asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(txtID2)" onblur="onLeave(txtID2)"></asp:TextBox>
<asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(txtID3)" onblur="onLeave(txtID3)"></asp:TextBox>
It is throwing an error as
Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined.
How can I call one function to all my textboxes. Thank in advance.

Use like
<asp:TextBox ID="txtID2" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>
<asp:TextBox ID="txtID3" runat="server" onfocus="onEnter(this)" onblur="onLeave(this)"></asp:TextBox>
function onEnter(_input)
{
_input.style.backgroundColor ="yellow";
}
function onLeave(_input)
{
_input.style.backgroundColor ="";
}
If you don't have any restrictions to use jQuery, use jQuery hover event to handle this.