Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Peristent form fields - save progress automatically (garlic.js) / Allow setting data attributes

1 month 3 weeks ago #1

  • Mark's Avatar
  • Mark
  • Posts: 7
I'm working on adding garlic.js to our forms so that users will not lose their progress, if they happen to refresh the page, or browse elsewhere temporarily.

Including it your product would be awesome, although I'm not sure about licensing and if that would be allowed, but to enable it I just need to be able to create a data-persist="garlic" attribute on the form. I've tried adding this via JS, but the timing of events is likely causing issues, and I'm not sure if I'll be able to get it to work after the page finishes loading. If you were able to add a way to add data attributes to the form though, that should solve the issue for me.

Usage
Include jQuery or Zepto (if not already here) and garlic.js
<script src="jquery.js">
<script src="garlic.js">

Add data-persist="garlic" to the forms you want to auto-persist
<form data-persist="garlic" method="POST">

Thank you for your consideration, and of course your excellent product.

1 month 3 weeks ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18993
Hello,
Thank you for contacting us

You can make changes in file form.php (components/com_baforms/views/form/tmpl/form.php).
After the update, your changes will be lost (the file will be overwritten)

Regards,
Vyacheslav, Balbooa.com

1 month 2 weeks ago #3

  • Mark's Avatar
  • Mark
  • Posts: 7
Works for me... thanks for the info Vyacheslav. I'll add a note about re-applying that change to our internal documentation for when we update our site.

Here's the code for others reference, which is setup to only load the js file and add the data tag, if a class of "persistent-form-fields" is set for the form.
<?php
}
if (strpos($className, 'persistent-form-fields') !== false) echo "<script src='/js/garlic/garlic.min.js'></script>";
?>
<div class="com-baforms-wrapper">
    <form novalidate class="ba-form-<?php echo $id; ?> <?php echo $className; ?>" action="<?php echo $url; ?>"
        method="post" enctype="multipart/form-data" data-id="<?php echo $id; ?>"
		<?php if (strpos($className, 'persistent-form-fields') !== false) echo 'data-persist="garlic"'; ?> >

Note: hidden fields that are configured to show up via conditional logic do not unhide automatically when reloading the page. Although this applies whether you use garlic.js or not, since most of the time the existing data is not lost if you navigate away and come back... so long as the page doesn't get reloaded.

1 month 2 weeks ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 18993
You are welcome ;)
We think this information may be useful to our users.

Let us know if you need more assistance!

Best Regards,
Vyacheslav, Balbooa Support Team
Powered by Kunena Forum