Discussion :

[Bovino]

Tu as lu le tuto et pour toi, il y est indiqué que pour passer des paramètres dans une requête, il faut utiliser setRequestHeader() ?

[totot]

Je vois rien d'autre

[Invité]

Je t'ai donné la méthode (et le CODE) dans ma précédente réponse.

[totot]

Oui mais j'arrive pas à récup la note pour l'insérer dans ma table

[Invité]

Et si tu montrais TON code ??

[totot]

Voilà ce que j'ai:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
onload = function(){
  init();
};
// --------------
var StarOutSrc = 'images/starOut.png';
var StarOnSrc = 'images/starOver.png';
var n = 5;
// --------------
function init(){
	var html = '';
	for (i=0; i<n; i++){
		id = i+1;
		html += '<img src="'+StarOutSrc+'" ';
		html += 'id="star" value="off" ';
		html += 'onMouseOver="over('+id+');" ';
		html += 'onMouseOut="out('+id+');" ';
		html += 'onClick="on('+id+')"/></a>'
	}
	document.getElementById("note").innerHTML = html;
}
// --------------
function over(nb){
	elemClassement = document.getElementById("note");
	tabImg = elemClassement.getElementsByTagName("img");
 
	if (nb > 0){
		for (i=0; i<nb; i++){
			tabImg[i].src = StarOnSrc;
		}
	}
	for (i=nb; i<n; i++){
		tabImg[i].src = StarOutSrc;
	}
}
// --------------
function out(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOutSrc;
  }
  for (i=0; i<n; i++){
    if (tabImg[i].value == "on")
       tabImg[i].src = StarOnSrc;
    }
  }
// --------------
function on(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOnSrc;
    tabImg[i].value="on";
  }
  for (i=nb; i<n; i++){
    tabImg[i].src = StarOutSrc;
    tabImg[i].value = "off";
  }
  // ICI, on peut lancer une procédure AJAX
  // -> pour enregistrer la valeur en BdD
  notationAjax(nb);
 
}
// --------------
function notationAjax(nb){
	var xhr = getXhr()
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
		if(xhr.readyState == 4 && xhr.status == 200){
//			alert(xhr.responseText);
			document.getElementById("notechoisie").innerHTML = 'Vous avez choisi : '+nb;
		}
	}
	xhr.open("GET","newfree.php", true);
	xhr.send('note='+nb); // on transmet la note
}
// --------------
 
