jquery val() on textbox doesn't set DOM value attribute

Question

I am facing a weird issue and not sure whether it's jquery or combination of my scenario that is causing this. When I set the textbox value using jquery, the textbox displays correct value but the value attribute inside the html is still the one that it was loaded with. Why is it displaying different text then the one in the DOM?

I am having a dynamically generated form which adds two number and displays the addition into third textbox using jquery as shown below. You can reproduce using below code

The designer file

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $(".addToTotal").blur(function () {
            UpdateTotal();
        });
    });

    function UpdateTotal() {

        var add = 0;
        $(".addToTotal").each(function () {
            add += Number($(this).val());
        });
        $(".txtTotalPoints").val(add.toFixed(2));
        $("#para").text("Sum of all textboxes is : " + add);
    }

</script>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<input id="addAll" type="button" value="Sum all Textboxes" /><br />
<p id="para"> </p>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

Code behind file that dynamically adds control is

        protected void Page_Init(object sender, EventArgs e)
    {
        TextBox txt1 = new TextBox();
        txt1.ID = "txt1";
        txt1.CssClass = "addToTotal";

        TextBox txt2 = new TextBox();
        txt2.ID = "txt2";
        txt2.CssClass = "addToTotal";

        TextBox txt3 = new TextBox();
        txt3.ID = "txt3";
        txt3.CssClass = "txtTotalPoints";

        PlaceHolder1.Controls.Add(txt1);
        PlaceHolder1.Controls.Add(txt2);
        PlaceHolder1.Controls.Add(txt3);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            UpdateTextBoxTextProperty(this);
        }
    }

    private void UpdateTextBoxTextProperty(Control parent)
    {
        foreach (Control c in parent.Controls)
        {
            if (c is TextBox)
            {
                string Id = c.ID;
                string fieldName = Id.Substring(3);
                (c as TextBox).Text = fieldName;
            }

            if (c.Controls.Count > 0)
            {
                UpdateTextBoxTextProperty(c);
            }
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {

    }

Bilal Murtaza · Accepted Answer · 2011-07-02 06:42:31Z

2

you can also user

$(selector).attr("value","Hello World.");

answered Jul 2, 2011 at 6:42

Bilal Murtaza

8955 silver badges9 bronze badges

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

Comments

Nathan · Accepted Answer · 2011-06-11 08:23:00Z

1

that's what should happen: the dom is dynamic, but when you view the page source, the browser will show the original html. (of course, this depends on which browser you're using, each browser is different)

answered Jun 11, 2011 at 8:23

Nathan

6,2244 gold badges38 silver badges66 bronze badges

3 Comments

DotNetInfo Over a year ago

it happens with both Chrome and FF. I haven't tried it on IE yet. I haven't got much exposure with javascript in general but I thought that jquery should update the value="" attribute too. Am I missing anything? What should I do to update that dom value too

Nathan Over a year ago

the changed value is kept in memory and will be submitted to the server when the form is submitted (and/or returned when examined with javascript) - the browser just shows the original value loaded from the server, but it's nothing to worry about. if you want that value to appear differently when you view source, you'll need to send a different value from the server (but you don't need to do that, it gives no particular benefit)

DotNetInfo Over a year ago

cool, so that means this is the default behaviour, am I right? But when I get the textbox text value from code behind on postback, it still shows original value and not the updated value. So I thought the browser should update it. Thanks for your help anyways and will figure it out where in the code-behind in my original project is the issue

Collectives™ on Stack Overflow

jquery val() on textbox doesn't set DOM value attribute

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related