I can't find anything in the docs about creating a "reset" button on a form using the new forms API in 4.7

I've tried:

'#type' => 'reset'
'#type'=>'button', '#button_type' => 'reset'

And anything else I could think of. I also searched the form.inc file for the words "clear" or "reset" and came up empty handed...

Comments

pwolanin’s picture

Just looking at the APi, i don't see an obvious way to do it, and I agree that's a problem. However, take a look at node.module and node_filter_form_submit(). In setting up the admin/content page there seem to be multiple submit buttons.

for example:

    $form['filters']['buttons']['reset'] = array('#type' => 'submit', '#value' => t('Reset'));

which is then used:

function node_filter_form_submit() {
  global $form_values;
  $op = $_POST['op'];
  $filters = node_filters();
  switch ($op) {
    case t('Filter'):
    case t('Refine'):
      if (isset($form_values['filter'])) {
        $filter = $form_values['filter'];

        // Flatten the options array to accommodate hierarchical/nested options.
        $flat_options = form_options_flatten($filters[$filter]['options']);

        if (isset($flat_options[$form_values[$filter]])) {
          $_SESSION['node_overview_filter'][] = array($filter, $form_values[$filter]);
        }
      }
      break;
    case t('Undo'):
      array_pop($_SESSION['node_overview_filter']);
      break;
    case t('Reset'):
      $_SESSION['node_overview_filter'] = array();
      break;
  }
}

Probably if you have a "reset" button that causes no action upon submission, you'd effectively get a reset. However, this isn't going to work (I think) if there are any required fileds in the form. Hmmm.

Also, take a look at node_page(), which is where the "Delete" button's action gets processed.

---
Work: BioRAFT

pwolanin’s picture

I think you can just stick the markup in your form for a reset button where you want it:

    $form['reset'] = array ('#value' => '<input type="reset" value="Reset!">');

Maybe not kosher, but I don't see any other way.

---
Work: BioRAFT

StephanieFuda’s picture

Thanks this worked for me :)

I love Drupal. Always.

Rajender Rajan’s picture

The code is working fine,it reseting all webform fields but the problem is that the Reset Button is displaying at every page wherever we had a textbox field.How to get rid off with such problem.

dman’s picture

When, in real life, have you ever had the need for a button to wipe away everything you just entered in a form?
You can refresh the page, push the back button, or close the window if you've decided you really don't want to save the stuff you've entered so far.

Reset is pointless. It's a widget left over from the early days of the web and has no place in a world of dynamic web applications.

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

AltaVida’s picture

When, in real life, have you ever had the need for a button to wipe away everything you just entered in a form?

I agree that 99% of the time it's not needed, but what about this situation:

