Template for a Participants Database signup form that demonstrates how to disable or enable a field based on the selected value of another field
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* | |
* template for the signup form | |
* | |
* shows an example of letting the selected value of a radio control enable or disable another field | |
* | |
*/ | |
?> | |
<script> | |
jQuery(document).ready(function($){ // this waits until the page is loaded to initialize the function | |
// this is the field that controls the display of the text field | |
var radioField = $('[name=mailing_list]'); | |
// this is the text field we are changing with the script | |
var textField = $('[name=email]'); | |
// define the function that will change the state of the text field | |
var switchState = function(obj){ | |
// check the obj argument, it will either be an element or an action | |
// if it is an action, get the target property | |
// this gives us the element that was clicked on | |
var field = obj.length ? obj : $(obj.target); | |
// this is the text field's container | |
var container = textField.closest('tr.text-line'); | |
switch(field.filter(':checked').val()){ // get the value and act on it | |
case 'No': | |
textField.prop('disabled',true); // disables the email input | |
container.css({opacity:0.5}); // greys out the email input line | |
break; | |
case 'Yes': | |
textField.prop('disabled',false); // enables the email input | |
container.css({opacity:1}); // un-greys out the email input line | |
break; | |
} | |
} | |
// attach the function to the action | |
radioField.on('change',switchState); | |
// set the initial state | |
switchState(radioField); | |
}); | |
</script> | |
<div class="wrap <?php echo $this->wrap_class ?>" > | |
<?php // output any validation errors | |
$this->print_errors(); ?> | |
<?php $this->print_form_head(); // this must be included before any fields are output. hidden fields may be added here as an array argument to the function ?> | |
<table class="form-table pdb-signup"> | |
<?php while ( $this->have_groups() ) : $this->the_group(); ?> | |
<tbody class="field-group field-group-<?php echo $this->group->name ?>"> | |
<?php if ( $this->group->has_fields() && $this->group->printing_title() ) : // are we printing group titles and descriptions? ?> | |
<tr class="signup-group"> | |
<td colspan="2"> | |
<?php $this->group->print_title() ?> | |
<?php $this->group->print_description() ?> | |
</td> | |
</tr> | |
<?php else : ?> | |
<?php endif; // end group title/description row ?> | |
<?php while ( $this->have_fields() ) : $this->the_field(); ?> | |
<tr class="<?php $this->field->print_element_class() ?>"> | |
<th for="<?php $this->field->print_element_id() ?>"><?php $this->field->print_label(); // this function adds the required marker ?></th> | |
<td> | |
<?php $this->field->print_element_with_id(); ?> | |
<?php if ( $this->field->has_help_text() ) :?> | |
<span class="helptext"><?php $this->field->print_help_text() ?></span> | |
<?php endif ?> | |
</td> | |
</tr> | |
<?php endwhile; // fields ?> | |
</tbody> | |
<?php endwhile; // groups ?> | |
<tbody class="field-group field-group-submit"> | |
<tr> | |
<td class="submit-buttons"> | |
<?php $this->print_submit_button('button-primary'); // you can specify a class for the button ?> | |
</td> | |
<td class="submit-buttons"> | |
<?php $this->print_retrieve_link(); // this only prints if enabled in the settings ?> | |
</td> | |
</tr> | |
</tbody> | |
</table> | |
<?php $this->print_form_close() ?> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ths script in this template will undoubtedly need to be modified to work for the specific circumstances in your case, but it can provide a simple framework for this kind of interaction.
Read the documentation on how to set up and use Participants Database shortcode templates.
Once you have the template uploaded and modified for your purpose, use it with
[pdb_signup template=radioselect]