How to Clear hidden elements' values by JavasScript

[keianrad]

I need to clear elements' value that are hidden by Javascrip event, when form is submitting.

I used clear event in element JavaScrip but it doesn't work:

Event: change
If this element: hidden
Value:
Action: clear
Element: the element name

Is there any solution for that?

 

[cheesegrits]

There isn't really a solution for that. The change event won't help, as the element is unlikely to change after being hidden.

It would technically be possible to write some custom JS, using the fabrik.form.submit.start event, and do it by hand, but that would be a tedious way of doing it, as you'd have to figure out which elements are actually visible.

I think I'd have to add a new option to the code, something like "Reset on hide", although that would still be a lot of work. Simple enough for individual elements, but much harder when hiding a group. Or I could add a new JS event, 'submit', and call that prior to submitting. Either option is a fair amount of work.

Actually, I just thought of a way that might be simple using the fabrik.form.submit.start method. Try creating a ./components/com_fabrik/js/form_X.js file (where X is your numeric form ID), that does something like this:

// on page load, wait for Fabrik to be loaded, so Fabrik object is available
requirejs(['fab/fabrik'], function () {
   // add an event to fire at start of form submit
   Fabrik.addEvent('fabrik.form.submit.start', function(form) {
      // on submit, iterate through all the form elements ...
      Object.each(form.formElements, function(el) {
         // use jQuery to see if the DOM element for this Fabrik element is hidden ...
         if (!jQuery(el.element).is(':visible')) {
            // if not visible, clear it
            el.clear();
         }
      });
   });
});

The thing I'm not entirely sure about there is whether the jQuery is(':visible') will work for all the way we hide elements / groups.

Hmmm, it also just occured to me that this will also clear any elements that are simply hidden on the form (like the 'id' element). So that won't work. Let me have a think ...

-- hugh

 

[cheesegrits]

OK, this might work. In this commit:

https://github.com/Fabrik/fabrik/commit/937564fb4938b51a92e4a5d94e4af0462b5f0ce3

... I've added some args to the fabrik.form.doelementfx event (which I'd forgotten about). This event lets you run code after an FX is run. So ... update form github, and try a form_X.js with this ...

requirejs(['fab/fabrik'], function() {
   Fabrik.addEvent('fabrik.form.doelementfx', function(form, method, id, groupfx) {
      if (method === 'hide') {
         if (!groupfx) {
            form.formElements[id].clear();
         }
      }
   });
});

Try that, for an element level action (so you are hiding an element directly, not hiding a group). Note that this is specific to "hide" (so not "slide out" or "fade out"). If you use those FX, we can add to the method test.

If you are doing group hides, we'll have to add some more code, but I just want to see if this approach works.

-- hugh

 

[keianrad]

Thanks. It's working perfect.