background image

Content tagged with: form_alter

Adding a node preview to the node delete confirmation page

Eric's picture
Submitted by Eric on Tue, 05/27/2008 - 10:26

This code snippet will add a collapsible fieldset containing a preview of the node you are attempting to delete.

<?php
function MYMODULE_form_alter($form_id, &$form) {
  if ($form_id == 'node_delete_confirm') {
    $form['nodePreviewFieldset'] = array(
      '#type' => 'fieldset',
      '#title' => 'Preview',
      '#weight' => 10,
      '#collapsed' => TRUE,
      '#collapsible' => TRUE,
    );
   
    $form['nodePreviewFieldset']['nodePreview'] = array(
      '#value' => node_view(node_load(arg(1)), TRUE, FALSE, FALSE)
    );
  }
}
?>

Here's a screenshot:

Adding terms and conditions to the user registration form

Eric's picture
Submitted by Eric on Fri, 05/16/2008 - 08:25

The following will show you how to add a terms and conditions form element and admin settings page to display a required terms and conditions form element on the user registration form. First, I added an admin settings page.

<?php
function MYMODULE_admin_settings_form() {
  $form = array();
  // ...code...
  $form['MYMODULE_terms_conditions'] = array(
    '#type'             => 'textarea',
    '#title'            => t('Terms and Conditions'),
    '#default_value'    => variable_get('MYMODULE_terms_conditions', ''),
    '#required'         => FALSE,
  );
  // ...code...
  return system_settings_form($form);
}
?>

Next, I modified the user registration form.

<?php
function MYMODULE_form_alter($form_id, &$form) {
  // ...code...
  if ($form_id == 'user_register') {
    $terms = variable_get('MYMODULE_terms_conditions', '');
    if (strlen($terms)) {
      // add terms and conditions
      $form['terms'] = array(
        '#type'    => 'checkbox',
        '#required' => TRUE,
        '#weight' => 9,
        '#title' => "I agree to the <a id='termsAndConditionsLink'>terms and conditions</a><div style='display:none;' id='termsAndConditionsText'>$terms</div>",
      );
    }
  }
  // ...code...
}
?>

Lastly, I added some jQuery to my module's javascript include file.

<?php
$(document).ready(function(){
  $('a#termsAndConditionsLink').click(function() {
    if ($('div#termsAndConditionsText').css('display') == 'none') {
      $('div#termsAndConditionsText').slideDown();
    } else {
      $('div#termsAndConditionsText').slideUp();
    }
  });
});
?>

Displaying an image preview on the delete node confirmation page

Eric's picture
Submitted by Eric on Fri, 04/25/2008 - 14:09

I created an image node type using the CCK module imagefield. Here is how you can show a preview of the image being deleted on the confirmation page...

<?php
function MYMODULE_form_alter($form_id, &$form) {
  // ...code...
  if ($form_id == 'node_delete_confirm') {
    _MYMODULE_form_alter_node_delete_confirm_user_image($form);
  }
  // ...code...
}

function _MYMODULE_form_alter_node_delete_confirm_user_image(&$form) {
   
  // NOTE: This function assumes the file system path is set to private, which is needs to be for this application
   
  $node = node_load(arg(1));
  if ($node->type != 'user_image') return;
   
  $maxDimension = 300;
  $imagePath = file_create_path($node->field_user_image[0]['filepath']);

  // NOTE: this is a simple function I created that accepts 2 parameters (an image page and a maximum dimension) and it returns resized image dimensions
  $imageDimensions = _MYMODULE_images_resize($imagePath, $maxDimension);
   
  // create image html
  $img = "<img style='margin: 25px;' width='{$imageDimensions['width']}' height='{$imageDimensions['height']}' src='/system/files/" . $node->field_user_image[0]['filename'] . "' />";
   
  // add image to form
  $form['image_preview'] = array(
    '#value'    => $img,
    '#weight'    => 10,
  );
   
}
?>

Here's a screenshot...

Replacing the Confirm Delete Node Cancel Links with Buttons

Eric's picture
Submitted by Eric on Fri, 04/25/2008 - 11:25

Here is a way to globally replace all the cancel links on the confirm delete node pages...

<?php
function MYMODULE_form_alter($form_id, &$form) {
  // ...code...
  if ($form_id == 'node_delete_confirm') {
    _MYMODULE_form_alter_node_delete_confirm($form);
  }
  // ...code...
}

function _MYMODULE_form_alter_node_delete_confirm(&$form) {
  if (is_array($form['actions']['cancel'])) {

    // convert the html from the link into an xml object to get at its attributes       
    $o = simplexml_load_string($form['actions']['cancel']['#value']);

    // replace the link with a new button
    // NOTE: jQuery is added afterwards to convert the button type from a submit to a button       
    $form['actions']['cancel'] = array(
      '#type' => 'button',
      '#value' => 'Cancel',
      '#attributes' => array(
        'onClick' => "window.location = '" . urldecode($o['href']) . "';",
      ),
      '#suffix' => "
        <script type='text/javascript'>
          $(document).ready(function(){
            $('form#node-delete-confirm input#edit-cancel').attr('type', 'button');
          });
        </script>"
    );
  }
}
?>

Adding a Password Strength Meter to the User Edit Form (using a Google API)

Eric's picture
Submitted by Eric on Tue, 04/22/2008 - 09:29

Here is the code I used to add a password strength meter to the user edit form.

First, I added a menu item that will be used by AJAX to process the user's password. The path will be used like this: http://MYWEBSITE/passwordStrength/USERPASSWORD. As you can see in the callback arguments, the remainder of the query string after the first "/" is passed into the callback function.

