How to remove default 'search' text form search form

Question

I can't seem to figure out how to get rid of the default text "search" on my search form (located here: http://dev.mysourcewise.com/media-center)

I can confirm the following works in Chrome's console:

jQuery("#edit-search-block-form--2").val("");

However, when I try adding it using Drupal.behaviors or even with the following code in my theme's template.php file, it doesn't work (even though I can confirm the javascript is loaded in the footer):

  drupal_add_js('jQuery(document).ready(function () { jQuery("#edit-search-block-form--2").val("");',
array('type' => 'inline', 'scope' => 'footer', 'weight' => 1000)
 );

I have tried other methods as well, and nothing is working except entering the the above in the browser console.

Answer 1

The Search text in input is created by jQuery from any where. When I search through the JavaScript files, I find the following file:

file : /sites/default/modules/hg/sw_tweaks/js/sw_tweaks.js

The code

//Search Bar @ Top of Home Page
    $(function () {
      $('#edit-search-block-form--2').val("search");
    });
    jQuery('#edit-search-block-form--2').click(function () {
      jQuery('#edit-search-block-form--2').val('');
    });

Try to remove this code. I hope this helps you or help you finding the problem.

Answer 2

A good way to do this is to alter the search form via hook_form_FORM_ID_alter(), which can be added either in a theme template.php file or in a .module file.

/**
 * Implements hook_form_FORM_ID_alter().
 *
 */
function YOURTHEMENAME_form_search_block_form_alter(&$form, &$form_state) {
  $form['search_block_form']['#title'] = t('Something'); // Change the label text. 
}

It is also possible to replace the submission button with an image.

/**
 * Implements hook_form_FORM_ID_alter().
 *
 */
function YOURTHEMENAME_form_search_block_form_alter(&$form, &$form_state) {
  $form['search_block_form']['actions']['submit']['#type'] = 'image_button';
  $form['search_block_form']['actions']['submit']['#src'] = 'path/to/image';
}

Answer 3

It seems that the default placeholder text is set using javascript (probably from the parent theme). This can be easily checked by disabling javascript and loading the demo page again.

A dirty way to deal with ypur problem:

drupal_add_js('jQuery(window).
  load(function(){ 
    jQuery("#edit-search-block-form--2").val("");
  });',
  array('type' => 'inline', 'scope' => 'footer', 'weight' => 1000)
);

This will use the window.load event, that will - hopefully - run your code snippet after the theme's javascripts.

Good luck!

P.S.: Of course, the best way to go about this would be to check how the theme's javascripts work and figure out if there is some attribute (probably the title one) that is used to set the value of the placeholder.

Answer 4

Rather than using jquery to replace the text better use hook_form_alter.

function YOURTHEME_form_search_block_form_alter(&$form, &$form_state, $form_id) {
    $form['search_block_form']['#title'] = t('Text you want'); // Change the text on the label element 
}

Answer 5

An alternative to altering the template variables is to override the template file.

Switch on template debug to see what template is used in the HTML comments.

Copy that template to your theme folder and change whatever you like.

To tell Drupal about the new template, you must execute drush cr.

Answer 6

Use THEMENAME_form_alter() in sites/all/themes/THEME/template.php. Place this code in this file.

function THEMENAME_form_alter(array &$form, array &$form_state = array(), $form_id = NULL) {
    if ($form_id) {
        switch ($form_id) {
            case 'search_block_form':
                $form['search_block_form']['#attributes']['placeholder'] = t('Search');
        }
    }

Obviously, THEMENAME word will be replaced name of theme you use. After placing this code please clear cache.

Answer 7

Combining previous answers:

-use the hook form alter (looking at the site, it is indeed the search-block-form), as Jonathan Dalgaard suggested.

-set the 'placeholder' attribute, as usmanjutt84 suggested.

function THEMENAME_form_search_block_form_alter(&$form, &$form_state, $form_id) {
  $form['search_block_form']['#attributes']['placeholder'] = t('Enter search term');
}