Disabling combo box

Submitted by Sherman on Tue, 03/15/2011 - 13:54

I have a combo box which needs to be disabled in some conditions. If I use disabled type=disabled, the user cannot change the value (as intended) but the value is not bound to the action submission XML so the database ends up replacing any prior value with blank. If I use "read-only" then, even though the "not allowed" symbol shows when you hover over the field, the user can still pull down the list and select a diffferent value and this value is passed out as the value to be saved...
This issue is occurring in my editbale table as well as a field on the main form.

RE: Disabling combo box

Hi Sherman

When fields are disabled their values do not get submitted. This is how html forms work. I assume you are disabling the field using Javascript rather than the server-binding option?

The best approach for you is to create a hidden field for each disabled control and set the page display binding to the same xpath as the binding for the disabled control. But, instead of binding the disabled control to the action submission binding, bind the hidden field instead. Finally make sure that you either assign the original value or blank to the hidden field whenever you enable or disable the select control.

If you have to do this for a lot of fields then let me know. I can provide a couple of utility functions that can be used to automate the creation, removal and styling for the hidden and disabled fields.

I hope this helps, but please let me know if you need further assistance.

Regards
Abdul

RE: Disabling combo box

All of my disabled fields submit their values except for the combo boxes. Values should not be lost because they are disabled. In fact there was a javascript work-around needed in the prior version of webmaker that addressed this issue for check boxes. I am almost sure that we used disabled combo boxes with no issue then as well...
In regard to your question, no I am not using script to disable, I am using server-side data binding.

RE: Disabling combo box

Hi Sherman

Sorry I assumed you were using script. I'm not sure how you are managing to submit your values using the disabled option for the visibility. I assume you are using Disable Field Based on Runtime Server Data? under Visibility Details? Are you using the read only option for the fields that successfully submit values rather than the disabled option? There is a difference in the generated HTML depending on which option you choose, which can impact the submission behaviour.

I'm sorry about the confusion, but the read only option is primarily used for text boxes, etc., so your best option for select boxes is to use the method I described earlier using hidden fields to bind your data back to the server XML structure.

I will make some enquiries about the workaround you refer to, but I assume it may be something similar to the script I mentioned earlier, which you can use if you need to do this for many select boxes.

Regards
Abdul

[hr][/hr]
Hi Sherman

You may find the following script useful:


/**
 * Disables an individual field, including the creation of the hidden field to enable data submission.
 * @param strField Name of field to disable
 * @param strValue Value of the field to disable
 */
 function disableField(strField, strValue)
 {
     dojo.byId(strField).value = strValue;
     dojo.byId(strField).className = 'disabled';
     dojo.byId(strField).disabled = true;
     var objHiddenField = document.createElement('input');
     objHiddenField.id = 'hidden' + strField;
     objHiddenField.name = strField;
     objHiddenField.type = 'hidden';
     objHiddenField.value = strValue;
     dojo.byId(strField).parentNode.appendChild(objHiddenField);
 }

You can call something similar to the following to access your select control(s) before submission:


function prepareDisabledSelectsForBinding()
{
    if (dojo.byId('select').disabled)
    {
        disableField('select', 'submitted value when disabled');
    }
}

In this case select is the name of the select box. Finally, you may also find the following useful for completeness:


 /**
 * Enables an individual field, including the removal of the hidden field used for data submission.
 * @param strField Name of field to enable
 * @param strStyleClass Style to apply once the field is enabled, typically has value 'select' for select boxes
 */
 function enableField(strField, strStyleClass)
 {
     var objField = dojo.byId(strField);
     var objHiddenField = dojo.byId('hidden' + strField);
     if (objHiddenField != null && objField != null)
     {
         objField.className = strStyleClass
         objField.disabled = false;
         objHiddenField.parentNode.removeChild(objHiddenField);
     }
}

Please let me know if this helps. Also, please let me know if the values that are currently submitting are non-selects and set to read only rather than disabled.

Kind Regards
Abdul

RE: Disabling combo box

There must be some other issue in this project. I know in a prior project we disabled (type=disabled) all of our check boxes and radio buttons and had no problems with writing the data back to the database. We were given the following code as a fix for checkboxes losing their values when disabled (but I thought this was no longer needed) :

function disable_check()
{
dojo.query("input[type=checkbox]").forEach(function(node, index, array){if(node.disabled) dojo.byId(node.id + "_value_if_not_submitted").disabled=true;})
}
dojo.addOnLoad(disable_check);

