Develop Reference

How to call javascript function from asp:textbox?

I am using textbox for searching items from data base and loading them in gridview and
i used custom paging on gridview to show only 25 records per page
and i found java script for searching records on client side as
script>
function filter2(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
and calling this as:
<input name="txtTerm" onkeyup="filter2(this, '<%=GridView1.ClientID %>')" placeholder="Search" type="text"/>
this function search record from activated page and obviously searching from whole database will be done on server side and i used asp textbox
but i need onkeyup="filter2(this, '<%=GridView1.ClientID %>')"event in my asp textbox e-g
<asp:TextBox ID="txtSearch" onkeyup="filter2(this, '<%=GridView1.ClientID %>')" placeholder="Search" runat="server" AutoPostBack="True" OnTextChanged="txtSearch_TextChanged" />
but asp didn't allow me to do that..
i need your help to achieve this.
thanks in advance.
EDIT:
I need both searching (client side, server side) in single textbox
because
client side allow searching from loaded page of gridview and
server side allow searching from database on clicking

You could add the client attribute of rendered input control via code behind:
protected void Page_Load(object sender, EventArgs e)
{
txtSearch.Attributes.Add("onkeyup", string.Format("filter2(this,'{0}')",GridView1.ClientID)");
}
EDIT:
After the right comment of #Lukas, we should say that the main problem was the use of <%=GridView1.ClientID %> inline expression inside the textbox webcontrol:
<%= %> will write the string directly to the response-stream, which happens after the server control is constructed, so will be rendered as string and not resolved.
For example:
<asp:Label runat="server" ID="label">test</asp:Label>
<asp:TextBox runat="server" ID="txt" Text="<%# label.ID %>" onkeyup="alert('<%: label.ID %>')"></asp:TextBox>
This is what we have in output:

Getting the Value of Checked Checbox returns undefined in JavaScript/ASP.NET VB

I have a Checkbox which has 10 items inside GridView:
<ItemTemplate>
<asp:CheckBox ID="chkGrid" name = "sample1" class = "messageCheckbox" runat="server" onclick="javascript:SelectCheckedItem(this)" Text = '<%# Bind("status_desc") %>' />
</ItemTemplate>
What I want is to get the values of the CheckBox inside the GridView. I am getting the values if I used VB. What I want is getting it via JavaScript. Here is my code for the JavaScript:
function SelectCheckedItem(itemchk) {
debugger
var gvcheck = document.getElementById('gvDetails'); //This is the ID of the GridView
if (itemchk.checked) {
var checkedValue = $('messageCheckbox:checked').val();
alert(checkedValue);
}
else {
}
}
}
But I am getting undefined value.
Please help. Thank you.

<asp:CheckBox ID="chkGrid" Text="Status" runat="server" />
Will be rendered something like the following (notice the id change because of runat="server")
<input type="checkbox" id="chkGrid_ctl01" />
<label for="chkGrid_ctl01">Status</label>
So to get the text in the label for each checkbox you will need to loop through the checkboxes and find the adjacent label.
To get the label for just the clicked checkbox, you can do something like
function SelectCheckedItem(itemchk) {
if (itemchk.checked) {
var checkedValue = $(itemchk)
.siblings('label[for="' + itemchk.id '"]')
.text();
console.log(checkedValue);
}
}
But to get all the labels, you will have to loop through each checkbox with class .messageCheckbox
function SelectCheckedItem() {
$('.messageCheckbox:checked').each(function () {
console.log($(this).siblings('label[for="' + itemchk.id '"]').text());
});
}

The ID of the GridView most likely isn't gvDetails as .NET adds a whole extra string into your IDs. You need to look into using gvDetails.ClientID on your server side
var gvcheck = document.getElementById(<% gvDetails.ClientID %>); // This is the generated ID of the GridView

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.

Store javascript return value of a function to the respective Asp Control OnClick event at server side

<asp:Button ID="Button1" runat="server" Text="Lunch" CausesValidation="false"
CssClass="bigbuttons"
style="background:url(../App_Themes/Images/green-box.gif)"
Font-Bold="True" ForeColor="White" Font-Size="Large"
OnClientClick="openmodalWin(); return false;" />
<br />
javascript
function openmodalWin() {
var CloseTImeOfPopUp = window.showModalDialog("ClockPopUP.aspx", "Clock",
"dialogWidth:550px;dialogHeight:350px,");
}
As you can see, I'm calling the javascript function "openmodalWin" on the ButtonClick event. I checked that the function is returning CloseTimeofPopUp sucessfully and I am able to display it via an Alert().
[Moderator Edit: I want the returned value of that function to be sent to the server so that I can store it in the database?]
I want the return value from the javascript function, i can store on the same server side code i.e. Button1_OnClick() event and then i can store it to database.
Please tell me how i can do this ?

You can set the value of CloseTimeOfPopUp in a hidden variable (defined with runat="server") and then you can access that in the code behind.
In aspx page you can do:
<input type="hidden" runat="server" id="hidden1" />
In javascript
function openmodalWin() {
var CloseTImeOfPopUp = window.showModalDialog("ClockPopUP.aspx", "Clock", "dialogWidth:550px;dialogHeight:350px,");
document.getElementById('hidden1').value = CloseTImeOfPopUp;
}
In code behind in C#
var myVal = hidden1.Value;

in addition to Habib.OSU
in the page you are opening with showModalDialog
you should return the value like this...
javascript in the Modal Dialog Page:
function ReturnVal(valToReturn) {
window.returnValue = valToReturn;
window.close();
}

How to pass javascript var to server side on asp.net

I'm trying to pass a textarea value to the server side. The textarea cant be runat=server though.
heres my code:
<script type="text/javascript">
function replace() {
//Replace < and > on textarea
var obj = document.getElementById('recipient_list');
var str = obj.value;
str = str.replace(/</i, "(");
str = str.replace(/>/i, ")");
obj.value = str;
alert("rec_lst.value: " + document.getElementById('recipient_list').value);
//Pass value to server.
alert("passing to server");
document.getElementById("ctl00$ContentPlaceHolder1$txtEmails").value = str;
alert("Passed to server");
alert("txtEmails.value: " + document.getElementById("ctl00$ContentPlaceHolder1$txtEmails").value);
}
</script>
This isn't working though... Any ideas how to fix or better implement this??..

Try this:
var txtEmail = document.getElementById("<%=txtEmails.ClientID%>");
txtEmail.value = str;
However this won't pass anything to the server, just change text box value.
To have it sent to the server user will have to click submit button, or if you have server side button have such code to "auto click" it thus performing post back:
document.getElementById("<%=btnSubmit.ClientID%>").click();

you cant pass value from client to server using JS .
JS is only a client side code.If you can do something like this, Hacking will be so easy :)
one thing you can do is add some text or label control as invisible and assign the value to the control and pass it to server when some event happens.
Sample code
<asp:TextBox ID="textbox1" runat="server" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="callOnEvets()"/>
function callOnEvets()
{document.getElementById('textbox1').value = 10; }