Funzione cambia attributo input value non funziona.. Un aiutino :D

  • Creatore Discussione Creatore Discussione otto9due
  • Data di inizio Data di inizio

otto9due

Utente Attivo
22 Feb 2014
591
25
28
Ecco la funzione che ho scritto.. Matematico che mi è sfuggita qualcosa..
Sono alle prime armi con jQuery, quindi qualsiasi consiglio o spiegazione in più sono sempre utili. Grazie!
Codice:
    <script type="text/javascript"> 
	$("input[name='inviaconsiglia']").bind('click', function() {
		$("input[name='inviaconsiglia']").attr('value','✔');
		 alert('Prodotto suggerito con successo! Grazie')
	});
	</script>

Nel resto della pagina non ho inserito altro, perchè se ho capito bene dovrebbe riconoscere solo a quale input mi riferisco.. Giusto?
 
Ci sono da considerare diverse cose.
A parte jQuery, non conosco il tuo livello di conoscenza generale di JavaScript e HTML, perciò devo prenderla alla lontana ma cerco di riassumere per quanto possibile.
  1. In un documento html, ogni elemento del DOM (cioè ogni tag) viene creato (ed è quindi presente sulla pagina) nell'ordine in cui è scritto sul documento stesso. Anche per l'elemento script (cioè il blocco di codice compreso tra i tag <script></script>) vige la stessa regola.
    Ora, nel tuo script stai "selezionando" un certo elemento, perciò, nel momento in cui stai facendo riferimento a questo, devi assicurarti che esista (che sia stato creato sulla pagina).
    In generale il tag script può essere scritto (più o meno) in qualunque punto del documento.
    Se tale script è posto dopo l'elemento input a cui fai riferimento, allora questo viene trovato e correttamente selezionato. Se invece il blocco di script si trova prima dell'elemento in questione, lo script viene eseguito prima che l'elemento sia presente sulla pagina, perciò non viene selezionato alcunché.
    Convenzionalmente il tag script viene inserito nel tag head, ma in questo caso, quando lo script deve fare riferimento ad elementi del DOM, è necessario assicurarsi che sia eseguito quando la pagina è pronta (quindi tutti gli elementi sono stati creati).
    In jQuery si utilizza il metodo ready() che può essere scritto in diverse forme. Io solitamente uso la forma $(function(){}).
    Nel tuo script manca questa parte, per cui, se lo script è posto prima dell'elemento input (ad esempio nell'head), allora sicuramente non funzionerà.
  2. Il fatto che tu selezioni un elemento in base all'attributo name, può andare bene. Però è preferibile, in questo caso, utilizzare un id e quindi ottenere una impostazione più ottimale del selettore jQuery (cioè un selettore id).
  3. A meno che tu non stia usando una versione poco recente di jQuery, al posto di bind() è preferibile utilizzare il gestore di eventi on() (è consigliato anche sulla documentazione).
    Nel tuo caso, però, potresti ottimizzare maggiormente lo script usando direttamente il metodo click().
  4. All'interno di una funzione associata ad un gestore di eventi per un determinato elemento (come nel tuo caso), anziché riscrivere l'intero selettore, per far riferimento allo stesso elemento, puoi utilizzare la parola chiave this come selettore. In generale, questo fa riferimento all'elemento a cui è associata la funzione dentro la quale è eseguito tale script.
  5. Per modificare il valore dell'attributo value, puoi utilizzare, in modo più diretto, l'apposito metodo val(), anziché attr('value',...)

Posto un esempio pratico in cui ho rielaborato il tuo script in base ai punti appena considerati:
Codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $("#inviaconsiglia").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>
  </head>
  <body>
    <input type="button" id="inviaconsiglia" name="inviaconsiglia" value="CLICK ME">
  </body>
</html>
 
