I have many forms and they have various fields that become hidden based on user selections. The user selects an option that makes a field visible and provides input into the visible fields. That works great (visible_input_1 is a success).

Sometimes the user will change their mind and makes a selection that changes the visible fields. They can put new input in the newly visible fields and that works great(visible_input_2 is a success).

The problem comes when the form is saved. The form state has no way of clearing prior inputs so the data from visible_input_1 and visible_input_2 are saved as form values. This is not good. I only want the last "visible" inputs.

I was trying to change the state.js file by making a new "Global state change handlers" for "invisible". I want this to change the values of the fields to be set to "_none". I setup "visible" state (to show field) and "invisible" states (to change values) and tried this. I'm also using "choosen" hence the ".trigger("chosen:updated");". It didn't work. I don't have much experience, so this is a feature request.

$(document).bind('state:invisible', function(e) {
  var invisVal = "_none";
  if (e.trigger) {
      $(e.target).closest('.form-item').val(invisVal).trigger("chosen:updated");
  }
});

I do realize this would only be good for fields with "_none" values. A way of handling other browser inputs when a field is hidden could help. I do suppose it takes a commitment to saying that hidden fields should not have input.

Any other suggestion or ideas?

Comments

JimJS created an issue. See original summary.

JimJS’s picture

JimJS CreditAttribution: JimJS commented
Title: States system needs to handle user inputs » States system needs to handle user input changing
JimJS’s picture

JimJS CreditAttribution: JimJS commented

I found a solution that works. By creating a custom mymodule.js file I was able to create a function that would empty the fields upon hiding them.

// This binds the empty function to the document for emptying field values when state changes to visible-false
          $( document ).on( "state:visible", function( e ) {
            //The current state needs to be true visible because it is changing to !visible and will be emptied - alert( e.target.id );
            if ( e.value === true ) {
              if ( $.inArray( "form-checkbox", e.target.classList ) !== -1 || $.inArray( "form-radio", e.target.classList ) !== -1 ) {
                $( e.target ).prop( "checked", false );
              }
              if ( $.inArray( "form-checkboxes", e.target.classList ) !== -1 ) {
                $( e.target ).find( "input" ).prop( "checked", false );
              }
              if ( $.inArray( "form-select", e.target.classList !== -1 )) {
                $( e.target ).prop( "value", "_none" ).trigger( "chosen:updated" );
              }
              if ( $.inArray( "form-textarea", e.target.classList !== -1 )) {
                $( e.target ).find ( ".textarea" ).prop( "value", "" ).keyup();
              }
              //handles date, time, integer and textfield inputs
              if ( $.inArray( "form-text", e.target.classList !== -1 )) {
                $( ":input", e.target ).prop( "value", "" ).keyup();
              }
            }
          });

Hope someone finds this useful.

Version: 7.39 » 7.x-dev

Core issues are now filed against the dev versions where changes will be made. Document the specific release you are using in your issue comment. More information about choosing a version.