Bonjour,

J'ai besoin d'aide en Javascript.

Je dispose d'un tableau comprenant un produit, un prix et une quantité restante.

En dessous de mon tableau, j'ai un bouton "Ajouter un produit".
Ce bouton ouvre une fenêtre pop-up avec les 3 champs "produit", "prix" et "quantité restante".

On doit saisir les 3 champs et cliquer sur le bouton "valider"

Et voilà mon problème, lorsque je clique le bouton "valider", rien ne se passe. Cela ne m'ajoute pas à mon tableau.

Pourtant :
Dans le formulaire HTML, j'ai bien mit dans mon form un onsubmit="AddProduct(nom, prix, quantite)"
Et, dans le javascript, j'ai une fonction pour ajouter au tableau et je récupère bien mes valeurs des champs. Alors, je ne comprends pas trop. Je suis vraiment bloqué.
Et, j'aurais besoin de votre aide s'il vous plait.

Voici mon code HTML :

Code html : 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
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="pear2pear.js"></script>
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<script>
                          $( function() {
                                $( "#dialog" ).dialog({
                                        autoOpen: false,  height: 400,width: 350,modal: true,
                                });
                                $( "#opener" ).on( "click", function() {
                                        $( "#dialog" ).dialog( "open" );
                                });
                                $('#dialog').keyup(function() {
                                        var $intitule = $('.intitule');
                                        var $prix = $('.prix');
                                        var $quantite = $('.quantite');
                                        if (!$intitule.val() || !$prix.val() || !$quantite.val()) {
                                                $('.submit').attr('disabled', true);
                                        }
                                         else {
                                                $('.submit').attr('disabled', false);
                                        }
                                }
                                ).keyup();
                                  
                        }
                         );
                </script>
	</head>
	<body onload="onLoad()">
		<table id="MaterialTableId">
			<caption>
				Materiel
			</caption>
			<thead>
				<tr>
					<th>
						Intitulé
					</th>
					<th>
						Prix Unitaire
					</th>
					<th>
						Quantité Restante
					</th>
				</tr>
			</thead>
			<tbody id ="MaterialTableContentId"></tbody>
		</table>
		<div id="dialog">
			<form onsubmit="AddProduct(nom, prix, quantite)">
				<p>
					Intitulé : 
					<input id="intitule" class="intitule" type="text" />
				</p>
				<p>
					Prix : 
					<input id="prix" class="prix" type="text" />
				</p>
				<p>
					Quantité restante : 
					<input id="quantite" class="quantite" type="text" />
				</p>
				<input type="submit" class="submit" value="Valider" />
				<input type="submit" value="Annuler" />
			</form>
		</div>
		<button id="opener">Ajouter un produit</button>
	</body>
</html>

Et mon code Javascript :

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
var ProductTab = []
var nom = document.getElementById("intitule");
var prix = document.getElementById("prix");
var quantite = document.getElementById("quantite");
 
function onLoad() {
	debugger;
 
	ProductTab.push({name : "Processeur", price : 199.9, quantity : 15});
	ProductTab.push({name : "EcranLCD", price : 99.9, quantity : 3});
	ProductTab.push({name : "Carte mère", price : 338.14, quantity : 5});
	ProductTab.push({name : "Adaptateur VGA-HDMI", price : 7.99, quantity : 2});
	ProductTab.push({name : "Carte graphique", price : 449.99, quantity : 4});
 
	AddProduct("Souris", 7.80, 10);
 
    FillMaterialTable();
}
 
function FillMaterialTable() {
	debugger;
 
	var htmlContent = " ";
 
	for(var i = 0; i < ProductTab.length; i++)
	{
        htmlContent += "<tr><td>" + ProductTab[i].name + "</td><td>" + ProductTab[i].price + "</td><td>" + ProductTab[i].quantity + "</td></tr>";
	}
 
	$("#MaterialTableContentId").html(htmlContent);
    $("#MaterialTableContentId").show();
 
}
 
function AddProduct(nom, prix, quantite){
	debugger;
	ProductTab.push({name : nom, price : prix, quantity : quantite});
}

Merci beaucoup et bonne année 2019 !

Si vous avez des questions et c'est pas très clair, n'hésitez pas.