button dentro form: TypeError: miaFunzione is not a function

[Andrea22php]

Ciao a tutti,
ma come è mai possibile che in un pannello di controllo non posso gestire i button dentro un form passando delle variabili a js?

Faccio l'esempio di un bottone generato dinamicamente con php:

. "<button id='test".$i++."' type='button' name='elimina' value='".$arrQuery['id']."' onclick=\"elimina(".$arrQuery['id'].", 'delServizioIntCliente', ".$arrNums.");\" class='FR BOTT'><span title='elimina' class='fa fa-times fa-1x' aria-hidden='true'></span></button>" 

Qualcuno di voi sa darmi delucidazioni in merito?
Io non posso portare questo button fuori dal form per farlo funzionare, è impropobibile!

[KillerWorm]

Ciao,
risposta breve:

la causa è data dal valore usato per l'attributo name di quel button (cioè il valore elimina) che evidentemente è lo stesso usato per definire il nome della tua funzione che appunto stai cercando di richiamare sull'onclick di quel button.
Dovresti usare nomi differenti.

Risposta dettagliata:

Sui moderni browser, per i form e i loro elementi sono definite delle variabili a livello di script che fanno riferimento proprio ai relativi name (e in diversi browser anche agli id). I form e i relativi elementi sono quindi gestiti via JavaScript come dei normali oggetti contenenti delle relative proprietà, per cui sono accessibili utilizzando la sintassi a punti.

A livello globale puoi accedere ad esempio al tuo button usando una roba del genere:

document.tuoform.tuobutton;

Se tu però sei già dentro il form, cioè stai usando dello script ad esempio sull'onclick di un elemento dentro il form (come nel tuo caso), puoi accedere direttamente all'elemento usando il suo name come variabile, perché l'ambito di visibilità (scope) è quello del form.

Cosa succede nel tuo codice?
Presumo tu abbia definito la funzione elimina() a livello globale, per cui è di fatto una variabile accessibile da qualsiasi posizione all'interno dello script. Dentro il form hai però nominato il tuo button usando proprio quello stesso nome variabile; avviene quindi che nello scope del form, cioè a livello locale, quella variabile fa riferimento esattamente al button.

Prova infatti a fare un log di quella variabile proprio sull'onclick di quel button:

onclick="console.log(elimina);"

Nella console ti salterà fuori non la funzione, definita a livello globale, ma esattamente l'elemento button di quel form.

Ovviamente mettendo il button fuori dal form, lo scope è quello globale, per cui la variabile elimina fa riferimento alla tua funzione.

Morale della favola, l'uso di nomi "generici" è sintomo di cattiva programmazione. Il consiglio è di utilizzare sempre dei nomi autoesplicativi.

Ad esempio, il tuo button potrebbe essere nominato come btn_elimina_record, mentre la tua funzione potrebbe chiamarsi eliminaRecordTabellaServizi (o robe del genere).

Usando delle convenzioni per una buona programmazione si evitano molti problemi insidiosi simili a questo.
Chiaramente sono solo dei consigli generali.

Buon proseguimento.