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

otto9due

Utente Attivo
22 Feb 2014
529
21
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?
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
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>
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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:

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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?
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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:

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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..
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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:
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
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.
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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:

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
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>
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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?..
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
Sì, era semplicemente per enfatizzare il fatto che sono comunque elementi diversi.
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
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).
 

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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?
 

WmbertSea

Utente Attivo
28 Nov 2014
208
33
28
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
Autore Titolo Forum Risposte Data
F Problema con funzione cambia password PHP 5
G funzione che cambia pagina al click Ajax 6
P Implementazione funzione FileReader Javascript 0
P Funzione copia multipla. Javascript 2
P Funzione jQuery Ajax invio file a php jQuery 1
A Funzione read URL PHP 6
F Funzione Glob - ricerca file contenente una parola PHP 1
A Mail con funzione mail() riconosciute come spam PHP 9
M Utilizzare la funzione mysql_num_rows() in PHP 5 PHP 3
A funzione iconv () non mi funziona PHP 4
D Come usare funzione php PHP 6
Y verificare condizione dopo esecuzione della funzione Programmazione 0
IClaude Funzione Javascript Javascript 8
A Funzione share come modificarla Social Media Marketing 0
L funzione onclik con seno e coseno non va Javascript 3
L funzione onclick non va Javascript 26
G modifica corretta funzione da eregi() a preg_match() PHP 3
Shyson Modificare funzione php PHP 15
L pdo (stampare un valore con ritorno a funzione) PHP 0
elpirata Funzione conversione da minuti in ore Javascript 0
@ [MS Access] Funzione Iif..is null... Database 0
F Funzione deprecata in PHP7 PHP 1
G [MS Access] Funzione ARROTONDA non definita nell'espressione MS Access 1
max1974 [Javascript] Funzione Errata procedura Javascript 2
pjtertdj Visualizzazione dati in php da mysql con funzione matematica in javascript PHP 1
Domenico_Falco1 Associare una stessa funzione get a due eventi a.click con classi differenti Ajax 6
psicomia Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select" Javascript 2
L Problema funzione mail() PHP PHP 3
elpirata [Javascript] Lo script alle volte funzione altre volte no Javascript 0
V [Visual Basic] Richiamare funzione su modulo per restituire list Visual Basic 0
R [Photoshop] funzione colore automatico Photoshop 0
maxnegri [PHP]Funzione di calcolo prezzo di una camera in un range di date PHP 62
L [PHP] problema count messo in una funzione. PHP 1
Monital funzione php si ripete due volte PHP 6
GiErre [PHP] [HTML] Disabilitare un link in funzione della piattaforma PHP 7
Monital Funzione php e campo database come variabile PHP 6
M Recuperare ID e usarlo in funzione jQuery 2
M PHP - Funzione non e scrive il risultato PHP 3
R [Javascript] Rendere una funzione sempre visibile Javascript 2
M funzione mysql che ritorna i microsecondi a partire dal 1-1-1970 MySQL 3
batmanLF [MySQL] Problema funzione SUM MySQL 1
F [PHP] La funzione setcookie PHP 0
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
otto9due Capire la funzione del parametro event passato alla funzione.. jQuery 1
A [Javascript] tabella dinamica e onchange su funzione Javascript 1
M Problema con connessione MySqli e funzione PHP 2
C [RISOLTO][PHP] Funzione ONclick PHP 14
A [PHP] Problema invio mail con funzione mail() PHP 3
C Creazione di una funzione per il filtraggio dei campi di un db Presentati al Forum 0
C richiamare una funzione in un altro script php PHP 1

Discussioni simili