Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php
/*
* bootstrap template for signup form
*
* demonstrates a simple dependent selector
*
* the cities available for selection are constrained by the selected state
*
*/
?>
<script>
jQuery(function($){
// name of the parent field
var parent = 'state';
// name of the child field
var child = 'city';
// defines the parent selector dropdown
var parent_select = $('select[name='+parent+']');
// defines the child selector dropdown
var child_select = $('select[name='+child+']');
// holds the initial child value
var child_value = '';
// a reset function to clear the child selector and hide all the optgroups
var clear_child = function () {
// save the current child value
child_value = child_select.val();
// clear the child control
child_select.val('').find('optgroup').css('display','none');
}
// this is where we attach our handler to the parent selector
// the handler gets called when the parent selector's value is chosen
parent_select.on( 'change', function() {
// hide any child options that were made visible before
clear_child();
// identify the group that was selected
var selection = $(this).find('option:selected').text();
// find the corresponding optgroup in the child selector
var child_group = child_select.find('optgroup[label*="'+selection+'"]');
// make that one optgroup visible
child_group.css('display','inherit');
// if the child's value is in a visible optgroup, select it
if ( child_select.find('option[value="' + child_value + '"]').is(':visible')) {
child_select.val(child_value);
}
});
// now that everyting is defined, set our initial condition by triggering a state change in the parent selector
parent_select.trigger('change');
});
</script>
<div class="wrap <?php echo $this->wrap_class ?>" >
<?php // this is how the html wrapper for the error messages can be customized
$this->print_errors( '<div class="alert %1$s">%2$s</div>','<p>%s</p>' ); ?>
<?php $this->print_form_head(); // this must be included before any fields are output ?>
<div class="form-horizontal pdb-signup">
<?php while ( $this->have_groups() ) : $this->the_group(); ?>
<fieldset class="field-group field-group-<?php echo $this->group->name ?>">
<?php $this->group->print_title( '<legend>', '</legend>' ) ?>
<?php $this->group->print_description() ?>
<?php while ( $this->have_fields() ) : $this->the_field(); ?>
<?php $feedback_class = $this->field->has_error() ? 'error' : ''; ?>
<div class="<?php $this->field->print_element_class() ?> control-group <?php echo $feedback_class ?>">
<label class="control-label" for="<?php $this->field->print_element_id() ?>" ><?php $this->field->print_label(); // this function adds the required marker ?></label>
<div class="controls"><?php $this->field->print_element_with_id(); ?>
<?php if ( $this->field->has_help_text() ) :?>
<span class="help-block">
<?php $this->field->print_help_text() ?>
</span>
<?php endif ?>
</div>
</div>
<?php endwhile; // fields ?>
</fieldset>
<?php endwhile; // groups ?>
<fieldset class="field-group field-group-submit">
<div id="submit-button" class="controls">
<?php $this->print_submit_button('btn btn-primary'); // you can specify a class for the button ?>
<span class="pdb-retrieve-link"><?php $this->print_retrieve_link(__('Forget your private link? Click here to have it emailed to you.','participants-database')); ?></span>
</div>
</fieldset>
</div>
<?php $this->print_form_close() ?>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment