CODEWITHSUNDEEP
javascriptasp.nettextbox
link2jagann
link2jagann

Reputation: 193

Can't get value of asp:textbox on external javascript file

here is example: abcd.aspx

<asp:TextBox ID="txtFName" runat="server" ></asp:TextBox>

<asp:Button ID="btnLogin" runat="server" Text="Login" 
onclick="btnLogin_Click" OnClientClick = "loginAlert()" />

javascriptfile.js

function loginAlert() {
var name = document.getElementById('<% txtFName.ClientID %>').value;
alert(name);

}

link to javascript file on .aspx page

<script src="../../JSfiles/javascriptfile.js" type="text/javascript"></script>

here name is not appear on popup box.

Upvotes: 3

Views: 4426

Answers (3)

volpav
volpav

Reputation: 5128

You can't use code nuggets (<% and %>) inside normal files (like your javascriptfile.js) since they're not interpreted by ASP.NET in any way. What you could do is to pass the Id of the text-box to a function:

function loginAlert(ctrl) {
  var name = document.getElementById(ctrl).value;
  alert(name);
}

Then the markup will look like the following:

<asp:Button ID="btnLogin" runat="server" Text="Login" 
  OnClick="btnLogin_Click" OnClientClick="loginAlert('<%=txtFName.ClientID%>')" />

UPDATE

I didn't pay attention to the fact that construct like <%=...%> don't work in server-side control declarations (because they're basically converted to Response.Write statements when the page is compiled). There're at least two ways to solve this problem:

You can make the reference to the DOM element for the name text-box globally available. Your markup will look like the following:

<script type="text/javascript">
  var loginNameId = '<%=txtFName.ClientID%>';    
</script> 

<asp:Button ID="btnLogin" runat="server" Text="Login" 
  OnClick="btnLogin_Click" OnClientClick="loginAlert()" />

And your loginAlert will look like the following:

function loginAlert() {
  var name = document.getElementById(loginNameId).value;
  alert(name);
}

I personally don't like this solution since you pollute the global namespace with variables and it's not very elegant in general.

Alternatively you can use data attributes together with ASP.NET data binding.

Markup:

<asp:Button ID="btnLogin" data-name='<%# txtFName.ClientID %>' runat="server" Text="Login" 
  OnClick="btnLogin_Click" OnClientClick="loginAlert(this)" />

JavaScript:

function loginAlert(ctrl) {
  var name = document.getElementById(ctrl.readAttribute('data-name')).value;
  alert(name);
}

Code-behind:

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
    DataBind();
}

Upvotes: 2

Sanjeev Rai
Sanjeev Rai

Reputation: 6992

Markup <% %> wont work in JS files. If you put it on aspx page inside <script type='text/javascript'>...</script> then it will work.

Update:

If you want to get client id, then you can register it from code behind in a variable, as:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "JsVariables", "var txtboxClientId='" + txtFName.ClientID + "';", true);

and in Js file use:

function loginAlert() {
var name = document.getElementById(txtboxClientId).value;
alert(name);
}

Upvotes: 1

Steve B
Steve B

Reputation: 37700

The javascript file is not served by the ASP.Net parser. Thus, the <% %> is ignored and output as is.

The simpliest way is to provide the ID as parameter:

<asp:TextBox ID="txtFName" runat="server" ></asp:TextBox>

<asp:Button ID="btnLogin" runat="server" Text="Login" 
onclick="btnLogin_Click"  />

code behind :

btnLogin.OnClientClick = string.Format("loginAlert('{0}')", txtFName.ClientID);

and in the js file:

function loginAlert(txtId) {
var name = document.getElementById(txtId).value;
alert(name);
}

Upvotes: 1

Related Questions