User profile fields edit/save from Frontend using Modal or Inline edit

[MilenKo]

Hello all.

Not sure if I would be able to describe the need properly, but I am building a custom frontend for logged on users which would have its own Profile template allowing to modify just some specific fields (email, password, skype, etc.)

Spoiler

To allow modifications from the custom user profile, I am using a simple MODAL that would allow the user to define the desired value for the field and then click on Save to have it populated. Normally I've used a modal with a single button, however in this scenario I need to catch the click of Save button which would then trigger the page/template field to save.

So far I've found a few options using JavaScript to show the modal window and using the class to determine which of the buttons is saved, however I am not sure how would I populate the value of the form to the specific field once the Save button is clicked. Logically, I could open a specific URL using JavaScript including some segments /field_name/field_value/ and then point the POST action to another template that would read the segments and apply the changes, however I am not able to populate the field_name and field_value from the form to JavaScript URL.

I might be overthinking the things, however its worth mentioning that all the registered users should not have access to the admin so I am in doubt how to achieve that.

I was able to modify a JavaScript that might be a perfect fit for my needs, I just need to find a way to save the new field value to the user profile once the save button is clicked:

Spoiler

<!-- https://stackoverflow.com/questions/39290411/disable-and-enable-textbox-for-edit-and-save-information -->
<form name='' id='' action='' method='post'>
  <input type='text' name='txt_category' id='category' value='$category' disabled>

  <input type="button" name='edit' value='edit'>
  <input type="button" name='save' value='save'>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>

  $(document).ready(function(){

    $("form input[type=text]").prop("disabled",true);

    $("input[name=edit]").on("click",function(){

      $("input[type=text]").removeAttr("disabled");
    })

    $("input[name=save]").on("click",function(){

      $("input[type=text]").prop("disabled",true);
    })


  })
</script>

 

If you have a working example or a simpler approach I could use, would be greatly appreciated as always.

[elabx]

Is the profile going to be saved "outside" of the modal? And then you'll click Save on the profile page? Does the modal have some documentation? It probably has a save/close callback so you can then get the value of the modal form field and copy it to your main profile form. 

It seems a little strange to open up a modal to edit a text field, why not right there on the input? Obviously I might lack context. 

[MilenKo]

Hello @elabx The idea to use the modal is to allow only the value of a specific field to be updated once the Save button is clicked. We won't be forwarding the user to edit his profile directly but would instead have a custom Profile template that would allow some fields to get updated. The need is to have a few fields locked for editing after the user register. All the other fields added to the user profile can be modified individually.

The modal would have just a small form with input field and some description text which would allow the registered user to modify the current profile field value (eg. email change, password change, Internet Messengers etc.)

[rick]

Since you didn't specify whether this was a front-end interface or back-end, I'll assume you want this functionality on the back-end.

You can add whatever fields you want to the user template.

Then you can enable fields the user is allowed to edit from the Modules > Configure page by selecting the Settings button for the User Profile option.

Let us know if you want something similar on the front-end.

[MilenKo]

Hello @rick. I believe it must have slipped through with you as I did mention that the need is to modify specific fields after user confirmation from the FRONTEND which is in the title of the post and mentioned in it.

I am well aware that if the user has access to the admin area, it would be an easy task to achieve, however the project idea is to have users registering a profile or their own page with ought any direct access to the admin panel. For every login need there will be a dedicated template to be served and that is why I asked as so far I've not dealt with users that are not allowed to access PW admin and I don't have much experience with such need.

I've seen a few amazing modules that would have done the work for me (FEEL of @tpr and a few others), however I am not sure if the modules can modify a field from the currently logged on user and not from a page. For FEEL I know that can modify the page template, however so far I've not had much success with achieving what is needed.

Again, if the project required to have the entire user profile edited the way the user needs it, it would have been super easy to achieve with LoginRegister Pro module which I use for user identification, however some of the fields that are required to be added during registration would NOT BE ALLOWED to modify after. Not sure if there are any hooks that would prevent a specific profile field to be restricted for editing (excluding the option to tackle/hide the fields with CSS etc.)

Btw, your puppy avatar RULLZZ ?

[rick]

Hello @MilenKo,

My bad. I apparently skipped right over the front-end spec in the title.

What css framework are you using for the front-end? For example, bootstrap.

The only difference between the back-end and the front-end is you have to do the manual procedure on the front-end. So, add the fields that you require to the user template. You populate whichever fields after registration/confirmation. When the need arises for a user to edit their profile, simply present a form with only the fields they are allowed to change. Users are accustomed to working with a complete form rather than clicking a fieldname in a list to add or edit the field data. Especially if there are quite a few fields.

Hope this helps.

PS. Thanks! Dogs are the best. They don't care what kind of day you had, they are always glad to see you.
In fact, lock your dog and your girlfriend in the trunk of your car for an hour, then let them out and see which one is glad to see you.