By ctuxboy on

Hello,

I have a views exposed filter 'search field', and i want add the html5 'placeholder' (with the name="Gemeente") attribuut in the search field, but where can i find the function of this search-field?
And how can I override that?
I will do this on my site http://www.market-locator.com/. The theme on this site is a omega_subtheme.
It's my first time to try developing/overriding a function, but I don't know where to find the functions for exposed filter?

I think to find functions install Devel and place the functions in template.php? Is this right?
Is there a good tutorial to learn the basics how overriding functions?

Christophe

⋅ Categories: Drupal 7.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Its not real clear which form field you are talking about, but all forms are just that, forms, so you can use hook_form_alter() to modify most forms.

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
ctuxboy’s picture

ctuxboy commented

Jeff,

Is there a good tutorial how can I add the placeholder-attribute on the input field for my exposed filter?

The View-name i want to theme the exposed filter is 'search-results' and the name of the input-field is 'title'.

Is there a good tutorial of hook_form_alter() for theming forms?

Hope you can help me?

pjman50’s picture

pjman50 commented

Any luck with finding a tutorial for adding the placeholder-attribute on the input field?

ctuxboy’s picture

ctuxboy commented 
function mmsearchresults_form_alter(&$form, &$form_state, $form_id){
  if($form_id == "views_exposed_form"){
    dsm($form); // print $form array on the top of the page
    if (isset($form['title'])) {
			$form['title'][] = array('#placeholder' => t('Gemeente...'));
    }
  }
}

But how can I add a extra attribute? In the code above, i try to add the 'placeholder'-atribute to the inputfield 'title' but it don't work!

Jeff Burnz’s picture

Jeff Burnz commented

Its hard for me to say without being able to see the form array, i.e the output of dsm($form)

placeholder is an attribute.

something like this

$form['myform']['myform_element']['#attributes'] = array('placeholder' => array(t('Gemeente...')));
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Guillermo Cerezo Somera’s picture

Guillermo Cerezo Somera commented

Thx!

mastermindg’s picture

mastermindg commented

Just to clarify, here is the complete working code:

function mmsearchresults_form_alter(&$form, &$form_state, $form_id){
  if($form_id == "views_exposed_form"){
    dsm($form); // print $form array on the top of the page
    if (isset($form['title'])) {
            $form['title']['#attributes'] = array('placeholder' => array(t('Gemeente...')));
    }
  }
}

## Note: The above code is fictitious. Any resemblance to real or actual working code is purely coincidental.

smartsystems160’s picture

smartsystems160 commented

Thanks for posting this code, it worked perfectly for me. Just to clarify, the "title" is the name of the exposed filter, in my case, mine was "combine" (Can be found by right-clicking the form on firefox or google chrome and clicking "inspect element"). Also, dsm($form) produced errors so i removed it.

Also, i used this code in my template.php file so the function can be adjusted to:

function yourtheme_form_alter(&$form, &$form_state, $form_id) .... change "yourtheme" to the name of your theme.

System Lord’s picture

System Lord commented

Hi, thank you for this code! I havent got it working yet, but still...thank you! I'm trying to find the "name of the exposed filter." I see form id, section id, bunch of classes. I'm not sure what "name" i'm looking for :) Its an exposed search filter i'm trying to identify. Where did your "combine" come from?

Update: Got it!

Thank you again!

This is kinda hidden. Open the filter and at the bottom there's a "more" fieldset. Expand and there is "Filter identifier." 

function sky_form_alter(&$form, &$form_state, $form_id) {
  if($form_id == "views_exposed_form") {
    dsm($form); // print $form array on the top of the page
    if (isset($form['keys'])) {
            $form['keys']['#attributes'] = array('placeholder' => array(t('Enter search term')));
    }
  }
}
hockey2112’s picture

hockey2112 commented

Hi, the module code worked for most fields for me; however, one field it didn't work on is a "is between" filter field. The field names are field_listprice_value[min] and field_listprice_value[max]. If I use either of those as the field name in the code above, it simply does not show any placeholder. How can I get a placeholder to appear in these fields?

=============edit===============

