Discussion :

[kinkon]

Bonjour la communauté,

J'ai un formulaire avec deux champs (nom produit et quantité).
Le champ nom produit fonctionne avec de l'autocompletion et il n'y a pas de problème à ce niveau.

Voici le code html de mon formulaire

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
		<div class="col-sm-12 col-md-12 col-lg-12">
			<div class="card" id="profile-main">
				<div id="error_register" class="row">
 
				</div>
				<form name="form-enr-produit" id="register_form_produit" method="POST" onsubmit="return false;"  class="myformsave">
					<h4 class="p-l-20">Veuillez remplir le formulaire  !</h4>
					<div class="col-sm-12 col-md-12 col-lg-12">
						<div class="col-sm-6">
							<div class="input-group m-b-20">
								<span class="input-group-addon"><i class="zmdi zmdi-assignment"></i></span>
								<!--div class="fg-line"-->
								<input type="text" id="nomProduit" name="nomProduit" value="" class="form-control" placeholder="Nom du produit">
								<small id="error_nomProduit" class="error_txt"></small>
								<!--/div-->
							</div>
							<div class="resultsearch"></div>
						</div>
						<div class="col-sm-3">
							<div class="input-group m-b-20">
								<span class="input-group-addon"><i class="zmdi zmdi-grain"></i></span>
								<input type="text" id="qTiteStock" name="qTiteStock" value="" class="form-control" size="20" placeholder="Quantité">
								<small id="error_qTiteStock" class="error_txt"></small>
							</div>
						</div>
						<div class="col-sm-3">
							<button type="submit" id="bSaveData" class="btn btn-primary btn-sm m-t-10 waves-effect pull-right">Enregistrer</button>
						</div>
					</div>
 
				</form>
			</div>
		</div>

Et voici le code js de contrôle du formulaire:

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
$(document).ready(function() {
	//Recherche du Produit
	$("#nomProduit").keyup(function(){
		$("#charge").css("visibility", "visible");
		var trouve=$(this).val();
		if(trouve!=""){
			$.ajax({
				type: "post",
				url:  "/saremati/php/verif_form_save_commande.php",
				data: {trouve:trouve},
				success: function(data){
					$(".resultsearch").fadeIn();
					$(".resultsearch").html(data);
				}
			});
		}else{
			$(".resultsearch").fadeOut(400);
			$(".resultsearch").html("");
		}
 
	});
	$(document).on('click', 'li', function(){
		$('#nomProduit').val($(this).text());
		$('.resultsearch').fadeOut();
	});
	//Vérification du champ quantité du produit
	$("#qTiteStock").keyup(function(){
		if(!$(this).val().match(/^[0-9]{1,7}$/)){
			$("#qTiteStock").css("border-color","#ff0000");
			$("#error_qTiteStock").css("color", "red").html("<i class='glyphicon glyphicon-warning-sign'></i><img src='/saremati/img/icons/warning.png' alt='Attention' class='erreur'> Caractères numériques seulement de 0 à 9999999 !");
		}
		else{
			$("#qTiteStock").css("border-color","green");
			$("#error_qTiteStock").css("color", "green").html("<img src='/saremati/img/icons/ok24.png' alt='Ok'>");
		}
	});
});

Maintenant après la saisie du nom de produit et de la quantité, je voudrais que quand l'utilisateur clique sur le bouton Enregistrer qu'une ligne de tableau s'ajoute juste en bas du formulaire avec les colonnes suivantes comme l'illustre le tableau ci-dessous:

N°	Nom du produit	Prix
1	Riz 25 Kg	100 000
2	Riz 50 Kg	200 000
3	Romi 900g	25 000
4	Thé	1 000

Les éléments du tableau doivent être ajoutés lignes par lignes sur clique du bouton Enregistrer et c'est ce que je n'arrive pas à faire cher amis du forum!


Merci à l'avance pour vos différentes réponses!