<?php
function MYMODULE_menu() {
  $items = array();
  // ...code...
  $items[] = array(
    'path' => 'passwordStrength',
    'callback' => 'MYMODULE_passwordStrength',
    'type' => MENU_CALLBACK,
    'access' => TRUE,
    'callback arguments' => array(array_pop(explode("/",$_REQUEST['q'],2))),
  );
  // ...code...
  return $items;
}
?>

Here's the callback function. It returns an integer to the screen with no theming.

<?php
function patient_portal_callback_passwordStrength($password) {
   
  // NOTE: "SSL: Fatal Protocol Error" occurring
  // echo file_get_contents('https://www.google.com/accounts/RatePassword?Passwd=' . $password);
   
  // NOTE: google will return 1-4

  // check for invalid password
  if (strlen($password)==0 || !$password) {
    echo 1;
    die;   
  }
   
  // using CURL to fetch website result
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/accounts/RatePassword?Passwd=' . urlencode($password));
  curl_exec($ch);   
  curl_closE($ch);
   
  die;

}
?>

The next part is modifying the user edit form using the form_alter hook.

<?php
function MYMODULE_form_alter($form_id, &$form) {
  // ...code...
  if ($form_id == 'user_edit') {

    // add weights to current account form elements
    if (isset($form['account']['name'])) $form['account']['name']['#weight'] = 1;
    if (isset($form['account']['mail'])) $form['account']['mail']['#weight'] = 2;
    if (isset($form['account']['pass'])) $form['account']['pass']['#weight'] = 3;
    if (isset($form['account']['status'])) $form['account']['status']['#weight'] = 5;
    if (isset($form['account']['roles'])) $form['account']['roles']['#weight'] = 6;
       
    // create html for password meter
    $passwordMeterHtml = "
      <div id='passwordMeterFormItem' class='form-item'>
        <label>
          <span id='passwordStrengthLabel'>Password Strength:</span>
          <span id='passwordStrengthDescription'></span>
        </label>
        <table id='passwordMeter'>
          <tr>
            <td id='barLeft'></td>
            <td id='barRight'></td>
          </tr>
        </table>
      </div>
    ";
       
    // add form "element"
    $form['account']['passwordMeter'] = array(
      '#value' => $passwordMeterHtml,
      '#weight' => 4,
    );
       
    // add js to password input
    $js = "
      $(document).ready(function(){
        $('form#user-edit #edit-pass-pass1').keyup(function(e){
                   
          if (this.value.length) {
            $.ajax({
              type: 'GET',
              url: '/passwordStrength/' + this.value,
              success: function(passwordCode){
                switch (passwordCode) {
                  case '1':
                    word = 'Weak';
                    break;
                  case '2':
                    word = 'Fair';
                    break;
                  case '3':
                    word = 'Good';
                    break;
                  case '4':
                    word = 'Strong';
                    break;
                }
   
                // remove td classes
                $('table#passwordMeter td#barLeft').removeClass();
                $('table#passwordMeter td#barRight').removeClass();
                               
                // add td classes
                $('table#passwordMeter td#barLeft').addClass(word);
                $('table#passwordMeter td#barRight').addClass(word);

                // set description
                $('span#passwordStrengthDescription').html(word);
                $('span#passwordStrengthDescription').removeClass();
                $('span#passwordStrengthDescription').addClass(word);
              }
            });                   
          } else {
            // remove td classes
            $('table#passwordMeter td#barLeft').removeClass();
            $('table#passwordMeter td#barRight').removeClass();
                       
            // set description
            $('span#passwordStrengthDescription').html('');
            $('span#passwordStrengthDescription').removeClass();
          }
        });
      });
    ";
    drupal_add_js($js, 'inline');

  }
  // ...code...
}
?>

Lastly, I added some CSS

div#passwordMeterFormItem {
  width: 210px;
}

table#passwordMeter {
  width: 100%;
  height: 10px;
  margin: 0;
  clear: both;
}

span#passwordStrengthLabel {
  float: left;
}

table#passwordMeter tbody, table#passwordMeter tr {
  border: none;
}

table#passwordMeter td {
  padding: 0;
  height: 10px;
}

table#passwordMeter td#barLeft {
  background-color: #e0e0e0;
  width: 0%;
}

table#passwordMeter td#barRight {
  background-color: #e0e0e0;
  width: 100%;
}

table#passwordMeter td#barLeft.Weak {
  width: 25%;
  background-color: #AA0033;
}

table#passwordMeter td#barRight.Weak {
  width: 75%;
}

table#passwordMeter td#barLeft.Fair {
  width: 50%;
  background-color: #FFCC33;
}

table#passwordMeter td#barRight.Fair {
  width: 50%;
}

table#passwordMeter td#barLeft.Good {
  width: 75%;
  background-color: #6699CC;
}

table#passwordMeter td#barRight.Good {
  width: 25%;
}

table#passwordMeter td#barLeft.Strong {
  width: 100%;
  background-color: #008000;
}

table#passwordMeter td#barRight.Strong {
  width: 0%;
}

span#passwordStrengthDescription {
  display: block;
  float: right;
}

span#passwordStrengthDescription.Weak {
  color: #AA0033;
}

span#passwordStrengthDescription.Fair {
  color: #FFCC33;
}

span#passwordStrengthDescription.Good {
  color: #6699CC;
}

span#passwordStrengthDescription.Strong {
  color: #008000;
}

Here's a screen shot...