Found the solution!!! (here: https://www.drupal.org/node/2280069#comment-8844805)

      if (isset($form['field_listprice_value']['min'])) {
        $form['field_listprice_value']['min']['#attributes'] = array('placeholder' => array(t('Min Price')));
      }
      if (isset($form['field_listprice_value']['max'])) {
        $form['field_listprice_value']['max']['#attributes'] = array('placeholder' => array(t('Max Price')));
      }
ashutosh1629’s picture

ashutosh1629 commented

use following code

function mytheme_form_alter(&$form, &$form_state, $form_id){
  if($form_id == "views_exposed_form"){// not to be changed form_id 
    if (isset($form['title'])) {                       //title is name attribute value of input
      $form['title']['#attributes'] = array('placeholder' => array(t('sample')));
    }
  }
}

It worked for me

druderman’s picture

druderman commented

Views exposed forms have the $form_id of 'views_exposed_form', so you may also need to filter by the View and Display Id.
This worked for me.

  if ($form_id == 'views_exposed_form' && $form['#id'] == 'views-exposed-form-my-view-and-display-id') {
    if (isset($form['keys'])) {
       $form['keys']['#attributes'] = array('placeholder'=> array(t('Search documents')));
    }
  }
ShaneOnABike’s picture

ShaneOnABike commented

Thanks for posting this since I'm not a huge fan of JS used to do something that is supposed to be HTML5!

Here's a mod and improvement to your code. It essentially pulls the label directly from views that you have set, uses that, and then it removes the label ;). ALSO it loops through any fields that you have set and carries this out so it eleviates the issue of having to find the proper field.

function YOUR_MODULE_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'views_exposed_form' && $form['#id'] == 'views-exposed-form-shop-page') {
    // Set placeholders for known search fields
    $infos = $form['#info'];
    foreach ($infos as $key => $filter) {
      $label = $filter['label'];
      unset($form['#info'][$key]['label']);
      $form[$filter['value']]['#attributes'] = array('placeholder' => array($label));
    }
  }

}
waqarit’s picture

waqarit commented

it worked for me. thanks

vrwired’s picture

vrwired commented

To add to this topic, I also had a views exposed filter 'search field' that I wanted default input to read something like 'Search...'. I wanted this default 'Search...' text to clear when user clicked into the search box to perform search. Here's tips on how to accomplish:

  1. turn on theme_debug (https://www.drupal.org/node/223440#theme-debug) and view source to locate filter tpl. You should see something like: BEGIN OUTPUT from 'sites/all/modules/contrib/views/theme/views-exposed-form.tpl.php'
  2. copy that file to your theme folder
  3. insert below code above <?php tag (you may need to inspect your search box and modify the id to correspond - in my case the search box id was 'edit-search-api-views-fulltext'
  4. be sure to clear your cache to have system pick up on new tpl 
<script type="text/javascript">
   (function ($) {
    $(document).ready(function() {

   var swap_val = [];

   $("#edit-search-api-views-fulltext").each(function(i){
       swap_val[i] = $(this).val();
       $(this).focus(function(){
           if ($(this).val() == swap_val[i]) {
               $(this).val("");
           }
       }).blur(function(){
           if ($.trim($(this).val()) == "") {
               jQuery(this).val(swap_val[i]);
           }
       });
   });


   });
   })(jQuery);
</script>

Also I never did actually end up using HOOK_form_alter. I just set that in the view's exposed filter settings for "Value".

icf-vpathak’s picture

icf-vpathak commented

@vrwired Thank you for the detailed explanation. Was able to achieve the necessary result.

vrwired’s picture

vrwired commented

I later updated my code back to using hook_form_alter as another module had conflict with the javascript I previously posted. Nonetheless, to help anyone else this is how I did it:

1) Go to your theme and find template.php
2) Turn on devel module.
3) Insert the following function and determine what your exposed filter is named (be sure to replace [theme_name] and clear drupal cache):

function [theme_name]_form_alter(&$form, &$form_state, $form_id) {
dpm($form);
  if (isset($form['search_api_views_main'])) {
    $form['search_api_views_main']['#attributes'] = array('placeholder'=> array(t('Ask a Question')));
  }
}

4) After you find the name of your exposed filter from dpm($form) output, you can replace 'search_api_views_main' and should work for you.

I like this solution better anyway as it uses the HTML5 placeholder attribute.

rdy4ever’s picture

rdy4ever commented

I ended up using a bit o jQuery to make use of the label text as a placeholder.
This is the code:

jQuery(function($){
	var search_label=$(".[view-class] .views-exposed-widget label").text();//replace [view-class] with the class of your view
	search_label=search_label.replace(/ +(?= )/g,'');//for some reason there are some multiple spaces in the label text that need to be cleaned
	$(".[view-class] .views-exposed-widget .form-text").attr("placeholder",search_label);//I use bootstarp theme but you can replace .form-text with the class of your input type
});

And just hide the original label using css.

dlaufer’s picture

dlaufer commented

I tried to get this to work a million ways (Drupal 7 in 2017) and this is what finally worked for me:

function MYMODULE_date_popup_process_alter(&$element, &$form_state, $context) {
  if ($form_state['complete form']['#form_id'] == 'views_exposed_form') {
    $form_state['complete form']['field_event_date_value2']['value']['#default_value'] = "";
    $form_state['complete form']['field_event_date_value2']['value']['#attributes'] = array('placeholder' => array(t('End Date')));
  }
}

It wouldn't work without overriding the #default_value first, as I guess it did not let the placeholder show.

philsward’s picture

philsward commented

https://www.drupal.org/project/form_placeholder