Get value asp:Textbox value using javascript

How do I get the value of a textbox using javascript?

I would have assumed it would be something like "document.getElementbyID("nameofcontrol").value" but when I run the script, I get an error. I'm assuming that is because the usercontroll value gets changed to something like c100_nameofcontrol when the page is rendered.

Thank you for any help.

Re: Get value asp:Textbox value using javascript

Hi,

You should generate your JavaScript like:

document.getElementById('<%=Test.ClientID%>').value

See more details: http://www.devx.com/tips/Tip/28332

-yuriy
http://couldbedone.blogspot.com

Re: Get value asp:Textbox value using javascript

Hi There,

Say you have a textbox like follows:

<asp:TextBox id="txtMyTextBox" runat="Server" Text="1234"></asp:TextBox>

In javascript do the following to get value:

var value = document.getElementById('<%=txtMyTextBox.ClientID%>').value;

As TextBox is server control, so on runtime this control have different client id

'<%=txtMyTextBox.ClientID%>' will return control clientid on runtime

Re: Get value asp:Textbox value using javascript

I assume that you are using Master Page and ContentPlaceHolder in your page.

see the link if this is the case.

Add JavaScript to asp:Content block dynamically in ASP .NET 2.0

Re: Get value asp:Textbox value using javascript

d4dennis@inspir3

Hi There,

Say you have a textbox like follows:

<asp:TextBox id="txtMyTextBox" runat="Server" Text="1234"></asp:TextBox>

In javascript do the following to get value:

var value = document.getElementById('<%=txtMyTextBox.ClientID%>').value;

As TextBox is server control, so on runtime this control have different client id

'<%=txtMyTextBox.ClientID%>' will return control clientid on runtime

Hi d4Dennis,

The example you shows will put the values "1234" in the txtMyTextBox field, right? so what if I want to get the value from a different form and put it in txtMyTextBox, How do I do that?

For example in Form1.aspx, I have

<asp:TextBox id="txtName" runat="Server" </asp:TextBox>
<asp:TextBox id="txtStNum" runat="Server" </asp:TextBox>

Want to get values from Form1 to Form2.aspx

<asp:TextBox id="txtMyName" runat="Server" </asp:TextBox>
<asp:TextBox id="txtMyStNum" runat="Server" </asp:TextBox>

Re: Get value asp:Textbox value using javascript

Hi There,

You can use QueryString:

Example:

When you click on a button Form1.aspx

protected void Button1_OnClick( object sender, System.EventArgs e)

{

Response.Redirect("Form2.aspx?name=" + txtName.Text + "&num=" + txtStNum.Text );

}

On your Form2.aspx

protected void Page_Load( object sender, System.EventArgs e)

{

txtMyName.Text = Request.QueryString["name"];

txtMyStNum.Text = Request.QueryString["num"];

}

Hope this is what you want.

Re: Get value asp:Textbox value using javascript

d4dennis@inspir3

txtMyName.Text = Request.QueryString["name"];

txtMyStNum.Text = Request.QueryString["num"];

and if its not in query string, then adding to Dennis's reply it would be something like

txtMyName.Text = Request["txtname"]; //txtname being control in the form from which you are redirecting

txtMyStNum.Text = Request["txtnum"]; //txtnum likewise

PS:- do check for null etc

thanks,

satish.

Re: Get value asp:Textbox value using javascript

Thank Satish and d2Dennis for replying, really appreciated!

I got an error saying "The name 'streetnumber' does not exist in the current context " This is part of Form2.aspx HTML code

