Question

I have a form that auto submits and updates the same page. I have a java script function that changes a buttons value, but AJAX keeps posting the old value.

AJAX

$.ajax({
            type: 'POST',
            url: this.action,
            data: $('form').serialize()
});

JQUERY

function changevalue()
{
 $('#button').attr('value', 'grapes');
}

FORM

form...
<input type="submit"  name="button" id="button" value="apple" onclick="changevalue();" />
...

Button will display new changed word, but code behind (controller) shows old variable.

Answer 1

Change the value using jQuery’s .val() method.

function changevalue() {
    $('#button').val('grapes');
}

As of jQuery 1.6.0, the .attr() method correctly stopped accessing and changing property values, it only changes attributes.