By Tarkesh on

How to add a Reset Button in Enquiry Form if anyone know pls reply me

⋅ Categories: Drupal 6.x

Comments

nico heulsen’s picture

nico heulsen commented

With the hook hook_form_alter, you can alter the form and add an extra button to it.
Give it an ID an attach javascript to it, to reset all fields.

http://api.drupal.org/api/function/hook_form_alter/6

sri20198’s picture

sri20198 commented

For reasons, we have to modify the webform using the tpl.php file. How to add the reset button in the template file?

This is how my webform template code looks:


<?php
  // If editing or viewing submissions, display the navigation at the top.
  if (isset($form['submission_info']) || isset($form['navigation'])) {
    print drupal_render($form['navigation']);
    print drupal_render($form['submission_info']);
  }

?>
<table cellpadding="0" cellspacing="0" border="0">
<?php
  // Print out the main part of the form.
  unset($form['submitted']['name']['#title']);
  unset($form['submitted']['e_mail']['#title']);
  unset($form['submitted']['contact_number']['#title']);
  unset($form['submitted']['skill_set']['#title']);
  unset($form['submitted']['attach_resume']['#label']);

  print '<tr><td>Name: <span class="form-required" title="This field is required.">*</span></td>';
  print '<td>'.drupal_render($form['submitted']['name']).'</td></tr>';
  print '<tr><td>Email: <span class="form-required" title="This field is required.">*</span></td>';
  print '<td>'.drupal_render($form['submitted']['e_mail']).'</td></tr>';
  print '<tr><td>Contact Number: <span class="error">*</span></td>';
  print '<td>'.drupal_render($form['submitted']['contact_number']).'</td></tr>';
  print '<tr><td>Skill Set: <span class="error">*</span></td>';
  print '<td>'.drupal_render($form['submitted']['skill_set']).'</td></tr>';
  print '<tr><td>Attach Resume: <span class="form-required" title="This field is required.">*</span></td>';
  print '<td>'.drupal_render($form['submitted']['attach_resume']).'</td></tr>';
  print '<tr><td>&nbsp;</td>';
  print '<td>'.drupal_render($form['submit']).'</td></tr>';

  // Always print out the entire $form. This renders the remaining pieces of the
  // form that haven't yet been rendered above.
  print drupal_render($form);
?>
</table>
<?php

  // Print out the navigation again at the bottom.
  if (isset($form['submission_info']) || isset($form['navigation'])) {
    unset($form['navigation']['#printed']);
    print drupal_render($form['navigation']);
  }
?>

Thanx in advance.

nico heulsen’s picture

nico heulsen commented

You have to do it before you render it. Create a custom module (or in case you have already one), implement the hook_form_alter and check if it is a webform, add the button and assign an id to it. You can then add some javascript to clear all the formelement when clicked on the button.

Some dummy code:

function mymodule_form_alter(&$form, $form_state, $form_id){
  if($form_id == 'your_webform_id_or all'){
    drupal_add_js(path_to_javascript or define inline javascript);
    $form['reset'] = array(
      '#type' => 'button',
      '#value' => t('Reset'),
      '#id' => 'my-form_id',
      some more params....
    );
  }
}
dman’s picture

dman commented

Do you really think a Reset button will help your UI? Probably not.
It's been dropped from HTML and ignored by Drupal Form API for ages.

.dan. is the New Zealand Drupal Developer working on Government Web Standards

sri20198’s picture

sri20198 commented

I agree with you. But then when the client insists, I have to.
Thank you for your pointer.

Sridhar

asiby’s picture

asiby commented

Where are you guys getting your information from? Follow this link to see the HTML5 specs about the form button's type attribute. It clearly shows that the type attribute can be set to reset in order to "Reset the form".

Whether having a form reset bottom is a good idea or not ... or whether an HTML tag should be deprecated or not is not all all up to something like Drupal to decide.

The bottom line is that at the end of the day, it's my clients that are paying me. If they want a button to reset a form, then I will give them that damn button if it's technologically feasible. And in this case, it is.

Live long ... and prosper!

asiby’s picture

asiby commented

The way done this is by adding the following code that you need to add in my theme's template.php file.

/**
 * Overrides theme_button()
 */
function [YOUR THEME NAME]_button($variables) {
  $element = $variables['element'];
  $attributes = array('id', 'name', 'value');
  if (!empty($variables['element']['#attributes']['type'])) {
    $attributes[] = 'type';
  } else {
    $element['#attributes']['type'] = 'submit';
  }
  element_set_attributes($element, $attributes);
  $element['#attributes']['class'][] = 'form-' . $element['#button_type'];
  if (!empty($element['#attributes']['disabled'])) {
    $element['#attributes']['class'][] = 'form-button-disabled';
  }

  return '&lt;input' . drupal_attributes($element['#attributes']) . ' /&gt;';
}

After that, you I have altered the form in my custom module using the following ...

/**
 *  Implements hook_form_FORM_ID_alter()
 */
function [MY MODULE]_form_webform_client_form_69_alter(&$form, &$form_state) {
  $form['#attributes']['novalidate'] = 'novalidate';
  $form['actions']['reset'] = array(
    '#type' => 'button',
    '#value' => t('Reset'),
    '#weight' => 100,
    '#validate' => array(),
    '#attributes' => array(
      'type' => 'reset',
    ),
  );
}

If you want, you can make this more generic for all the web_forms by using the much broader hook_form_alter().

I hope this helps.

Live long ... and prosper!

RAWDESK’s picture

RAWDESK commented

This neat form alter allows a form reset without even reloading the page, simply by executing the javascript reset() function on click :

function <module>_form_alter(&$form, $form_state, $form_id) {
  if (strpos($form_id, 'webform_client_form_') === 0) {
    $form['actions']['reset'] = array(
      '#type' => 'button',
      '#value' => t('Reset form'),
      '#weight' => 10,
      '#validate' => array(),
      '#attributes' => array('onclick' => 'this.form.reset(); return false;'),
    );
  }
}

Worked for me like a charm.

asiby’s picture

asiby commented

It's neat indeed. But it makes it depend on JavaScript.

Live long ... and prosper!

RAWDESK’s picture

RAWDESK commented

Hi,
From a user perspective, i believe this is a justified method.
Compare it with a classic pencil eraser, that you wonna keep as close as possible to your examination form before handing it over to the professor.
http://previews.123rf.com/images/zimmytws/zimmytws1408/zimmytws140800010...

Javascript offers clientside comfort services. If you deny it, comfort is gone... and not only in this feature.

Are you still supporting IE6 ? I am not.