<TR>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STREETNUMBER%>" VALUE="<%=streetnumber%>" SIZE="7" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_PREDIRECTION%>" VALUE="<%=predirection%>" SIZE="7" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STREETNAME%>" VALUE="<%=streetname%>" SIZE="30" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STREETTYPE%>" VALUE="<%=streettype%>" SIZE="7" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_POSTDIRECTION%>" VALUE="<%=postdirection%>" SIZE="7" CLASS="CONTROL"></TD>
        </TR>

        <TR>
          <TD COLSPAN=3 CLASS="CELL"><B>Cross Street (optional):</B></TD>
          <TD COLSPAN=2 CLASS="CELL"> </TD>
        </TR>
        <TR>
          <TD COLSPAN=3 CLASS="CELL"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_CROSSSTREET%>" VALUE="<%=crossstreet%>" SIZE="32" CLASS="CONTROL" id="Text1"></TD>
          <TD COLSPAN=2 CLASS="CELL"> </TD>
        </TR>

        <TR>
          <TD COLSPAN=5 CLASS="CELL"><B>City, State Zip:</B></TD>
        </TR>
        <TR>
          <TD COLSPAN=5 CLASS="CELL">
            <INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_CITY%>" SIZE="25" VALUE="<%=city%>" CLASS="CONTROL"> 
            <INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STATE%>" SIZE="2" VALUE="<%=state%>" CLASS="CONTROL"> 
            <INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_ZIP%>" SIZE="5" VALUE="<%=zip%>" CLASS="CONTROL">
          </TD>
        </TR>

This is how I do it in Form1.aspx

protected void BtNext_Click(object sender, EventArgs e)
    {
        Response.Redirect("addressform.aspx?SiteAddNum=" + TextBoxSiteAddNum.Text + "&SiteAddStreetName=" + TextBoxSiteAddStreetName.Text +
                            "&SiteAddCity=" + TextBoxSiteAddCity.Text + "&SiteAddSt=" + TextBoxSiteAddSt.Text + "&SiteAddZip=" + TextBoxSiteAddZip.Text);
    }

And this is Form2.aspx , I try the first one from d2dennis and the second one is from Satish, still could recognize the input id in Form2

protected void Page_Load(object sender, EventArgs e)
    {
        {

          /* streetnumber.value = Request.QueryString["SiteAddNum"];
            streetname.value = Request.QueryString["SiteAddStreetName"];
            City.value = Request.QueryString["SiteAddCity"];
            State.value = Request.QueryString["SiteAddSt"];
            Zip.value = Request.QueryString["SiteAddZip"];
            */

            streetnumber.value = Request["SiteAddNum"];
            streetname.value = Request["SiteAddStreetName"];
            City.value = Request["SiteAddCity"];
            State.value = Request["SiteAddSt"];
            Zip.value = Request["SiteAddZip"];
        }
    }

Re: Get value asp:Textbox value using javascript

i can see you are passing SiteAddNum etc in query string so what Dennis suggest should work as following you've written.

boston_ma

          streetnumber.value = Request.QueryString["SiteAddNum"];
            streetname.value = Request.QueryString["SiteAddStreetName"];
            City.value = Request.QueryString["SiteAddCity"];
            State.value = Request.QueryString["SiteAddSt"];
            Zip.value = Request.QueryString["SiteAddZip"];

and sorry you are making small mistake in what i suggest

you need to accessing using ControlID like Request["TextBoxSiteAddNum"]. could you tell me what is streetnumber.value, i guess its some html field!!

Re: Get value asp:Textbox value using javascript

Thanks Satish,

I changed the Request["SiteAddNum"]; to Request["TextBoxSiteAddNum"]; and got the same error, The streetnumber.value is the html <INPUT> ControlID

This is the form of FORM2.aspx and I want to grab the address information and populate from FORM1 to FORM2