In my current project this code does not help and I am losing values if I set the control to disabled. If I use read-only as the disabled type, it only protects a text box. Combo boxes, radio buttons and check boxes can all be changed by the user, despite being read-only and the changed value is submitted to the database record. How do you protect a field from editing? Do I really need to write script for every field on my form? (Incidentally, I was able to fix the issue for a combo box by simply setting disabled = false in my oncomplete script. So long as the field is enabled when the work item is submitted, the value remains correct using "disabled" as the disabled type fo the combo box. I would hate to have to do this for every radio button and checkbox as well. [not to mention the fields in my editable tables...].)

RE: Disabling combo box

Hi Sherman

Just so I don't confuse matters further, I would appreciate a little bit more detail about what you are trying to achieve. If you simply want to display information and prevent this information being altered on the screen then you can use the disable method of disabled and this should work fine. However, this will not submit the 'locked' information back to the server.

I understood your requirement as being the need to prevent changes to fields on the screen, but still needing to submit these fields, together with other editable fields, back to the server. Is this correct?

Also, can you please let me know which disable method (disabled or read only) you are using for which types of controls.

Regards
Abdul

RE: Disabling combo box

Hi Sherman

I'm wondering if you were using a dynamic binding fragment previously and lost this setting for your project. Please have a look at the Data Bindings tab. Within here, select the Action Configuration tab on the left. Now select the required action from the list on the left and check the Action Configuration information in the centre pane. Please check to see if you have Keep previous form data? checked. If not, check this value, generate and deploy and see if this exhibits the behaviour you were getting previously.

Kind Regards
Abdul

RE: Disabling combo box

I tried the change you mentioned above in action configuration but no improvements. In the end I just added several lines of script like the dojo.query in the workaround above but used them to set disabled=false after the user has submitted the form. This solves the problem of losing the values but adds a small risk that if the form fails validation for a mandatory field, then the controls will have been enabled. But seeing as they were changable anyway (with read-only) this is a small issue.
And your understanding was correct that I need to send the disabled fields along with the other fields to be updated in the DB. The form designer originally set all fields to disabled type = read-only. This worked OK from the data save side, but it was then noticed that checkboxes, radio buttons and selects could be altered even though they were marked as read-only (what's the point then?) so we changed them to disabled, but that created the save issue...

RE: Disabling combo box

Hi Sherman

It's not ideal and you shouldn't have to resort to script, unless you are dynamically changing the visibility on the client-side. You should be able to achieve what you need using standard WebMaker features. Please bear with me.

It's likely that you are binding back to a fragment other than formData. If you have a look just below the option for Keep previous form data? mentioned in my previous post you should see a link called Maintain Additional Data. Untick the Keep previous form data? and click the Maintain Additional Data link, which should provide an edit box to enter an XPath. You can now drag and drop the part of your submission binding fragment from the binding document on the right. This is the fragment for which you want to keep the data (e.g. /mvc:eForm/mvc :D ata/mvc:yourData). You can preserve multiple fragments if required.

Once you have done this, have a look a the Action Submission Bindings for this action (Select the Bindings tab on the left and choose Action Submission Bindings in the centre panel). The submission document on the right should now show the additional fragment(s) you have chosen to maintain.

Please note: You may have to modify the submission document to remove any static fragments within the same location that are already present because WebMaker will automatically insert these (including the data before the page is rendered) when the form is submitted. Therefore, the submission document on the right is a composite view of your static submission document, 'overlayed' with the dynamic fragments you have just specified to be maintained.

Just to clarify, this approach maintains the data as it was for the chosen fragment(s) before the page is rendered. Therefore, disabled fields with disable method=disabled will not submit data and this data will not be bound, preserving their original values. The other editable fields, which submit data will be bound in the usual manner, overwriting any previous values.

This is a powerful, but complex area and I hope I haven't confused you. Please let me know if this works and whether I can assist you further.

Regards
Abdul

RE: Disabling combo box

Yes. This is exactly what I was looking for. I knew about the "Maintain additional data" spec, but I forgot to remove the "static" copy of the fragment, thus my frustrations...
It is working as always now.

Thanks for the reminder (and sorry for the slow reply)

RE: Disabling combo box

Hi Sherman

I hope you had a good weekend and glad you got this sorted. Please get in touch if you need anything further.

Kind Regards
Abdul