[pillola] Workaround jQuery per i value dei button in Explorer

[fcaldera]

Issue:

com'è noto in IE 6, 7 se si invia un form attraverso degli elementi <button>, es.

<form ...>
   <button type="submit" name="action" value="action1">label button 1</button>
   <button type="submit" name="action" value="action2">label button 2</button>
   ...
   <button type="submit" name="action" value="action<n>">label button n</button>
</form>

non è possbile recuperare lato server l'attributo 'value' del bottone usato per fare il submit, ma otterremo invece l'innerHTML del pulsante stesso (ovvero "label button...")

Supponendo di non potere (o voler) sostituire i vari button con dei corrispettivi input type "submit", di usare HTML5 e di avere già a disposizione jQuery , ho modificato il form soprastante in questo modo duplicando i value e assegnandoli ad un nuovo attributo

<form ...>
   <button type="submit" name="action" data-button-value="action1" value="action1">label button 1</button>
   <button type="submit" name="action" data-button-value="action2" value="action2">label button 2</button>
   ...
   <button type="submit" name="action" data-button-value="action<n>" value="action<n>">label button n</button>
</form>

e attraverso il seguente script creo dinamicamente per ciascuno dei form in pagina un campo nascosto "_form_action" che valorizzo quando clicco su uno dei pulsanti

$(document).ready(function() {

    $('form').each(function() {
        var f = $(this),
	    b = f.find('button[data-button-value]');

	if (b.length > 0) {
	    var action = $('<input type="hidden" />').attr({
		name		: '_form_action',
		value		: ''
	    });

   	    action.appendTo(f);
	    b.each(function() {
	        $(this).bind('click.setDataButtonValue', function() {
		    action.val($(this).attr('data-button-value'));
	        })
	    })		
        }
    })
});

Lato server mi basta leggere la variabile "_form_action" sapendo che sarà valorizzata identicamente a prescindere dal browser (bacato o meno) che sto utilizzando

Nota1: su explorer $(elementobutton).attr('value') legge comunque l'innerHTML quindi devo per forza duplicare il value

Nota2: ho usato un'attributo data-* perché sto usando HTML5. Niente vieta di cambiarlo a proprio uso e consumo con un altro adatto al doctype della propria pagina


enjoy
-f.

[fcaldera]

Ragionandoci qualche minuto in più ho trovato un modo alternativo per ottenere la stessa cosa senza usare un attributo extra.

mantenendo quindi il codice html iniziale, lo snippet seguente riesce a leggere il valore dell'attributo su IE

$(document).ready(function() {
    $('form').each(function() {		
        var f = $(this),
	    b = f.find('button[value]');
        
        if (b.length > 0) {
	    var action = $('<input type="hidden" />').attr({
		name		: '_form_action',
		value		: ''
	    });
	    action.appendTo(f);
	    b.each(function() {
		$(this).bind('click.setDataButtonValue', function() {
  		    var value = (!!this.outerHTML)
		        ? this.outerHTML.replace(/^.+?\bvalue\s*=\s*(?:['"])(\w+).*$/, 
			    function(tag, valueattr) {
				return valueattr;
			    }) : this.value;
  		    action.val(value);
		})
	    })
	}
    })
})

edit: aggiornamenti a questo snippet
http://pastie.org/1200542