Web

HTML, form, input e button: viva la diversità!

Per eseguire il submit delle form HTML si può procedere in due modi:

• utilizzando il tag input
  <input type=”submit” name=”conferma” value=”OK” />
• o il button
  <button name=”conferma” value=”1″>OK</button>

Recentemente preferisco utilizzare il button perché può contenere altri tag html come img o br, quindi si ha la possibilità di rendere selezionabile un’area più complessa rispetto al tradizionale input.

Per un mio lavoro, avevo la necessità di utilizzare contemporaneamente più bottoni per il submit di una form e, a seconda del bottone premuto, realizzare funzionalità differenti. Così ho inserito 4 button con lo stesso nome ma con value differenti:

<button name=”conferma” value=”1″>FUNZ 1</button>
<button name=”conferma” value=”2″>FUNZ 2</button>
<button name=”conferma” value=”3″>FUNZ 3</button>
<button name=”conferma” value=”4″>FUNZ 4</button>

convinto che, al submit di uno di essi, in php avrei potuto leggere l’array $_POST e conoscere la funzione richiesta in base al valore assunto da $_POST['conferma'].

Magari!!!

Ecco cosa ottengo in $_POST in base al browser utilizzato, se per esempio premo il terzo bottone:

Firefox e Opera
$_POST['conferma'] = 3. Perfetto!

Internet Explorer 7
$_POST['conferma'] = FUNZ 3
Praticamente non viene restituito il contenuto del value, ma il testo presente tra i tag button.

Internet Explorer 6
$_POST['conferma'] = FUNZ 4. Sempre peggio

IE6 restituisce tutti i bottoni presenti nella form e non solo quello premuto. Poiché i 4 bottoni hanno tutti lo stesso nome, restituisce solo l’ultimo in base all’ordine di apparizione nella form (come avviene normalmente quando ci sono 2 tag input con lo stesso nome).

Morale della favola?

Se il comportamento strano era solo quello di IE7, potevo sempre aggirare il problema lavorando un pò in php per risalire all’effettivo value. Ma per come si comporta IE6, nemmeno dare nomi differenti ai bottoni risolverebbe il problema, perché al submit li riceverei tutti indistintamente e non potrei risalire a quello effettivamente selezionato.

Alla fine ho usato Javascript, realizzando una funzione che alla pressione di uno dei bottoni modifica il contenuto di un campo hidden.