Problems, need help? Have a tip or advice? Post it here.
3 posts Page 1 of 1
I'm allowing users to modify some cloned pages from the frontend through a data-bound form. But since the template they're modifying has many fields (and more may be added, even though not that often), I need a way to tell which fields they did edit without having to constantly add <cms:if />s for each field or to add more fields to the templates only to achieve this. These fields then will be sent via an email to notify the admins of the page (in any form, as long as they're readable).
I thought about each loops, they would be a really good solution. But I'm not sure how to iterate through the form fields.
An idea for an approach could be... when you load the data-bound form, create a JSON string (there are threads on the forum that can help you get started) that contains all the data prior to the submission.

When submitted, you can then create a loop to check the submitted results to the JSON string you created and while this loop is running, you would create another JSON string of the fields that were changed with the old and new field data.

When the loop is finished, you can take that new JSON string and use it to add the detailed information on the changes to an email to send to the admin.
JS can track which field has been just changed. So if you could prevent default submission of the form like this:
<cms:form .... onSubmit="javascript:compare()" >

Then use a js function which I called 'compare', in which do the comparison for a single field first (adding in a loop after this proof of concept).

For text fields:
// text input: my_textfield

Code: Select all
      var t = document.getElementById('f_my_textfield');
      if( t && (t.value != t.defaultValue) ){
        /* .. field has been changed */ alert('text changed!');
      }

For checkboxes
// checkbox input: my_checkbox

Code: Select all
      var ch = document.getElementById('f_my_checkbox');
      if ( ch && (ch.checked != ch.defaultChecked) ){
          /* .. field has been changed */ alert('checkbox changed!');
      }

And finally, submit the form. for example
document.getElementById("edit-form").submit();


This might work. I once had to do it for 200 fields and they were named like field_1_text, ... field_199_text - so I put a simple loop:

Code: Select all
for( var i=1; i<=200; i++ ){
   var t = document.getElementById('f_field_'+i+'_text');
   if( t && (t.value != t.defaultValue) ){
     ... field changed, do something ..
   }
}


Maybe there are other simpler solutions, idk.
The idea behind it is very simple - there are no comparisons with stored data in database. Only reported fields are those that user has inputted/changed/erased data and submitted. Fields that were changed and then reverted without submission are not reported - so, if user types in something and then erases it before submit - that field will not have the flag 'changed' set by browser.

A little note to speed up understanding: defaultChecked and defaultValue are properties of the inputs, not my variables. And also Couch adds an id automatically to each input and adds f_ to its name.
3 posts Page 1 of 1
cron