Articoli con Tag ‘form’

Personalizzare graficamente un Form

Mi è stato chiesto come personalizzare graficamente un form, in particolare un form di ricerca come quello presente su questo blog. La tecnica utilizzata, o meglio che utilizzo io, è ovviamente valida per qualsiasi tipo di modulo form. Quello che cambia è solo la complessità del lavoro da svolgere in funzione della complessità del form stesso.

Continua...

WordPress: categorie in dropdown

Premetto che stiamo parlando di WordPress 2.0.6. Se cercate di impostare le categorie in modalità “combo” – dropdown – occhio alle indicazioni proposte sul sito di WordPress. Quando si realizza una FORM HTML con un bottone SUBMIT bisogna stare attenti a non impostare il nome del TAG INPUT proprio a “submit”, pena mandare in rovina tutto appena si cerca di submittare la FORM via Javascript.

Sul sito di WordPress viene proposto il seguente codice:

1
2
3
4
5
6
<li id="categories">
<?php _e('Categories:'); ?>
<ul><li>
<form action="<?php echo $PHP_SELF ?>" method="get"> <?php dropdown_cats(); ?> <input type="submit" name="submit" value="view" /> </form>
</li></ul>
</li>

Notate che il bottone di invio ha l’attributo name impostato a “submit”. Se cercate di esguire una codice Javascript tipo questo:

1
document.forms.nomeform.submit();

L’interprete va in confusione in quanto non distingue il metodo submit() dall’elemento “submit” che è invece un bottone! La soluzione è semplice: chiamate il bottone come vi pare ma non “submit”!

Il codice che ho usato per visualizzare le categorie in dropdown mode io è il seguente:

1
2
3
4
5
<div id="cmb_months">
<form name="xcats" id="xcats" action="/index.php" method="get">
<?php dropdown_cats(); ?>
</form>
</div>

Ho dovuto anche modificare il Kernel di WordPress (cosa che non andrebbe fatta…). Nel file “template-functions-category.php” ho modificato la funzione dropdown_cats() quando prepara il TAG SELECT ho aggiunto:

1
onchange="document.forms['xcats'].submit();"

Ecco il pezzo di codice da rintracciare:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$categories = $wpdb->get_results($query);
echo '<select name="cat" class="postform" onchange="document.forms[\'xcats\'].submit();">'."\n";
if ( intval($optionall) == 1 ) {
  $all = apply_filters('list_cats', $all);
  echo "\t<option value='0'>Seleziona una Categoria</option>\n";
}
if ( intval($optionnone) == 1 )
  echo "\t<option value='-1'>".__('None')."</option>\n";
if ( $categories ) {
  foreach ( $categories as $category ) {
    $cat_name = apply_filters('list_cats', $category->cat_name, $category);
    echo "\t<option value=\"".$category->cat_ID."\"";
    if ( $category->cat_ID == $selected )
      echo ' selected="selected"';
    echo '>';
    echo $cat_name;
    if ( intval($optioncount) == 1 )
      echo '&nbsp;&nbsp;('.$category->cat_count.')';
    if ( intval($optiondates) == 1 )
      echo '&nbsp;&nbsp;'.$category->lastday.'/'.$category->lastmonth;
    echo "</option>\n";
  }
}
echo "</select>\n";

Una cosa che la funzione non fa è impostare il combo sulla categoria scelta quando viene ricaricata la pagina… appena ho tempo lo guardo meglio.

Come nota a tutto ciò, per esigenze di completezza, sottolineo che bisognava agire con un codice non intrusivo (Unobtrusive) invece di inserire l’onchange direttamente nella costruzione del combo. Inoltre le categorie visualizzate con il combo non sono accessibili per i browser con Javascript disabilitato. Tuttavia questo lo si può risolvere utilizzando il TAG NOSCRIPT nella sidebar e visualizzare le categorie come lista di link – modalità di default di WordPress – aggiustamenti che farò a breve ;) .

Continua...


Stop SOPA