<FORM NAME="address" ACTION="<%= URL %>" METHOD="POST">

      <TABLE BORDER=0 CELLPADDING=4 CELLSPACING=0>
        <TR>
          <TD CLASS="CELL"><B>Street<BR>Number</B></TD>
          <TD CLASS="CELL"><B>Pre<BR>Direction</B></TD>
          <TD CLASS="CELL"><B>Street Name</B></TD>
          <TD CLASS="CELL"><B>Street<BR>Type</B></TD>
          <TD CLASS="CELL"><B>Post<BR>Direction</B></TD>
        </TR>
        <TR>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STREETNUMBER%>" VALUE="<%=streetnumber%>" SIZE="7" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_PREDIRECTION%>" VALUE="<%=predirection%>" SIZE="7" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STREETNAME%>" VALUE="<%=streetname%>" SIZE="30" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STREETTYPE%>" VALUE="<%=streettype%>" SIZE="7" CLASS="CONTROL"></TD>
          <TD CLASS="CELL" style="height: 29px"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_POSTDIRECTION%>" VALUE="<%=postdirection%>" SIZE="7" CLASS="CONTROL"></TD>
        </TR>

        <TR>
          <TD COLSPAN=3 CLASS="CELL"><B>Cross Street (optional):</B></TD>
          <TD COLSPAN=2 CLASS="CELL"> </TD>
        </TR>
        <TR>
          <TD COLSPAN=3 CLASS="CELL"><INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_CROSSSTREET%>" VALUE="<%=crossstreet%>" SIZE="32" CLASS="CONTROL" id="Text1"></TD>
          <TD COLSPAN=2 CLASS="CELL"> </TD>
        </TR>

        <TR>
          <TD COLSPAN=5 CLASS="CELL"><B>City, State Zip:</B></TD>
        </TR>
        <TR>
          <TD COLSPAN=5 CLASS="CELL">
            <INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_CITY%>" SIZE="25" VALUE="<%=city%>" CLASS="CONTROL"> 
            <INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_STATE%>" SIZE="2" VALUE="<%=state%>" CLASS="CONTROL"> 
            <INPUT TYPE="TEXT" NAME="<%=FirstSearchConstants.FF_ZIP%>" SIZE="5" VALUE="<%=zip%>" CLASS="CONTROL">
          </TD>
        </TR>

        <%
          if (cands != null && cands.length > 1) {
            %>
            <TR>
              <TD COLSPAN=5 CLASS="CELL" WIDTH=450>
                <SPAN CLASS="ERROR">Your input address was not an exact match. Please select from the list and press 'Locate'</SPAN>
              </TD>
            </TR>
            <TR>
              <TD COLSPAN=5 ALIGN=CENTER CLASS="CELL">
                <SELECT NAME="<%=FirstSearchConstants.FF_CANDIDATE%>" SIZE="5" CLASS="CONTROL">
                  <%
                  for (int i=0;i<cands.length;i++) {
                    String address = cands[i].getStreet() + ", " + cands[i].getCity() + ", " + cands[i].getCountrySubdivision() + " " + cands[i].getPostalCode();
                    String selected = ((i == 0)?" SELECTED":"");
                    out.println("<OPTION VALUE=\"" + i + "\"" + selected + ">"+address);
                  }
                  %>
                </SELECT>
              </TD>
            </TR>
            <%
          }
        %>

        <TR>
          <TD COLSPAN=5 ALIGN=CENTER CLASS="CELL"><INPUT TYPE="RESET"> <INPUT TYPE="SUBMIT" VALUE="Locate"></TD>
        </TR>

      </TABLE>

      <INPUT TYPE="HIDDEN" NAME="<%=FirstSearchConstants.FF_SOURCE%>" VALUE="<%=FirstSearchConstants.FORM_ADDRESS%>">

</FORM>

Re: Get value asp:Textbox value using javascript

could you try to add runat=server to those html controls? i think that should give a fix.

thanks,

satish.

Re: Get value asp:Textbox value using javascript

Hi There

satish_nagdev

could you try to add runat=server to those html controls? i think that should give a fix.

thanks,

satish.

Satish is true, change it to server control, or it will not be recognise in code-behind.

In addition of that, in .net hardly use the method post e.g. post value from form1 and get it in form2 like we use to do in asp or php.

In .net we normally, dopostback or response.redirect with querystring.

End of the day if up to you though ;)

Re: Get value asp:Textbox value using javascript

Thanks Satish and d2dennis,

I add the "runat="server" in the html control, but nothing works, I also notice that in the Design View of the FORM2 shows <%=streetnumber%> in the box and also the same for others, When I open the properties, this <%=streetnumber%> Value is disable, you can't make change in the proproties

Re: Get value asp:Textbox value using javascript

Thanks for all the information. I'm trying to use RegisterClientScriptBlock to register my javascript function I'd like to call:

'Register Client Script Block on page load
			Me.ClientScript.RegisterClientScriptBlock(Me.GetType(), "clientScript", "<script language=javascript>" & _
			"function Amount(a, b){" & _
			"return a * b" & _
			"}" & _
			"</script>")

Then I add the onBlur Attribute to the a text box

tbContractValue.Attributes("onBlur") = "Amount(document.getElementById('<%=tbContractValue.ClientID%>').value, 34)"