Devi essere nato con il dono della chiarezza :D..
Purtroppo il mio livello jquery è scarsetto, ma presto comprerò qualche manuale per innalzarlo.. per ora me la "cavicchio" con html php e mysql e css. Vorrei imparare qualcosa in più su questa libreria che mi affascina da paura.. completando l'allegro quadretto!
Detto questo, vorrei anzitutto ringraziarti, perchè grazie al tuo intervento ho capito più di una cosa che fin'ora era poco chiara.. Finalmente ho capito cosa fosse questo "this".. approfitto della tua gentilezza per farti ancora due o tre domandine :confused:.

1) Il this se inserito nell'input cosa passa ad una funzione es:

<input type="button" id="inviaconsiglia" name="inviaconsiglia" value="CLICK ME" onclick="miafunzione(this);">

2) Questa tipologia di funzione $(function(){ quando viene caricata ( dovrebbe essere la formula abbreviata di $( document ).ready(function() { giusto? Quando tutti gli elementi del DOM sono già stati caricati?
E nello specifico dove posso trovare un elenco di tutte le funzioni e del loro caricamento? O comunque imparare a decidere quando usare una e non un'altra?

3) Esistono altri metodi simili a val() per la modifica di altre parti ?

Grazie in anticipo per la pazienza e la gentilezza :D
 
Ultima modifica:
C'è un altro piccolo problema.. in questo modo ho notato che lo script viene eseguito solo una volta..
Nel senso.. ho più prodotti con lo stesso campo.. vorrei che ogni volta che clicco sull'input in questione venga eseguito lo script, non solo per il primo, come posso fare?
 
Ho provato in questo modo dici che è corretto?

Codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $("#inviaconsiglia<?php echo $prodotto['id'];?>").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>
  </head>
  <body>
    <input type="button" id="inviaconsiglia<?php echo $prodotto['id'];?>" name="inviaconsiglia" value="CLICK ME">
  </body>
</html>

Mi sa che devo trovare un altro modo.. perchè il ciclo per le variabili mi parte nel body..
Bisognerebbe associare qualcosa al pulsante stesso.. tipo quel onclick="miafunzione(this); che passi però l'id comprensivo dell'id database inviaconsiglia<?php echo $prodotto['id'];?> Si può fare?
 
Ultima modifica:
Si può fare qualcosa del genere

Codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){ 
        $("#inviaconsiglia + el").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>
  </head>
  <body>
    <input type="button" id="inviaconsiglia" name="inviaconsiglia" value="Ok" onclick="miafunzione(<?php echo $prodotto['id'];?>)>
  </body>
</html>
mi sa che però qui va assegnato il nome alla funzione.. dandole un nome..
 
Neanche questa funziona...

Codice:
    <script type="text/javascript">

      $(function ok(element){
        $("#inviaconsiglia + element").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>


<input type="submit" id="inviaconsiglia" name="inviaconsiglia" value="ok" onclick="ok('<?php echo $prodotto['id']; ?>');">

Forse non ho ben capito come passare valori ad una funzione o anche altro..:crying:
 
Ciao, ti rispondo al volo per il momento.

In quel caso puoi usare l'impostazione col name che hai fatto inizialmente.
Oppure, meglio, puoi usare una classe in questo modo (non l'ho testato):
Codice:
<script type="text/javascript">

      $(function ok(element){
        $(".inviaconsiglia").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>


<input type="submit" class="inviaconsiglia" name="inviaconsiglia" value="ok">

PS: più tardi provo a risponderti a tutto il resto.
 
Ciao, ti rispondo al volo per il momento.

In quel caso puoi usare l'impostazione col name che hai fatto inizialmente.
Oppure, meglio, puoi usare una classe in questo modo (non l'ho testato):
Codice:
<script type="text/javascript">

      $(function ok(element){
        $(".inviaconsiglia").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>


<input type="submit" class="inviaconsiglia" name="inviaconsiglia" value="ok">

PS: più tardi provo a risponderti a tutto il resto.

Intanto ti ringrazio per questo.. Però non mi torna una cosa.. Come farebbe in questo caso il singolo prodotto a richiamare questa funzione specifica.. e sopratutto a passare element ne nell'input non viene passato alla funzione?
Grazie

Dici con la classe perchè può essere uguale in più div?

Così sembra funzionare :beer:
 
Ultima modifica:
Ciao, hai ragione ho fatto un copia/incolla senza controllare bene il tuo script prima di modificarlo come ho indicato.

Ti spiego al volo. Con un selettore jQuery ottieni un un elenco di oggetti jQuery che soddisfano i criteri di ricerca indicati sul selettore stesso. Ogni oggetto ottenuto fa quindi riferimento al relativo elemento sul DOM. Dato un selettore, puoi applicargli un qualsiasi metodo, il quale viene quindi applicato, di fatto, a ciascun oggetto restituito dal selettore. Il criterio di funzionamento dei selettori jQuery è simile a quello utilizzato per i css.

Nel tuo script c'è qualcosa in più che non serve e che peraltro è sbagliata (per la fretta non ho fatto caso).

Rielaborando il tutto:
Codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $(".inviaconsiglia").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>
  </head>
  <body>
    <input type="button" class="inviaconsiglia" name="inviaconsiglia" value="1">
    <input type="button" class="inviaconsiglia" name="inviaconsiglia" value="2">
    <input type="button" class="inviaconsiglia" name="inviaconsiglia" value="3">
  </body>
</html>
 
Ciao, hai ragione ho fatto un copia/incolla senza controllare bene il tuo script prima di modificarlo come ho indicato.

Ti spiego al volo. Con un selettore jQuery ottieni un un elenco di oggetti jQuery che soddisfano i criteri di ricerca indicati sul selettore stesso. Ogni oggetto ottenuto fa quindi riferimento al relativo elemento sul DOM. Dato un selettore, puoi applicargli un qualsiasi metodo, il quale viene quindi applicato, di fatto, a ciascun oggetto restituito dal selettore. Il criterio di funzionamento dei selettori jQuery è simile a quello utilizzato per i css.

Nel tuo script c'è qualcosa in più che non serve e che peraltro è sbagliata (per la fretta non ho fatto caso).

Rielaborando il tutto:
Codice:
<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $(".inviaconsiglia").click(function(){
          $(this).val("✔");
          alert("Prodotto suggerito con successo! Grazie");
        })
      })
    </script>
  </head>
  <body>
    <input type="button" class="inviaconsiglia" name="inviaconsiglia" value="1">
    <input type="button" class="inviaconsiglia" name="inviaconsiglia" value="2">
    <input type="button" class="inviaconsiglia" name="inviaconsiglia" value="3">
  </body>
</html>

Non riesco a capire il motivo per cui assegni valori diversi agli input.. Se il selettore è impostato sulla classe, non capisco cosa possa servire modificare il valore del value?? Sono messi a caso i numeri "1 2 3" .. potevano essere per esempio "ok ok ok" giusto?..
 
Sì, era semplicemente per enfatizzare il fatto che sono comunque elementi diversi.
 
Per complettezza, rispondo agli altri tuoi quesiti.
Partiamo dal principio.
Capisco che ti mancano molte nozioni base, non solo jQuery, ma che racchiudono diverse aree (JavaScript, HTML, CSS) e che sono comunque importanti per poter utilizzare in modo discreto jQuery. Sia chiaro che non puoi apprendere tutte queste nozioni in una discussione su un forum. Per cui ti consiglio, intanto, di studiare il più possibile da manuali o guide, anche online, per poter apprendere quantomeno i principi fondamentali dei vari linguaggi.
Non so se hai fatto caso ma sulla mia prima risposta, per i vari termini significativi, ho messo dei link (quelli sottolineati) che riportano alle relative pagine guida da cui puoi iniziare a studiare.

Ad ogni modo cerco di riassumere quanto chiedi.
1) Il this se inserito nell'input cosa passa ad una funzione es:
<input type="button" id="inviaconsiglia" name="inviaconsiglia" value="CLICK ME" onclick="miafunzione(this);">
Il this è una parola chiave usata in JavaScript, come in diversi altri linguaggi orientati ad oggetti, ed è in genere utilizzata all'interno di un metodo per far riferimento all'oggetto per il quale è invocato tale metodo.

In HTML puoi utilizzare degli eventi (tipo onclick) che sono propriamente eventi del DOM e che, sostanzialmente, possono essere tradotti con i relativi gestori di eventi JavaScript.

Per esempio, l'evento onclick che può essere applicato direttamente sul tag in questo modo:
Codice:
<input id="pulsante" type="button" onclick="alert(this);">
può essere tradotto così in JavaScript:
Codice:
document.getElementById("pulsante").onclick=function(){alert(this);}

Il this farà sempre riferimento all'oggetto da cui è scaturito tale evento, cioè l'elemento del DOM <input id="pulsante">.

2) Questa tipologia di funzione $(function(){ quando viene caricata ( dovrebbe essere la formula abbreviata di $( document ).ready(function() { giusto? Quando tutti gli elementi del DOM sono già stati caricati?
E nello specifico dove posso trovare un elenco di tutte le funzioni e del loro caricamento? O comunque imparare a decidere quando usare una e non un'altra?
Sì, come riportato sulla guida (vedi ready()). Definisce una funzione che viene eseguita quando gli elementi del DOM sono completamente caricati, e quindi disponibili per la manipolazione via script. Le diverse forme sono pressoché identiche nella loro funzione. Giusto in particolari casi, in cui possono verificarsi dei conflitti a livello di codice, è necessario ricorrere ad una forma piuttosto che un'altra. Ad ogni modo, nella normalità, puoi seguire quanto consiglia la guida. Io utilizzo di solito la forma contratta (quella che ho usato nei vari esempi).

3) Esistono altri metodi simili a val() per la modifica di altre parti ?
Vedi la guida. Online ci sono varie documentazioni per vari argomenti nella programmazione con jQuery. Una guida ufficiale è questa. Esistono svariate funzioni per selezionare, filtrare, attribuire valori, creare animazioni, ecc. In qualunque caso è inutile elencarle qui ora. Puoi sempre consultare la documentazione. Nella maggior parte dei casi puoi fare delle semplici ricerca online per essere indirizzato su ciò che ti serve o comunque, se non riesci a trovare ciò che ti serve e magari hai bisogno di un aiuto più specifico, puoi chiedere consiglio sul forum (meglio, però, se in ultima analisi).
 
Guarda non potevi essere più chiaro.. Il mio problema oltre a tanti altri :p era riconoscere bene quel this perchè in php5 lo utilizzo sempre e a quanto pare ha la stessa funzione, ma quello che non mi spiegavo è perchè proprio l'id.. Dall'esempio che hai fatto ora è tutto più chiaro :D

Per il resto che dire .. Presto ordinerò una buona guida su jQuery e cercherò di approfondire questo linguaggio.
Ne avresti qualcuna abbastanza completa in italiano da consigliarmi?
 
Presto ordinerò una buona guida su jQuery e cercherò di approfondire questo linguaggio.
Ne avresti qualcuna abbastanza completa in italiano da consigliarmi?
Quello che so, l'ho appreso nel corso degli anni cercando e studiando da guide e documentazioni online, nonché tenendomi spesso in esercizio sui forum, leggendo varie discussioni e, in vari casi, aiutando a risolvere problematiche di vario genere.
Riguardo guide e manuali cartacei, sono sicuro che qualche altro utente saprà consigliarti meglio di me.
Nel frattempo potresti comunque esercitarti con dei tutorial online. Fai qualche ricerca. Un sito tra tanti http://www.jqueryitalia.org/impara-jquery/.
Ad ogni modo la maggior parte del materiale informatico disponibile online (tra cui jQuery) è fruibile in inglese. E' importante quindi imparare ad avere dimestichezza con l'inglese per poter andare avanti in questo settore, anche se solo per passione.
Chiaramente, i miei, vogliono essere giusto dei consigli.

Buono studio e buon proseguimento.
 

Discussioni simili