Go to Google, click on 'advanced search', enter some miscellaneous options and perform the search. Once you're done reviewing the results, and you want to do a different (advanced) search, click on the 'advanced search' link again. Note: your form is pre-filled with your previous search criteria. You now have to manually reset everything you don't need. A reset button would make sense here IMHO, because there is no obvious way to start a fresh new search (unless I'm missing something). For that matter, check out how many options you can fill on Yahoo's advanced search page.

This example is identical to my situation: users can return to advanced search to tweak their previously entered search or start a new one. I can't see how making users manually clear all the fields, reset the dropdowns and uncheck checkboxes does them any favors. If you have an alternative suggestion I'd like to hear it.

Anyways, here's how I did it (using an image button btw):

$form['reset'] = array(
  '#value' => "<a href='#' onclick=\"document.getElementById('theform').reset();\"><img src='clear-button.gif' ></a>");	
dman’s picture

your form is pre-filled with your previous search criteria. You now have to manually reset everything you don't need. A reset button would make sense here

You'd think so, wouldn't you?
But look at the HTML.
What 'Reset' the HTML widget does is reset the values to the ones specified in the page code. It doesn't 'clear', it returns to the original state. Client-side.

SOooo. If your helpful search interface is re-populating the fields with your last search, a traditional reset button will not help.
That's maybe why they (and any state-aware html form application) leave it off.

I agree that a 'clear' button would be useful in your example, but it would have to be scripted, not the HTML1.0 thing.
So, your onclick example is nice, and mostly correct, but (unless things are implimented wrongly) the reset() function should re-set the field to the value it was in when the page loaded. If your form is anything like the 'Advanced Search' examples you gave, You may be wanting to loop and set element.value="";

.dan.
How to troubleshoot Drupal | http://www.coders.co.nz/

AltaVida’s picture

Ahhhh. Okay that makes sense. I would have to loop through and reset all the values to null as you said. Thanks for taking the time to explain that.

Yes, 'reset' is truly useless!

rksadit’s picture

hi,
can you please help me how to loop through and reset all the values to null ? do we need to write onclick function?
sorry im new to it, can you please tell me how the syntax will be?
My code is ,
$form['actions']['reset']= array(
'#type' => 'submit',
'#value' => 'reset'

);

olliemuh’s picture

Reset is not used at all on the consumer side. But lets face it, for admin forms, reset is pretty valuable. Data entry by some marketing temp person will pretty much require the reset button a couple of times. Refresh is a good idea, except that it takes time to reload the page, soooooooooooo it's a bit easier on the backside. Which is actually the only reason I am looking at this topic, making a product entry form.

Andy Galaxy’s picture

... if you need to reset exposed filters? A reset button makes sense then.

dman’s picture

So as to get exactly the same effect as pressing 'refresh'?
reset will set your filters to the way they were when you loaded the page - it will not clear them.

.dan.

copyhold’s picture

you may use for defining custom button types your own TEMPLATENAME_button function (place it in template.php file). Get all the code from form.inc (theme_button) under /includes and put it in your template.php. Simple check of element type will give you button type you want.

regx’s picture

Well, I was a little discouraged when reading this post, but with the information posted here and some trial and error I managed.

Using the breadcrumb to reload the page worked fine so this wasn't needed - as stated in the post, but I was asked to add it and needed to find a way. Noticing that the node module uses multiple form buttons, I used that as a template.

Basically add the button to the form, and add an #after_build property to the form

$form['#after_build'] = array('node_form_add_reset');

In the function designated by #after_build, you can see what button was pressed

function node_form_add_reset($form) {
  global $form_values;
  $op = isset($_POST['op']) ? $_POST['op'] : '';
  if ($op == t('Clear')) {
  	 drupal_goto("profile/");
  }
  else{
  	return $form;
  }
}

Here, I am simply reloading the page.

And here is the complete code - note, this form is being rendered at the top of a page so it is a little different.
Hope this helps!

function profile_form_filter($fields,&$form_values){

  $filter_options = array();
    foreach ($fields as $field) {
      $filter_options[$field->name] =$field->title;
    }
    
      $form = array('fields'=>array( ) );
      $form['fields']['group1'] = array(
    	'#type' => 'fieldset',
    	'#title' => t('Search'),
    	'#collapsible' => TRUE,
    	'#collapsed' =>   FALSE,
    	'#theme' => 'profile_form_filter_search_group',
      );
     $form['fields']['group1']['filterfield'] = array(
     	'#type' => 'select',
     	'#title' => t('Search for'),
     	'#default_value' => arg(1),
     	'#options' => $filter_options,
    	'#description' => t('The Field you with to search.'),
     );
     
      $form['fields']['group1']['filterstring'] = array(
    	'#type' => 'textfield',
    	'#title' => t('Filter Text'),
	'#default_value' => arg(2),
	'#size' => 30,
    	'#maxlength' => 100,
    	'#description' => t('The text you wish to search for.'),
    	);

	 $form['fields']['group1']['submit'] = array(
		'#type' => 'submit',
		'#value' => t('Go'),
	 );
	 $form['fields']['group1']['clear'] = array(
		'#type' => 'button',
		'#value' => t('Clear'),
	 );
	 $form['#method'] = 'POST';
         $form['#after_build'] = array('node_form_add_reset');
  
  $out.=  drupal_get_form('profile_form_filter', $form);
  return $out;
}

function node_form_add_reset($form) {
  global $form_values;
  $op = isset($_POST['op']) ? $_POST['op'] : '';
  if ($op == t('Clear')) {
  	 drupal_goto("profile/");
  }
  else{
  	return $form;
  }
}

function profile_form_filter_submit($form_id, $form_values){
 $arg1 = $form_values['filterfield'];
 $arg2 = $form_values['filterstring'];
 drupal_goto("profile/$arg1/$arg2");
}

function theme_profile_form_filter_search_group($form){
	$output = "";
	$output .= '<table class="form filter"><tr><td>'; 
	$output .= form_render($form['filterfield']);
	$output .= '</td><td>'; 
	$output .= form_render($form['filterstring']);
	$output .= '</td><td>'; 
	$output .= form_render($form['submit']);
	$output .= '</td><td>'; 
	$output .= form_render($form['clear']);
	$output .= '</td><tr></table>'; 
	$output .= form_render($form);
	return $output;
}

My personal Drupal site.
http://www.regx.dgswa.com/html/index.php

SocialNicheGuru’s picture

I have been looking for this button

http://SocialNicheGuru.com
Delivering inSITE(TM), we empower you to deliver the right product and the right message to the right NICHE at the right time across all product, marketing, and sales channels.

danielb’s picture

here's another reset button

  $form['clear'] = array(
    '#name' => 'clear',
    '#type' => 'button',
    '#value' => t('Reset'),
    '#attributes' => array('onclick' => 'this.form.reset(); return false;'),
  );

this will restore the original values of the form when the page was loaded

mathankumarc’s picture

$form['clear'] = array(
'#name' => 'clear',
'#type' => 'button',
'#value' => t('Reset'),
'#attributes' => array('onclick' => 'this.form.reset(); return false;'),
);

this produces error in internet explorer 8.

Error Details:

this.form is null or not an object