Disabled JS input (Select, User, …) Save as empty

• feyfey

• May 1, 2018 at 2:55 am

Hi all,

I have several user roles on my website and depending on which role their have user can only see/edit a portion of form field (option page or custom post type). In order to easily change the edit rules, I add two settings for each field type “user_roles_can_see” and “user_roles_can_edit” with the “acf/render_field_settings” function.

Exemple for the edit setting :

add_action('acf/render_field_settings', 'edit_render_field_settings');

function edit_render_field_settings( $field ) {
	// Get all existing user role - managed in an option page
	if (have_rows('roles', 'option')) {
		while( have_rows('roles', 'option') ){
			the_row();
			$id_role = get_sub_field('id_role', 'option');
			$choices[$id_role] = get_sub_field('nom_role', 'option');
		}
	}
	// Add general choices
	$choices['administrator'] = 'Administrateur';
	$choices['all'] = 'Tous';
	// Add the settings with dynamical choices
	acf_render_field_setting( $field, array(
			'type' => 'select',
			'label' => 'Editable par',
			'name' => 'user_roles_can_edit',
			'instructions'	=> 'Select user role - Can edit the field.',
			'required' => 0,
			'default_value' => array('all'),
			'choices' => $choices,
			'multiple' => true,
			'ui'			=> 1,
	), true);
}

To disabled the field when user can’t edit it, I used the “acf/prepare_field” function (also used to return FALSE if user can’t see the field). I used the readonly setting and if needed ( JS field) I add a new wrapper class (to create a JS selector) and some JS to disabled the input.

In exemple I turn all field type to text type and change the readonly setting. If the user can edit a repeater field I remove with JS the actions button :

add_filter('acf/prepare_field', 'edit_prepare_field');

function edit_prepare_field( $field ) {
	global $current_user;
	$current_role = $current_user->roles;
	$type = $field['type'];
	$wrapper = $field['wrapper'];
	$width = $wrapper['width'];
	$class = $wrapper['class'];
	$name = $field['key'];
	$value = $field['value'];
	$choice = $field['choices'];
	if (isset($field['user_roles_can_edit']) && !empty($field['user_roles_can_edit']) && is_array($field['user_roles_can_edit'])) {
			foreach ($field['user_roles_can_edit'] as $role) {
				if ($role != 'all' && !in_array($role, $current_role)) {
					switch ($type) {
						case 'repeater':
							$class='disabled_repeater';
							$field['readonly'] = 1;
							$field['wrapper'] = array('width'=> $width,'class'=>  $class);
							break;
						default:
							$field['type'] = 'text';
							$field['readonly'] = 1;
							break;
					}
				} elseif ($role = 'all' || in_array($role, $current_role)) {
					$field['type'] = $type;
					$field['wrapper'] = array('width'=> $width,'class'=>'');
					$field['readonly'] = 0;
					break;
				}
			}
	}
	return $field;
}

function read_only_field_javascript() {
	if ( !is_admin() ) { return; } // applicable uniquement sur le wp-admin
	?>
	<script type='text/javascript'>
		( function ( $ ) {
		$( document ).ready( function () {
			$('.disabled_repeater .acf-actions a[data-event="add-row"]').remove();
			$('.disabled_repeater .remove a[data-event="add-row"]').remove();
			$('.disabled_repeater .remove a[data-event="remove-row"]').remove();
		});
	  }( jQuery ) );
	</script>
	<?php
}
add_action( 'admin_footer', 'read_only_field_javascript' );

This “tricks” works fine but I have a big issue with field type like : Select field type with advenced interface. If I disabled the select input :

add_filter('acf/prepare_field', 'edit_prepare_field');
function edit_prepare_field( $field ) {
	...
	case 'user':
		$field['wrapper'] = array('width'=> $width,'class'=> 'disabled_user');
		$field['readonly'] = 1;
		break;
	...
	return $field;
}

function read_only_field_javascript() {
	...
	$('.disabled_user select').prop('disabled','disabled');
	...
}

And save update when this field is disabled : I’ll have a empty value on the refresh page. (unlike for a date picker which works fine) I saw, Select field type with advanced interface is strangely coded (it’s not just a select input). So my question : How can I correctly disabled a JS advenced interface select field type (User, Select, Post object, etc.) in order to not change the database value when page is saved

Thanks a lot to who may help (or juste took time to read).

• feyfey

• May 3, 2018 at 3:10 am

I found a solution by myself. Some input type as Chekbox type have an additional hidden input so I need to disabled all the input used by ACF.

Exemple for Chekbox :

add_filter('acf/prepare_field', 'edit_prepare_field');
function edit_prepare_field( $field ) {
	...
	case 'checkbox':
		$field['wrapper'] = array('width'=> $width,'class'=> 'disabled_checkbox');
		$field['readonly'] = 1;
		break;
	...
	return $field;
}

function read_only_field_javascript() {
	...
	$('.disabled_checkbox select').prop('disabled','disabled');
        $('.disabled_checkbox input').prop('disabled','disabled');
	...
}

User field is more complex (use <span> for exemple) and can’t be disabled by the previous methode, some other like gallery can really be disabled so I change the field type to “enhanced_message” and display the value with some PhP.