pdb-signup-city-select

<?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>