// Création de l'objet XmlHttpRequest
	function getXhr(){
	var xhr = null; 
	if(window.XMLHttpRequest){ // Firefox et autres
		xhr = new XMLHttpRequest(); 
	} else if(window.ActiveXObject){ // Internet Explorer 
		try {
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	} else { // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="note" name="cls"></div>
<div id="note"></div>

Il me dit qu'il ne trouve pas ma variable $note dans la requete.
Tout est sur la même page: le javascript, le php et le formulaire

[Invité]

Moi, j'avais écrit :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="note" name="cls"></div>
<div id="notechoisie"></div>

Tu ne vois pas une différence avec ton code ?

Tout est sur la même page: le javascript, le php et le formulaire

Tu n'as manifestement RIEN compris à Ajax !
Ou probablement PAS LU le tuto...

Ajax fait appel à une PAGE EXTERNE (php) qui renvoie ensuite un résultat dans la page en cours, SANS rechargement.

Où est le code de newfree.php ???

[totot]

Tout ce qui est en javascript, je le met donc a part?

[totot]

newfree:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<form role="form" id="creerfree" action="" method="post">
          <fieldset>
            <legend><h2>Créer un free<h2></legend>
 
            <?php
              if (count($_POST)==0):
                // le tableau $_POST est vide = cas de la demande du formulaire
                // dans ce cas on initialise les variables de travail 
                $nom= "";
                $prenom= "";
                $note= "";
              else:         
 
 
                extract($_POST); // Récupère les valeurs du formulaire
 
$note = $_GET['note'];
 
$req1 = "insert into free (nom, prenom, note) 
                           values(:unNom, :unPrenom, :uneNote)";
 
                  $res1 = $connexion->prepare($req1);
 
                  $res1->execute(array(':unNom'=>$nom, 
                                       ':unPrenom'=>$prenom, 
                                       ':uneNote'=>$note));
  if ($connexion->prepare($req1)==true):
                    ?>
                      <div class="alert alert-success">
                          <p><strong>Votre free a été créé !</strong></p>
                          <p>Vous avez ajouté le free : <strong><?php echo $nom;?></strong> !</p>
                      </div>
                    <?php
                  else:
                    ?>
                      <div class="alert alert-danger">
                          <p><strong>Un problème est survenu lors de l'enregistrement du free.</strong></p> 
                          <p>Vérifiez votre saisie et réessayez. Je vous remercie.</p>
                      </div>
                    <?php
                  endif;
                endif;
            ?>
 
            <div class="form-group">
              <label for="name">Nom du free<span class="help-required"></span></label>
              <input type="text" name="nom" id="nom" value="" class="form-control required" role="input" aria-required="true" />        
            </div>
 
            <div class="form-group">
              <label for="name">Prénom</label>
              <input type="text" name="prenom" id="prenom" value="" class="form-control" role="input" />  
            </div>
 
			<div class="form-group">
				<label for="name">Note</label>
        <div class="row">
          <div class="col-md-6 col-md-push-3">
<div id="note" name="cls"></div>
<div id="notechoisie"></div>
          </div>
        </div>
</div>	
            <div class="actions">
              <input type="submit" value="Créer le free" name="submit" id="submitButton" class="btn btn-primary" title="Cliquez ici pour créer!" />
              <input type="reset" value="Effacer le formulaire" class="btn btn-danger" title="Retirez toutes les données du formulaire." />
            </div>
          </fieldset>

[Invité]

... Bon...
AJAX n'EST PAS la solution dans ton cas...
Ce qu'on ne pouvait pas deviné, vu que tu n'as pas jugé utile de nous donner le contexte...

DANS TON CAS : il faut remplir un <input type="hidden" .../> avec la VALEUR (note).

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
onload = function(){
  init();
};
// --------------
var StarOutSrc = 'images/starOut.png';
var StarOnSrc = 'images/starOver.png';
var n = 5;
// --------------
function init(){
	var html = '';
	for (i=0; i<n; i++){
		id = i+1;
		html += '<img src="'+StarOutSrc+'" ';
		html += 'id="star" value="off" ';
		html += 'onMouseOver="over('+id+');" ';
		html += 'onMouseOut="out('+id+');" ';
		html += 'onClick="on('+id+')"/></a>'
	}
	document.getElementById("note").innerHTML = html;
}
// --------------
function over(nb){
	elemClassement = document.getElementById("note");
	tabImg = elemClassement.getElementsByTagName("img");
 
	if (nb > 0){
		for (i=0; i<nb; i++){
			tabImg[i].src = StarOnSrc;
		}
	}
	for (i=nb; i<n; i++){
		tabImg[i].src = StarOutSrc;
	}
}
// --------------
function out(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOutSrc;
  }
  for (i=0; i<n; i++){
    if (tabImg[i].value == "on")
       tabImg[i].src = StarOnSrc;
    }
  }
// --------------
function on(nb){
  elemClassement = document.getElementById("note");
  tabImg = elemClassement.getElementsByTagName("img");
 
  for (i=0; i<nb; i++){
    tabImg[i].src = StarOnSrc;
    tabImg[i].value="on";
  }
  for (i=nb; i<n; i++){
    tabImg[i].src = StarOutSrc;
    tabImg[i].value = "off";
  }
  // ICI, on rempli l'input hidden avec la valeur
  document.getElementById('notehidden').value = nb;
}
// --------------

Et ajoute :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="hidden" id="notehidden" name="note" value=""/>
<div id="note" name="cls"></div>

[totot]

Et je peut donc supprimer quoi dans ce que tu m'a donnée?

[Invité]

Il suffit de copier-coller mon code ci-dessus.

Et tu peux TOUT METTRE DANS LE MEME FICHIER

N.B. Remplace :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$note = $_GET['note'];

par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$note = $_POST['note'];

[totot]

J'ai donc ceci:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div class="form-group">
	<label for="name">Note</label>
        <div class="row">
          <div class="col-md-6 col-md-push-3">
<div id="note" name="cls"></div>
<input type="hidden" id="notehidden" name="note" value=""/>
          </div>
        </div>
</div>

il me dit qui ne connait ma variable notehidden

[Invité]

J'abandonne....

[totot]

C'est bon, j'ai réussi!
Maintenant je vais chercher pour récup ma note dans la bd (sa c'est un select) et pour l'afficher avec les étoile.
Si j'ai 4, je veut 4 étoiles en jaune