Edit/Update Page Implementation in JQuery and Grails

I have a page with a form where a user enters first name and last name.

When the 'Edit' button is clicked, I want the button's name to change to 'Update' and the textboxes to become editable.

Then, when the user finishes editing the fields, I want to call a controller method in Grails.

What I want is to call the controller method WHEN 'UPDATE' BUTTON IS CLICKED (NOT WHEN 'EDIT' BUTTON IS CLICKED).

Here is the solution!

I put the edit button outside the tag and when the edit button is clicked, it calls a JQuery function which makes the fields editable and change the background color of the textboxes.
Plus, it hides the edit button and show the update button.

The update button is inside tag and it calls a controller action.

It works fine and I think this is the best way of implementing this.

N.B. I had asked this question in stackoverflow.com and got some hint and I did it. You can find the link here.

1:  <script>  
2:   $(document).ready(function(){  
3:    
4:    // Updating Profile  
5:    $('#editProfile').click(function(){  
6:    
7:     // Make fields editable  
8:     $('.editableField').prop('disabled', false);  
9:    
10:     $('.editableField').css("background-color", "yellow");  
11:       
12:     // hide the edit button div  
13:     $('#updateProfileDiv').show();  
14:    
15:     // show the update button div  
16:     $('#editProfileDiv').hide();  
17:    });  
18:      
19:   });  
20:  </script>  
21:    
22:  <!-- Inside the body tag-->  
23:  <g:form action="updateProfile" >  
24:    <div id="one">  
25:     <g:if test="${customerInstance?.firstName}">  
26:      <div class="fieldcontain">  
27:      <label for="firstName">  
28:        <g:message code="admin.customer.profile.firstName.label" default="First Name" />:  
29:      </label>  
30:      <g:textField name="firstName" value="${customerInstance?.firstName}" disabled='disabled' class='notEditableField'/>  
31:     </div>  
32:    </g:if>  
33:      
34:    <g:if test="${customerInstance?.lastName}">  
35:     <div class="fieldcontain">  
36:      <label for="lastName">  
37:        <g:message code="admin.customer.profile.lastName.label" default="Last Name" />:  
38:      </label>  
39:      <g:textField name="lastName" value="${customerInstance?.lastName}" disabled='disabled' class='notEditableField'/>  
40:     </div>  
41:    </g:if>  
42:      
43:    <div id="updateProfileDiv" style="display:none">  
44:      <fieldset class="buttons">  
45:      <g:hiddenField name="id" value="${customerInstance?.id}" />  
46:       
47:      <g:submitButton class="edit" name="updateProfile"   
48:       value="${message(code: 'admin.customer.profile.update.profile.button.label', default: 'Update Profile')}"/>  
49:     </fieldset>  
50:    </div>  
51:      
52:  </g:form>  <!-- end of g:form tag-->  
53:     
54:  <div id="editProfileDiv">  
55:    <fieldset class="buttons">  
56:     <g:submitButton class="edit" id="editProfile" name="editProfile"   
57:      value="${message(code: 'admin.customer.profile.edit.profile.button.label', default: 'Edit Profile')}"/>  
58:    </fieldset>  
59:  </div>