ASPX text box retain value after...javascript.

peter2004 · February 21st, 2007, 06:55 PM

Hi,
When I use javaScript to clear out an aspx text box that has value when page is loaded, it still retains the value when I submit the form. For example: I have an aspx text box with the value "Fruit" and a button to clear out this text box value via JavaScript when click. After I click the value is clear. After it is clear, I click an aspx button to perform an action on the server, the text box still has the value "Fruit". I want it to be blank. By the way I need this aspx text box to have viewstate.

Thanks,
Peter

Peter

Quick209 · February 23rd, 2007, 08:08 PM

Quick question as I do not see code with this. :)

Are you setting the value "Fruit" in the Page_Load event on the code behind? If so, are you checking if the page is postback before setting the value? Only questions I know to ask based solely off of your description.

condescendent · February 23rd, 2007, 08:45 PM

check "postback" property, maybe the reason of this, because the second time the server send data back.

I am a database programmer and .Net programmer

peter2004 · February 24th, 2007, 02:31 PM

Quick2009, the value "Fruit" is the default value for the text box; I did not set this in the Page_Load event. It seems to me that when the page get reloaded, the contol also get reload with the original value event though it waw clear out by JavaScript. Please see my application scenerio below.

condescendent, currently the text box set postback to false. That was my initial thought also but it doesn't resolve the issue when I set postback to false. In my application I will need to set postback to true.

Here how the application is set up and how I would like it to work:
I have 10 aspx input boxes. On change for each text box, an on_change event is fired to execute code behind which checks the value against the database and convert the value (prefer not to JavaScript for this). The new value is then written back to the text box.
User could enter up to the ten text boxes and they also could clear any of the text boxes after they are entered. I have a html button for each text box that use javaScript to clear it. I could use server-side coding to clear it, but I hate to waste a round trip to the server just to clear a value.
When all the entries are completed and user clicks an ASPX button, the on_click event is fired to insert data to the database. Unfortunately, the text box that was cleared, still retains the value.

I hope this make sense.

Thanks!

Peter

Quick209 · February 26th, 2007, 08:34 PM

Welp, data should not come back even if it was inserted or cleared via script. I do this kind of stuff all the time. Are you caching any values in a session and returning them? I just replicated what you want to do minus the database and was able to do it and clear them out and leave them clear. I do see potential errors arising when someone types something in and then goes to hit clear. The textchange event would fire and access the data base and I had to click clear twice to clear it.

I do know that if you want to do this with less postback flicker I would use MS AJAX 1.0. Place those textboxes in conditional update panels. Other than that, it should work. Did you change any of the default viewstate settings or anything in any of the controls?

peter2004 · February 26th, 2007, 09:22 PM

Well, the only thing I changed for the text box is allow postback b/c I need to execute onChange event. I know the value is not being cached.

I create a new website and it still does not work. Below are a simple aspx and aspx.vb code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript" >
        function cleartxt(txtBox)
        {
            document.getElementById(txtBox).value = "";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox>
        <input id="Button1" type="button" value="Clear" onclick="cleartxt('TextBox1');" /><br />
        <asp:TextBox ID="TextBox2" runat="server" AutoPostBack="True"></asp:TextBox><input id="Button2" type="button"
            value="Clear" onclick="cleartxt('TextBox2');"/><br />
        <asp:Button ID="Button3" runat="server" Text="Add"/></div>
    </form>
</body>
</html>

vb code:
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged
        '**do something and set new value
        TextBox1.Text = "NEW VALUE1"
    End Sub

    Protected Sub TextBox2_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox2.TextChanged
        '**do something and set new value
        TextBox2.Text = "NEW VALUE2"
    End Sub

    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
        '**Peform some action with input values
        Response.Write(TextBox1.Text)
    End Sub
End Class

After I entered in both text box, I clear the first text box and click add and textbox1 is still not blank.

I'm not familiar with MS AJAX but I will take a look at it.
Thanks!

Peter