Formulaire Javascript vers PHP

Version imprimable

Bonjour tous le monde,

Je viens de faire un formulaire en Javascript et j'ai appris que pour pouvoir insérer les réponses dans ma base de données je dois passer par de l'Ajax. Néanmoins je n'ai aucune notion d'Ajax et je souhaiterai que vous me redirigiez vers des tutos ou des sujets traitant de ceci .

Mon formulaire ressemble a ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form name="formu" method="post" action="bdd.php"> 
	Choisir un bu 
	<select name="listebu" onChange="filltheselect(this.name, this.value)">
	   <script language="javascript">
	   for (i=0; i<bu.length; i++)
	      document.write("<option value=\"" +bu[i][0]+ "\">" +bu[i][1]);
	   </script>
	</select>
	<br>
	 Choisir un vm
	<select name="listevm" onChange="filltheselect(this.name, this.value)">
	   <script language="javascript">
	   for (i=0; i<vm["p0"].length; i++)
	      document.write("<option value=\"" +vm["p0"][i][0]+ "\">" +vm["p0"][i][1]);
	   </script>
	</select>
		<h2>Sélectionner la puissance de l'engagement</h2>
		<button class="buttonr" style="margin: auto" onClick="alert('Requete Envoyé')" type="submit" value="1" name="engagement"><span>Rouge</span></button>
		<button class="buttonj" style="margin: auto" onClick="alert('Requete Envoyé')" type="submit" value="2" name="engagement"><span>Jaune</span></button>
		<button class="buttonv" style="margin: auto" onClick="alert('Requete Envoyé')" type="submit" value="3" name="engagement"><span>Vert</span></button>
</form>

Et mon php actuel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form name="formu" method="post" action="bdd.php"> 
	Choisir un bu 
	<select name="listebu" onChange="filltheselect(this.name, this.value)">
	   <script language="javascript">
	   for (i=0; i<bu.length; i++)
	      document.write("<option value=\"" +bu[i][0]+ "\">" +bu[i][1]);
	   </script>
	</select>
	<br>
	 Choisir un vm
	<select name="listevm" onChange="filltheselect(this.name, this.value)">
	   <script language="javascript">
	   for (i=0; i<vm["p0"].length; i++)
	      document.write("<option value=\"" +vm["p0"][i][0]+ "\">" +vm["p0"][i][1]);
	   </script>
	</select>
		<h2>Sélectionner la puissance de l'engagement</h2>
		<button class="buttonr" style="margin: auto" onClick="alert('Requete Envoyé')" type="submit" value="1" name="engagement"><span>Rouge</span></button>
		<button class="buttonj" style="margin: auto" onClick="alert('Requete Envoyé')" type="submit" value="2" name="engagement"><span>Jaune</span></button>
		<button class="buttonv" style="margin: auto" onClick="alert('Requete Envoyé')" type="submit" value="3" name="engagement"><span>Vert</span></button>
</form>

Je me suis renseigné et j'ai trouvé que je devais insérer ces bouts de code :

Code:

1
2
3
4
5
6
7
8
$.ajax({  
    type: 'POST',  
    url: 'bdd.php', 
    data: { listebu: this.title ,listevm: this.title},
    success: function(response) {
        content.html(response);
    }
});

Seul problème c'est que je ne sais pas ou le mettre :/

1 pièce(s) jointe(s)

Bon j'ai un peu avancé de mon côté, j'ai ajouté ces lignes de codes dans le header de l'index.html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'bdd.php', data: $('form').serialize(), success: function () { alert('form was submitted'); } }); }); }); </script>
Mais par la suite lorsque je valide le formulaire rien ne se passe dans la base de donnée pourtant j'ai le message qui confirme bien que le form a été envoyé. Qui plus est lorsque je vais dans l'outils inspection de chrome je vois bien que les données sont envoyées.

Pièce jointe 412586

17/09/2018, 20h40
_Midona

Bonjour Bennou07,

Tout d’abord il n’y a pas de php dans les trois extraits de code que tu donnes.

Je vais t’expliquer brievemenent le fonctionnement d’ajax :

Au clic d’un bouton pour envoyer ton formulaire -> appel de JavaScript -> envoi et traitement des données en php -> modification de la base de données -> php transmet le résultat souhaité -> retour des données en JavaScript -> affichage du résultat souhaité sur ta page.

Le principal intérêt d’Ajax est de soumettre des données et modifier ton affichage sans recharger ta page, si ce n’est pas ton objectif il y a beaucoup plus simple : cherche des infos du côté de bouton «*submit*».
18/09/2018, 15h47
NoSmoking

Bonjour,

Citation:

je souhaiterai que vous me redirigiez vers des tutos ou des sujets traitant de ceci .

à lire donc pour commencer : Comprendre les mécanismes d'AJAX
19/09/2018, 23h36
ABCIWEB

Et puis au passage, il faudra supprimer ces vilains document.write si tu veux apprendre à programmer correctement en javascript. Puisque tu utilise jquery, il existe .append() pour ajouter du contenu à un élément HTML dans une boucle (ou sans boucle), ou encore .html() pour inclure un bloc en une seule fois.