Ciao, ho bisogno di uno che conosca ajax.
Eccovi il codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.chotels.it/script/mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript">
window.addEvent('domready',function(){
var celle = $$('.cliccabile'); //prendo tutti <td> e li metto nell'array 'celle'
function colora(e){ //dichiaro una funzione che colora l'elemento passato
if(e.flag==1) //se l'elemento passato è già colorato (1)
{
e.setStyle('background-color','white'); //rimettilo bianco
e.flag=0; //e segna che l'elemento adesso è bianco
} else //altrimenti
{
e.setStyle('background-color','green'); //mettilo verde
e.flag=1; //e segna che ora è verde
}
}
celle.addEvent('click',function(){ //quando clicco una cellla
colora(this); //colora la cella stessa
});
$('submit').addEvent('click',function(){ //quando clicco "spara"
ics=$('x').value;yps=$('y').value; //prendo il valore del campo x e y e li metto in due variabili apposite.
num=10*(yps-1)+(ics-1); //calcolo qual è la cella, in pratica se metto 2 2, sarebbe la cella numero 12
questacella=celle[num]; //prendi il 12esimo (esempio) elemento dell'array di tutte le celle
colora(questacella); //colora quella cella
});
}); //fine
</script>
</head>
<body>
<html>
<h2> Campo di gioco Giocatore 1 </h2>
<table border="2" cellpadding="20" bordercolor="blue">
<?php
for($i=0;$i<10;$i++)
{ echo "<tr>";
for($j=0;$j<10;$j++)
{ echo "<td class='cliccabile'></td>";}
echo "</tr>";}
?>
</table>
<form action="insertXY.php" method="POST">
<h2> Form di caricamento navi </h2>
Nave: <select name="nave">
<option value="Sottomarino"> Sottomarino 1 cella </option>
<option value="Sommergibile"> Sommergibile 2 celle </option>
<option value="Incrociatore"> Incrociatore 3 celle </option>
<option value="Portaerei"> Portaerei 4 celle </option>
<option value="Cacciatorpediniere"> Cacciatorpediniere 5 celle </option>
</select>
Pos x: <input id="x" type="text" name="x">
Pos y: <input id="y" type="text" name="y">
Codice Giocatore: <select name="codGioc">
<option value="1"> 1 </option>
</select>
<span id="submit"> Posiziona </span>
<input type="submit" name="tasto" value="CARICA">
</form>
</html>
</body>
</html>
In pratica io ho una tabella html 10x10 in cui si accendono delle celle a seconda dei valori di x e y che io scrivo nel form. Sotto al form c'è uno span di nome "Posiziona" in cui se ci clicco sopra mi accende la cella. Sotto a questo span c'è un bottone di nome "Carica" un submit che serve a fare la insert dei campi del form (vedere codice) in una tabella del database. Ora il problema si verifica quando clicco sul tasto carica perchè mi fa il refresh della pagina. Nel senso che io compilo il form tutto, clicco posiziona e mi accende la cella, clicco su carica mi fa la insert nella tabella del database, mi mostra una pagina di successo della insert poi quando torno indietro per accendere un'altra cella la cella che avevo precedentemente acceso non c'è più. In pratica io devo fare la insert cliccando su carica senza che si verifichi il refresh così da cancellarmi la cella prima che era accesa.
Rispondi quotando
