Passing ASP.NET textbox value to javascript function

Question

0.00/5 (No votes)

See more:

HI All,

I have created an ASP.Net form that has 2 labels, 2 textboxes & 2 buttons.
I want to pass the values in ASP.Net textboxes to JavaScript function and trigger is from code behind.

I have successfully triggered the JavaScript function from code behind using the below statement.

C#

protected void btnOK_Click(object sender, EventArgs e)
        {

         ScriptManager.RegisterClientScriptBlock(this, GetType(), "MyKey", "myFunction();", true);

        }

But when I tried to pass the values it didn't give me an output.

HTML

<script  type ="text/javascript" >
        function myFunction() {
      
            var vUserName = document.getElementById("txtUserName").value;
            var vPassword = document.getElementById("txtPassword").value;
           
            var vFullInfo = vUserName + vPassword;
            
            alert(vFullInfo);

        }
</script>

What I have tried:

Below is the full source code for the total solution.

Form01

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="frmStudInfo.aspx.cs" Inherits="WebApplication01.frmStudInfo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>First ASP.Net Application</title>

    <script  type ="text/javascript" >
        function myFunction() {
      
            var vUserName = document.getElementById("txtUserName").value;
            var vPassword = document.getElementById("txtPassword").value;
           
            var vFullInfo = vUserName + vPassword;
            
            alert(vFullInfo);
        }
</script>

</head>
<body>
    <form id="form1" runat="server" method="post">

        <asp:Label ID="Label1" runat="server" Text="User Name"></asp:Label>
        <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
        <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
        <br />
        <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        <asp:Button ID="btnOK" runat="server" OnClick="btnOK_Click" Text="OK" />
    
    </form>
</body>
</html>

Code Behind Form 01

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication01
{
    public partial class frmStudInfo : System.Web.UI.Page
    {
        private string strUserName;
        private string strPassword;

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnOK_Click(object sender, EventArgs e)
        {

         ScriptManager.RegisterClientScriptBlock(this, GetType(), "MyKey", "myFunction();", true);

        }
    }
}

I checked the code and find out the JavaScript function i.e. MyFunction() does not capture the values from the form. So that the issue is at the passing values from the form to the JS function.

Could someone please explain what whould have gone wrong?

Thanks,
Chiranthaka

Posted 23-Feb-18 22:01pm

Chiranthaka Sampath

Updated 25-Feb-18 19:49pm

v2

Add a Solution

Comments

A_Griffin 24-Feb-18 9:24am

At what point do you want to pass these values to your JS function? Forget ScriptManager - I've never found a use for it yet. If you want it when btnOK is clicked, simply add
btnOK.Attributes.Add("onclick", "return myFunction()");
in page_load in your code behind, and make your function return true or false according to whether or not you want to button for post back or not. (You should not nee the OnClick="btnOK_Click" in your markup.)

Chiranthaka Sampath 7-Apr-18 5:06am

Once I execute the ASP.Net Form, I will type the values into the text boxes and after that I will click on the 'OK' button. At that point I want to pass the values in the text boxes to the JavaScript function. Triggering the JavaScript() function from code behind have achieved with ScriptManager. But still the alert shows the values as null.

JavScript() is in the head tag

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sarita Mall · Answer 1 · 2018-02-25T19:44:00

Try This:

Code behind:

protected void btnOK_Click(object sender, EventArgs e)
     {
         string fisrtname = "FirstName";
         string lastname = "LastName";
         Page.ClientScript.RegisterStartupScript(this.GetType(), "key", "showAlert('" + fisrtname + "','" + lastname + "');", true);

     }

Script:

<script type="text/javascript">
       function showAlert(mydata1, mydata2) {
           var vUserName = document.getElementById("txtUserName").value = mydata1;
           var vPassword = document.getElementById("txtPassword").value = mydata2;

           var vFullInfo = vUserName + vPassword;

           alert(vFullInfo);
       }
   </script>

Please vote, if solution works for you.

Karthik_Mahalingam · Answer 2 · 2018-02-25T19:49:00

Solution 2

try

ScriptManager.RegisterStartupScript(this, GetType(), "MyKey", "myFunction();", true);

or

ClientScript.RegisterStartupScript(this.GetType(), "MyKey", "myFunction();", true);

both works.

Posted 25-Feb-18 19:49pm

Karthik_Mahalingam

Updated 25-Feb-18 19:51pm

v2