CODEWITHSUNDEEP
jqueryasp.net-mvc
Cragly
Cragly

Reputation: 3616

Change the value field of an input tag using jQuery

I have a mvc 3 razor view containing a form. On that form I have a input field who's value changes each time a new selection is made on a dropdownlist (via ajax request to the controller). This is working and the input updates on the page as expected.

However when looking at the form using Firebug I can see that the underlying input value field within the html does not change. So when I submit the form the value for that field is the original value.

Here are my textboxes and jQuery function which gets called on the dropdownlist change event:

    function updatePageSizeValues() {
        var pageSizeId = $jq("#ddlPageSize").val();
        $jq.getJSON("/Templates/GetPageSizeByPageSizeId/" + pageSizeId, null, updateFields);
    };

    updateFields = function (data) {
        $jq("#PaperHeight").val(data.Height);
        $jq("#PaperWidth").val(data.Width);
    };

    @Html.TextBoxFor(t => t.PaperHeight) @Html.TextBoxFor(t => t.PaperWidth)

I have looked at a lot of articles on here and the wider web and still can not get this to work. Any ideas on this would be much appreciated. Thanks in advance.

Upvotes: 0

Views: 2695

Answers (3)

Cragly
Cragly

Reputation: 3616

For anybody else who comes across this issue I finally figured out the answer. It is a bug in Firebug that prevents the DOM from updating (See this StackOverflow question) I tested the functionality in Chrome and it worked fine. I then closed Firebug and it then worked in Firefox.

Thanks also to the guys that helped me with your suggestions.

Upvotes: 0

Spencer
Spencer

Reputation: 727

Your code looks fine, so this is just a guess, but the JSON that is getting returned from the server is malformed, which can cause a silent failure.

Try running the above as just .get instead of .getJSON and take a look at the XMLHttpRequest in Firebug, or simply add a console.log(data); command to your updateFields function to investigate.

Upvotes: 0

Jean-Philippe Gire
Jean-Philippe Gire

Reputation: 901

In jQuery when you do $(myInput).val(value) it does modify the underlying attribute value of the input element in the dom. So when you submit it should be the new value that is passed. Try to take a look at the HttpRequest that is sent when pressing Submit.

In my opinion it's on your server side that the problem resides. Are you sure you do not perform the binding before reading the actual sent value? (I don't really know how does asp.net MVc works).

Upvotes: 1

Related Questions