Formulaire avec ajout de ligne à l'infini - Javascript
pilten
Messages postés
41
Date d'inscription
Statut
Membre
Dernière intervention
-
A.Nonymous -
A.Nonymous -
Bonjour à tous,
J'ai un petit soucis dans le dév de mon application web.
Imaginons l'exemple suivant : J'ai créé un formulaire pour pouvoir ajouter des produits dans une database
(1 ligne = 1 champ "Produit", 1 champ "prix")
** le champ produit est une liste "selected from database"
Je n'ai pas envie de prédéfinir un nombre de lignes maximum. J'aimerais simplement afficher une ligne Avec un bouton + qui permettra d'ajouter des lignes.
Je programme en Javascript la fonction "nouvelle ligne", histoire de ne pas rafraîchir la page forcément.
Voici un exemple du code de la page
<html>
<head>
function Ajouter(){
var newRow = document.getElementById('matable').insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = "<?php
OpenStreamDB();
$sql = "SELECT * FROM produit'";
$res = mysql_query($sql);
Disconnect();
echo "<select name='produit'>";
echo "<OPTION value='0'>Choisir un produit</OPTION>";
while($j = mysql_fetch_object($res)){
echo "<OPTION value='$j->id_bonus'>$j->desc_bonus</OPTION>";
}
echo "</select>";
?>";
newCell = newRow.insertCell(1);
newCell.innerHTML = "Prix <input type='text' name='prix' size='5'>";
};
</head>
<body>
<table id='matable'>
</table>
</body>
</html>
A mon avis, ce n'est pas très propre comme fonction JS mais cela marche.
Par contre, je ne sais pas comment faire pour que les "NAME" variable aient des valeurs différentes à chaque nouvelle ligne
Je présume que je dois utiliser une variable Javascript à incrémenter à chaque nouvel appel de fonction.
Mais comment vais je écrire cette variable JS dans mon code PHP
Bref, je cale !
Merci d'avance
J'ai un petit soucis dans le dév de mon application web.
Imaginons l'exemple suivant : J'ai créé un formulaire pour pouvoir ajouter des produits dans une database
(1 ligne = 1 champ "Produit", 1 champ "prix")
** le champ produit est une liste "selected from database"
Je n'ai pas envie de prédéfinir un nombre de lignes maximum. J'aimerais simplement afficher une ligne Avec un bouton + qui permettra d'ajouter des lignes.
Je programme en Javascript la fonction "nouvelle ligne", histoire de ne pas rafraîchir la page forcément.
Voici un exemple du code de la page
<html>
<head>
function Ajouter(){
var newRow = document.getElementById('matable').insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.innerHTML = "<?php
OpenStreamDB();
$sql = "SELECT * FROM produit'";
$res = mysql_query($sql);
Disconnect();
echo "<select name='produit'>";
echo "<OPTION value='0'>Choisir un produit</OPTION>";
while($j = mysql_fetch_object($res)){
echo "<OPTION value='$j->id_bonus'>$j->desc_bonus</OPTION>";
}
echo "</select>";
?>";
newCell = newRow.insertCell(1);
newCell.innerHTML = "Prix <input type='text' name='prix' size='5'>";
};
</head>
<body>
<table id='matable'>
</table>
</body>
</html>
A mon avis, ce n'est pas très propre comme fonction JS mais cela marche.
Par contre, je ne sais pas comment faire pour que les "NAME" variable aient des valeurs différentes à chaque nouvelle ligne
Je présume que je dois utiliser une variable Javascript à incrémenter à chaque nouvel appel de fonction.
Mais comment vais je écrire cette variable JS dans mon code PHP
Bref, je cale !
Merci d'avance
A voir également:
- Formulaire avec ajout de ligne à l'infini - Javascript
- Whatsapp formulaire opposition - Guide
- Partage de photos en ligne - Guide
- Formulaire de réclamation facebook - Guide
- Aller à la ligne excel - Guide
- Formulaire de reclamation instagram - Guide
7 réponses
Salut
Ta table "maTable" va être dans un formulaire non ?
Si oui, tu peux rajouter un champ qui reçoit le nombre de lignes.
En gros, dans ta fonction ajouter(), tu incrémentes un variable "a" et tu modifies la valeur de l'input en fonction.
Par exemple :
Comme ça, tu sais combien de lignes tu as et tu peux récupérer le nombre simplement avec $_GET['nbLignes'] ou $_POST['nbLignes']
Ta table "maTable" va être dans un formulaire non ?
Si oui, tu peux rajouter un champ qui reçoit le nombre de lignes.
<input type=hidden name="nbLignes" id="nbLignes" value="">
En gros, dans ta fonction ajouter(), tu incrémentes un variable "a" et tu modifies la valeur de l'input en fonction.
Par exemple :
a = a + 1;
document.getElementById('nbLignes').value = a;
Comme ça, tu sais combien de lignes tu as et tu peux récupérer le nombre simplement avec $_GET['nbLignes'] ou $_POST['nbLignes']
salut
je ne sais pas si ca peut t aider mais pour un projet en php je devais recuperer la valeur d une variable et la passer a une fonction jquery. et j ai simplement fait ceci dans mon fichier php:
et ma function jquery est definit dans le fichier jquery :)
je ne sais pas si ca peut t aider mais pour un projet en php je devais recuperer la valeur d une variable et la passer a une fonction jquery. et j ai simplement fait ceci dans mon fichier php:
<?php
......
$i++;
$ma_var_php_incrementee = $i;
....
?>
<script type="text/javascript">
ma_var_jquery = "<?php echo $ma_var_php; ?>";
ma_function_jquery(ma_var_jquery);
</script>
et ma function jquery est definit dans le fichier jquery :)
Bonjour à Tous,
Je pense avoir trouvé une super solution (code source trouvé sur Alsacréation). Par contre, je n'ai aucune idée de comment récupérer les valeurs en PHP après le submit
Je suppose que les "name" sont incrémentés.
Merci de m'aider
Voici le code
// javascript pour afficher ma première ligne de formulaire au chargement
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
setSeance();
}
// javacsript qui ajoute une ligne
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField.name;
if (theName){
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// dans le body j'affiche donc ma première ligne de formulaire
// je le fais en javascript pour pouvoir la supprimer plus facilement
<body onload="init();">
// ici c'est ma div "modèle" que je duplique
<div id="readroot" style="display: none">
<span class="labeltext">Catégorie</span>
<input name="cat" type="text" class="inputext" />
<span class="labeltext">Tarif</span>
<input name="tarif" type="text" class="inputext" />
<input type="button" class="button" value="-" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
// ici c'est la zone dans laquelle je duplique mes lignes de formulaires
<span id="writeroot"></span>
<input type="button" class="button" id="moreFields" value="+" />
Je pense avoir trouvé une super solution (code source trouvé sur Alsacréation). Par contre, je n'ai aucune idée de comment récupérer les valeurs en PHP après le submit
Je suppose que les "name" sont incrémentés.
Merci de m'aider
Voici le code
// javascript pour afficher ma première ligne de formulaire au chargement
function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
setSeance();
}
// javacsript qui ajoute une ligne
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField.name;
if (theName){
newField[i].name = theName + counter;
}
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
// dans le body j'affiche donc ma première ligne de formulaire
// je le fais en javascript pour pouvoir la supprimer plus facilement
<body onload="init();">
// ici c'est ma div "modèle" que je duplique
<div id="readroot" style="display: none">
<span class="labeltext">Catégorie</span>
<input name="cat" type="text" class="inputext" />
<span class="labeltext">Tarif</span>
<input name="tarif" type="text" class="inputext" />
<input type="button" class="button" value="-" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
// ici c'est la zone dans laquelle je duplique mes lignes de formulaires
<span id="writeroot"></span>
<input type="button" class="button" id="moreFields" value="+" />
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
voilà une solution en mettant le name sous forme d'array
name="xxxx[]"
ainsi tu récupères en php ensuite par une boucle car tu as la valeur dans un array $_POST['xxxx']
name="xxxx[]"
ainsi tu récupères en php ensuite par une boucle car tu as la valeur dans un array $_POST['xxxx']
<script type="text/javascript">
<!--
//init variable JS globale, elle conserve sa valeur entre chaque appel de la fonction
//c a d après le premier appel elle va passer à 1 etc...
i=0;
///
function create_champ(){
//on increment la variable globale i, numero de produit
i++;
// en JS on peut atteindre les elements de la page HTML par document.getElementById
// creation de l'objet tableau avec lequeml on va travailler
var obj_tableau=document.getElementById("tableau_produits");
//lecture des lignes du tableau actuel, JS le met dans un array
var arrayLignes = obj_tableau.rows;
//pour avoir le nombre de lignes, avec .length on a la taille de l'array
var nbr_de_lignes=arrayLignes.length;
//on insere une nouvelle ligne de tableau juste avant celle contenant le bouton
var nouvelleLigne = obj_tableau.insertRow(nbr_de_lignes-1);
//ensuite on remplit chacune des cellules <td></td> du tableau avec les input
var colonne1=nouvelleLigne.insertCell(0);
colonne1.innerHTML="Produit "+i;
var colonne2=nouvelleLigne.insertCell(1);
colonne2.innerHTML='<input type="text" name="lib_produit['+i+']" value="" />';
var colonne3=nouvelleLigne.insertCell(2);
colonne3.innerHTML='<input type="text" name="qte_produit['+i+']" value="" />';
var colonne4=nouvelleLigne.insertCell(3);
colonne4.innerHTML='<input type="text" name="prix_produit['+i+']" value="" />';
//tu peux rajouter des colonnes, modifier le name, mais garde sa forme name="lib_produit['+i+']"
//ainsi tu pourra facilement récuper par $_POST['lib_produit'] qui est un array, donc boucler pour insertiondans BDD
}
-->
</script>
</head>
<body onload="javascript:create_champ();">
<!-- au chargement de la page on ajoute la premiere ligne produit -->
<form name="form_ajaout_cde" method="post" action="" >
<table width="800" id="tableau_produits" >
<tr>
<th>Produit</th>
<th>Libelle</th>
<th>Quantité</th>
<th>Prix</th>
</tr>
<tr>
<td colspan="4">
<input name="button" type="button" class="input2" onClick="javascript:create_champ()" value="Ajouter une ligne produit">
</td>
</tr>
</table>
</form>
</body>
</html>
Merci Alain_42
Ok pour le name='var[]'
Par contre, comment créer la boucle PHP pour lire ?
Je ne sais pas comment récupérer la taille du tableau
$taille_array = sizeof($_POST['var']);
for ($i=1;$i<$taille_array;$i++){
$valeur = $_POST['var'][$i];
}
On peut coder cela comme ca ? merci
Ok pour le name='var[]'
Par contre, comment créer la boucle PHP pour lire ?
Je ne sais pas comment récupérer la taille du tableau
$taille_array = sizeof($_POST['var']);
for ($i=1;$i<$taille_array;$i++){
$valeur = $_POST['var'][$i];
}
On peut coder cela comme ca ? merci
pas tout à faire car à chaque passage de la boucle
$valeur = $_POST['var'][$i];
$valeur va changer donc soit tu stockes ça dans un array
$valeur[$i]
soit tu utilises la taille $taille_array pour enregister directement toutes tes valeurs dans la BDD
for ($i=1;$i<$taille_array;$i++){
$query="INSERT INTO .... $_POST['cat'][$i], $_POST['tarif'][$i]....
}
$valeur = $_POST['var'][$i];
$valeur va changer donc soit tu stockes ça dans un array
$valeur[$i]
soit tu utilises la taille $taille_array pour enregister directement toutes tes valeurs dans la BDD
for ($i=1;$i<$taille_array;$i++){
$query="INSERT INTO .... $_POST['cat'][$i], $_POST['tarif'][$i]....
}