However, when I view the html code generated it looks like this:

<input name="ctl00$ContentPaneHolder$tbContractValue" type="text" id="ctl00_ContentPaneHolder_tbContractValue" class="Normal" onBlur="Amount(document.getElementById('<%=tbContractValue.ClientID%>').value, 34)" style="width:290px;" />

It looks like my formatting is off somewhere and it's writing out '< instead of <. and I get a scripting error onBlur stating "Object Required".

Any Ideas would be greatly appreciated.

Re: Get value asp:Textbox value using javascript

The following should set focus to the control. I am learning JavaScript myself, so I do not know if you can use sb.Append("textbox1.value();") in place of the focus statement. This may, however, guide you in the right direction. (code in VB)

Dim sb As StringBuilder = New StringBuilder()
   sb.Append("<script type=""text/javascript\"">")
   sb.Append("function SetFocusOnControl() {")
   sb.Append(String.Format("var textBox1 = $get('{0}');", txtTextBox1.ClientID))
   sb.Append("textBox1.focus();}")
   sb.Append("</script>")
   Page.ClientScript.RegisterStartupScript(Page.GetType(), "Startup", sb.ToString())

Re: Get value asp:Textbox value using javascript

Still no luck, it keeps writing out < instead of "<"

Re: Get value asp:Textbox value using javascript

can you try to replace

tgneiti
tbContractValue.Attributes("onBlur") = "Amount(document.getElementById('<%=tbContractValue.ClientID%>').value, 34)"

with

tbContractValue.Attributes("onBlur") = "Amount(document.getElementById("+tbContractValue.ClientID+").value, 34)";

thanks,

satish,

Re: Get value asp:Textbox value using javascript

Hi Satish and everyone,

For getting the value from Form1.aspx and place it in Form2, I got it works, but when I try to match-up the selection list from dropdownlist to the selection type in Form2, it didn't work and it's shows blank eventhough, that selection is in the list, here is my example code:

Form1.aspx

Response.Redirect("searchform.aspx?SiteAddNum=" + TextBoxSiteAddNum.Text + "&SiteAddStreetName=" + TextBoxSiteAddStreetName.Text + "&SiteAddName2=" + TextBoxSiteAddName2.SelectedItem.Text);

Form2.aspx

TxtStreetNumber.Text = Request.QueryString["SiteAddNum"]; //Work

TxtStreetName.Text = Request.QueryString["SiteAddStreetName"]; //Work

DropListStreetType.SelectedItem.Text = Request.QueryString["SiteAddStreetName2"]; //not working, shows bank on the dropdownlist

Re: Get value asp:Textbox value using javascript

boston_ma
Response.Redirect("searchform.aspx?SiteAddNum=" + TextBoxSiteAddNum.Text + "&SiteAddStreetName=" + TextBoxSiteAddStreetName.Text + "&SiteAddName2=" + TextBoxSiteAddName2.SelectedItem.Text);

is textboxsiteaddname2 a textbox or what? if so then how come you didnt got error while using SelectedItem property as textbox doesnt have such property.

also for text fields like siteaddname2 use something like "&SiteAddName2='"+value+"'" //check single quotes

thanks

satish

Re: Get value asp:Textbox value using javascript

satish_nagdev
hi

boston_ma
Response.Redirect("searchform.aspx?SiteAddNum=" + TextBoxSiteAddNum.Text + "&SiteAddStreetName=" + TextBoxSiteAddStreetName.Text + "&SiteAddName2=" + TextBoxSiteAddName2.SelectedItem.Text);

is textboxsiteaddname2 a textbox or what? if so then how come you didnt got error while using SelectedItem property as textbox doesnt have such property.

also for text fields like siteaddname2 use something like "&SiteAddName2='"+value+"'" //check single quotes

Thanks Satish for replying,

textboxsiteaddname2 is the ControlID of the Dropdownlist, So, instead of name the control ID Dropdownlistsiteaddname2 , I named it textboxsiteaddname2

I try "&SiteAddName2='"+value+"'" says that the value does not recognize, I also try to changing around where +value+ to +Text+ or +SelectedItem.Text+ but still gets the same syntax error