I am creating an application to process a form online. The application pulls in information from the user's profile to autofill certain fields of the form. However, sometimes this information is either incorrect or missing when pulling from the user's profile.
Hence, I am using x-editable so the user can update their information from within the form on the fly. I have no issues getting the x-editable to work. The problem is that the information that is updated or inserted is contained within the anchor tag. Currently, I have this bit of code:
<a href="javascript:void(0)" class="fields" id="Phone" data-placeholder="Required" name="USER_PHONE">@Model.USER_PHONE</a>
Unfortunately, even if I include the name inside the anchor tag, the data does not get submitted. Is there a clean way I can have the text stored between the anchor tags submitted to the server on post?
One thing I considered was having creating some hidden fields and then updating them via an onClick() event from when the user clicks the submit button. But the problem with this is that I would have to account for every single field that uses an x-editable. It's certainly doable, though I was wondering if I am just missing a easier approach.
What's the best way I can implement this?
The solution for this was a lot easier than I thought it would be. You do not need to account for every single field. Rather, you can just use the 'save' event, catch the name field, then store the value in it. Like this:
$('.fields').on('save', function (e, params){
let fieldname = $(this).attr('name');
$("#" + fieldname).val(params.newValue);
});
Hopefully this helps someone else in the future!