Conditional Form Fields

TiG
@tig
6 years ago
184 posts

Anyone have a good practice for creating a form field that is enabled based upon an entered value in another field on the same form? For example, imagine having two fields that are both optional. Lets call them penalty_message and penalty_points. If the user enters a value in penalty_message we would want to reveal the penalty_points field to accept a now required integer value. Otherwise the penalty_points field would be hidden (or disabled).

( This is a simple contrived example. )

Of course one can show both fields as optional and handle problems in _save validation logic but that is not ideal. Much better to prevent the user from entering a value in (or even see) the penalty_points field unless it makes sense to use the field.

--
TiG
updated by @tig: 09/13/18 06:35:11PM

@michael
6 years ago
7,715 posts

You'll need to make your own custom module and have it register its own custom form field. Then you can use javascript to turn on/off the fields as they are needed.

Take a look at the jrTags/include.php file it registers a Form Field that uses javascript.

This goes in its _init() function to register,

    // form field
    jrCore_register_module_feature('jrCore', 'form_field', 'jrTags', 'tags');

Then you will find all the code making it go down the bottom of the file.

To see other instances of form fields registered do a codebase search for

_display($_field, $_att = null)

to see the _display function for each form field. all of the form fields will have that one, but sometimes have others like _validate() _assembly() and others to help get it into the right shape.

TiG
@tig
6 years ago
184 posts

Michael

Excellent. Glad I asked. I will check this out - conditional form fields would be a great thing to have in my toolkit.

Thanks!

--
TiG

SteveX
@ultrajam
6 years ago
2,584 posts

If you just want to show/hide fields depending on value you can add javascript to the form.
The field name will be the field's id, and the table row you want to show/hide is the parents parent. There is more to do if it's an image field etc, but for most field types this:

	$_options = array(
		'show' => 'show',
		'hide' => 'hide'
	);
    $_tmp = array(
        'name'      => 'mymodule_show_hide',
        'label'     => 'show or hide the checkbox field',
        'help'      => 'help!',
        'type'      => 'select',
        'options'	=> $_options,
        'required'  => false
    );
    jrCore_form_field_create($_tmp);
    
    // Checkbox shown or hidden depending on above
    $_tmp = array(
        'name'      => 'mymodule_target',
        'label'     => 'check this',//777
        'help'      => 'check this help',//777
        'type'      => 'checkbox',
        'default'   => 'off',
        'validate'  => 'onoff'
    );
    jrCore_form_field_create($_tmp);

    $_tmp = array('
    if ($("#mymodule_show_hide").val() == "hide") {
		$("#mymodule_target").parent().parent().hide();
		$("#mymodule_target").val("off");
    }
    $("#mymodule_show_hide").change(function(){
    	if ($(this).val() == "hide") {
			$("#mymodule_target").parent().parent().hide();
			$("#mymodule_target").val("off");
    	} else {
			$("#mymodule_target").parent().parent().show();
    	}
    });
    ');
    jrCore_create_page_element('javascript_ready_function',$_tmp);

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

TiG
@tig
6 years ago
184 posts

SteveX,

Adding javascript to the form is exactly what I would prefer to do. This little tidbit:

jrCore_create_page_element('javascript_ready_function',$_tmp);

is extremely helpful.

Thanks!

--
TiG

TiG
@tig
6 years ago
184 posts

SteveX

Created a reusable function based on your solution. Works perfectly. Thanks much for your help.

TiG

--
TiG