Get TextBox text after text is changed by Javascript

Question

I have a "ColorPicker" feature in an ASP.NET page similar to this one, except that the shades on the right are dynamically populated depending on whether a shade has already been used or not.

I have a TextBox which shows the hex value (#RRGGBB) of the color/shade selected:

<asp:TextBox runat="server" ID="TbxColorhex" Text="#FF0000" Enabled="false" />

which is rendered as:

<input name="TbxColorhex" type="text" value="#FF0000" id="TbxColorhex"></input>

I am using JavaScript to change the text (hex value) in the TextBox when a shade (table cell) is clicked.

function selectShade(shadehex) {
    if (shadehex) {
        document.getElementById('divpreview').style.background = shadehex;
        document.getElementById('<%= TbxColorhex.ClientID %>').value = shadehex;
    }
}

I have a button to Confirm the selected color:

<asp:Button ID="BtnSelectColor" runat="server" Text="Select Color" OnClick="BtnSelectColor_Click" style="margin: 0 auto" />

which triggers this method (on Code behind) when clicked:

protected void BtnSelectColor_Click(object sender, EventArgs e)
{
    if (!String.IsNullOrEmpty(TbxColorhex.Text))
    {
        Response.Redirect(Page.ResolveClientUrl("~/Something/AddProject.aspx?projcolor=" + TbxColorhex.Text));
    }
}

The Problem:

When a shade is clicked, JavaScript changes the text in the TextBox appropriately (you can see the text in the TextBox changing. However, if I use a debugger I notice that there is no change in the value of the value attribute in the input tag. Therefore, when I click the button it does not get the text that the TextBox displays.

in the particular EventArgs e can you see if there is e.text or something of that nature when debugging..? from the onChange of the TextBox..not the button keep in mind that Buttons trigger PostBacks so you may want to write a javascript function that uses the __DoPostBack(the name of the textbox, false); then on that particular event whether it's OnChange or Exit , onBlur etc.. then see if you can capture it there — MethodMan
– MethodMan, Commented Oct 29, 2014 at 22:00

Igor · Accepted Answer · 2014-10-29 23:23:40Z

2

The problem is in Enabled="false". Values of disabled inputs are not included in the POST data submitted by the browser to the server. You can try making the TextBox read-only.

If you have to keep it disabled, add a HiddenField control to the form and set its value in javascript the same way you set it for the TextBox. Then, in server-side code transfer the value from the HiddenField to the TextBox.

edited Oct 29, 2014 at 23:23

answered Oct 29, 2014 at 23:10

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tanvir Over a year ago

Even with TextBox enabled it didn't work the way I wanted it to. But the HiddenField works perfectly. Thanks!

FLICKER Over a year ago

Event making Enabled and using ReadOnly, won't work. Need to use HiddenField

matt-dot-net · Accepted Answer · 2014-10-29 22:19:18Z

0

Don't worry about the value attribute on the input tag. Worry about the value sent via POST to your server.

If the value is incorrect in BtnSelectColor_Click it's probably because you are setting the value somewhere in page load and overwriting whatever the postback value was.

answered Oct 29, 2014 at 22:19

matt-dot-net

4,24423 silver badges24 bronze badges

3 Comments

Tanvir Over a year ago

Yes, the value in BtnSelectColor_Click is basically the value that it gets on page load and when one of the colors in the Color map is clicked. When one of the shades on the right is clicked I am overwriting that value with javascript without postback.

matt-dot-net Over a year ago

Your Page_Load code is overwriting the value that the user has sent you. You need to check for Page.IsPostback before setting the value in Page_Load

Tanvir Over a year ago

@Igor's answer suggesting the HiddenField did the trick. Thanks for the help!

Collectives™ on Stack Overflow

Get TextBox text after text is changed by Javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related