Submit form with AJAX and set input field to readonly

I have a problem with submitting form with AJAX, print the response string under the form and set the input to readonly.

My code:

$('#save').click(
        function(){
            var form_data ={
            name: $('#name').val(),
            ajax:'1'
            };
            $.ajax({
                url:"page.php",
                type: 'POST',
                data: form_data,
                success: function(data){
                         $('#form_message').html(data);
                }
            });
            $('#name').toggleClass('bgcolored');
            $('#save').addAttr('re开发者_Python百科adonly');
            $('#save').toggleClass("invisible");        
            return false;
        }

If I delete the row $('#save').addAttr('readonly'); the script works: it send values, catch the response and print it into the div form_message and toggle the two classes on the inputbox #name and on the submit button #save. If I put $('#save').addAttr('readonly'); (there or in the success function) the pages reloads and the message is lost.

How can I fix this?

Thanks!

It works!

$('#name').attr('readonly','true');

make it readoly without reloading page!

P.S. I made a mistake in the question, obviously the "readonly" tag had to be applyed to the #name inputbox and not to the submit button.

Thanks!

Try using

$('#save').attr('readonly','true');

and deleting

return false;

These days with jQuery 1.6.1 or above it is recommended to use .prop()

$("#fieldName").prop("readonly", true);