Toggle readonly attribute in input field

Question

I have created a form. Here is the fiddle

By default all fields are in readonly state. What I need to do here is

1. Active the text field to edit when use click on the Edit button and edit button (Name and value) should turn into SAVE button.

2. Once editing is done user should click on the Save button and it should do the first step again, means change the button back to the original state i.e Edit and text fields to readonly

preferably looking for jquery solution.

Thank in advance!!

Answer 1

Gets all elements with the name Edit and attaches a click handler. The variable prev is the previous input element and ro is that elements readonly attribute state (true / false).

Then we're setting the readonly state to ! ro (not ro), which just means "set it to the opposite of what it currently is (a toggle function if you will)", and focusing the prev input.

The last line targets the currently clicked button with this, and changes it's text with a ternary operator based on the state of the ro variable.

$('[name="Edit"]').on('click', function() {
    var prev = $(this).prev('input'),
        ro   = prev.prop('readonly');
    prev.prop('readonly', !ro).focus();
    $(this).val(ro ? 'Save' : 'Edit');
});

FIDDLE