5 righe, 5 voti di un radio-button salvati "al volo" con ajax

[albanopower]

Ciao e grazie in anticipo.
Avete qualche risorsa e dritta da darmi per poter fare questo?

Ho una tabella con 5 righe, in ogni riga c'è una domanda a cui è necessari odare una risposta (un voto da 1 a 10).

Attualmente lo so fare con il metodo del FORM in php che manda i dati alla pagina classica save.php etc.

Vorrei però rendere il tutto più usabile e fare in modo che con un "radio button" quando l'utente clicca sul "pallino" del voto questo venisse automaticamente salvato.

Grazie a tutti!

[oly1982]

Se ci dici il problema possiamo aiutarti.
Se vuoi lo script a partire da zero è dura...

[albanopower]

Immaginate 3 radio button con le opzioni:
blu
rosso
verde

vorrei che se un utente clicca "il pallino" rosso, subito venisse salvata l'informaizone nel DB ed apparisse in un un div il testo "informazione salvata correttamente" (o cambiasse lo sfondo della riga per esempio da rosso (non ancora votato) a verde (ok hai votato).

Non mi serve il codice, ma delle dritte per studiare come si possa fare. Il lato php mysql già lo conosco, mi manca la comprensione del DOM e Javascript.

Cerco degli "spunti", tutorial, esempi simili, etc.

Grazie.

[oly1982]

l'evento javascript è onClick (oppure onChange ... prova che non ricordo).

A quel punto fai partire la richiesta ajax.

[albanopower]

Sono riuscito a far "fare qualcosa" al click sull'opzione del RADIO-BUTTON.
Con questa funzione messa tra i tag HEAD:

<script type="text/javascript">
<!--//
function prendiElementoDaId(id_elemento) {
 var elemento;
 if(document.getElementById)
  elemento = document.getElementById(id_elemento);
 else
  elemento = document.all[id_elemento];
 return elemento;
};


function cambiaTesto() {
 prendiElementoDaId('span0').innerHTML = 'testo cambiato';
};

//-->
</script>

E con questo richiamo nell'html del RADIO:


<label><input onclick="cambiaTesto();" name="gender" type="radio" value="male" <?php if($gender=='male'){?>checked="checked"<? }?> /> Male</label></p>


<label><input name="gender" type="radio" value="female" <?php if($gender=='female'){?>checked="checked"<? }?> /> Female</label></p>

Ora devo capire come posso salvare i dati e far appariree un messaggio di salvataggi ocorretto in un DIV.

Qualche suggerimento?

[oly1982]

Il primo suggerimento spassionato è quello di utilizzare Jquery dato che ti potrà semplificare molto la vita... soprattutto quando si tratta di utilizzare ajax.

[albanopower]

Ecco l'avanzamento.,
con questa funzione riesco, dopo aver cliccato sul campo nome a inviare via GET i dati alla pagina php che me li salva nel DB.

NON riesco a mandare come parametro del GET il valore del campo RADIO, se risolvo qiuesto ho risolto la mia esigenza:

<script LANGUAGE="javascript" TYPE="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
document.myForm.time.value = ajaxRequest.responseText;
}
}


//var namevalue=document.getElementsById("radio1"); NON FUNZIONA
ajaxRequest.open("GET", "serverTime.php?t=9", true);
//ajaxRequest.open("GET", "serverTime.php?t="+nomevalue, true); NON FUNZIONA
ajaxRequest.send(null);
}

//-->
</script>

<form name='myForm'>
Name: <input type='text' onclick="ajaxFunction();" name='username' size="45" />

Time: <input type='text' name='time' size="115"/>
<input type="radio" value="6" name="radio1" >6</input>
<input type="radio" value="7" name="radio1" >7</input>
<input type="radio" value="8" name="radio1" >8</input>
<input type='text' name='radio' id="radio1" size="115"/>
</form>

[albanopower]

Perchèèèèèèè, sto impazzendoooo

perchè questo funziona e mi salva il 9 nella tabella:

// ajaxRequest.open("GET", "serverTime.php?t=9", true); FUNZIONA

Mentre questo non mi vaaaaaa

namevalue=document.getElementById("radio1");
ajaxRequest.open("GET", "serverTime.php?t="+nomevalue, true);

dove:
<form name='myForm'>
Name: <input type='text' onclick="ajaxFunction();" name='username' size="45" />

Time: <input type='text' name='time' size="115"/>
<input type='text' name='radio' id="radio1" size="115"/>
</form>

[albanopower]

Ero riuscito a farlo andare ma SENZA dichiarare il DOCTYPE.
Se però non dichiaro il DOCTYPE sul browser IE graficamente mi si impalla tutto.

Se metto il doctype, come per esempio uno di questi:
//<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

con chrome mi funziona ma con FIREFOX non mi funziona più.
Come mai?

Come sono difficili queste cose in ajaX!!!

[oly1982]

Originariamente inviato da oly1982
Il primo suggerimento spassionato è quello di utilizzare Jquery dato che ti potrà semplificare molto la vita... soprattutto quando si tratta di utilizzare ajax.

... mi auto-quoto...