Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » PHP » Ajouter des lignes de champs à un formulaire dynamiquement

Ajouter des lignes de champs à un formulaire dynamiquement

05/21/2011 par Dux   -   3.5/5 (22 notes)

Voici une solution complète de formulaire dynamique. Ce script d'exemple affiche un formulaire d'ajout - modification de produits. En cliquant sur un lien [+], on ajoute une nouvelle ligne de produit.
Il incorpore aussi la modification en envoyant le paramètre mod correspondant à l'ID de la ligne du tableau MySQL à modifier.

Système dynamique d'ajout de champs de formulaire :
Au départ, le script PHP crée 100 lignes de formulaire mais n'affiche que la première. Les suivantes sont masquées par un CSS display:none.
Les noms de champs de formulaires ne sont qu'une seule variable de type tableau (array) qui est incrémenté à chaque ligne. A l'enregistrement, ce tableau est sérialisé en une chaîne de caractères afin de rentrer dans un champ type TEXT MySQL. Pour récupérer ce tableau, il suffit d'utiliser la fonction inverse :
$product = unserialize($r['product_line']);

Voir une démonstration de ce script en action :

Ouvrir dans une nouvelle fenêtre     Ouvrir dans la même fenêtre

code source



 
<?php
$mod
= addslashes($_REQUEST['mod']);

// Save in DB
if (isset($_POST['text'])) {
   
$text = $_POST['text'];
   
$line = serialize($text);
   if (
$mod == '') {
       
// INSERT INTO BDD Eg.
       // $res = mysql_query( "INSERT INTO table VALUES ('', '".$line."', '".time()."')" );
   
} else {
       
// UPDATE BDD
       // $res = mysql_query( "UPDATE table SET product_line = '".$line."', date = '".time()."' WHERE id = ".$mod );
   
}
}


// Preparing update
if ($mod != '') {
   
$res = mysql_query( "SELECT * FROM table WHERE id = ".$mod);
   
$r = mysql_fetch_array($res);
   
$text = unserialize( $r['product_line'] );
   
$nbr_ligne = count( $text['detail'] );
}


// Display the form
echo '
<form method="post" action="/fr/script.php">
   <input type="hidden" name="mod" value="'
.$mod.'" />
   <table style="width: 700px">
   <tr>
       <th>Description</th>
       <th>Quantity</th>
       <th>Price</th>
   </tr>'
;

// Loop to prepare the display of 100 product lines
for ($i=0; $i<100; $i++) {
   
   if (
$text['quantity'][$i] == "") $text['quantity'][$i] = 1;
   if (
$text['unit'][$i] == "") $text['unit'][$i] = "0.00";
   
// Display only the first line
   
if ($nbr_ligne == 0) $nbr_ligne = 1;
   if (
$i >= $nbr_ligne) $display = 'style="display:none"';
   echo
'
   <tr id="cell'
.$i.'" '.$display.'>
       <td>
           <textarea name="text[detail]['
.$i.']">'.stripslashes($text['detail'][$i]).'</textarea>
           <br />
           <a href="javascript:void(0)" onclick="javascript:document.getElementById(\'cell'
.($i+1).'\').style.display=\'table-row\'; this.style.display=\'none\'">[+]</a>
       </td>
       <td>
           <input name="text[quantity]['
.$i.']" id="q'.$i.'" value="'.stripslashes($text['quantity'][$i]).'" size="4" />
       </td>
       <td>
           <input name="text[unit]['
.$i.']" id="u'.$i.'" value="'.stripslashes($text['unit'][$i]).'" size="7" /> USD
       </td>
   </tr>'
;
}

echo
'
   </table>
   <input type="submit" value="Save" />
</form>
'
;
?>

Testé avec Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  IE7  IE8  
Noter ce code     |     Copié : 298x

Commentaires pour Ajouter des lignes de champs à un formulaire dynamiquement

RussellDaf     01/28/2017 19:02
No need to look anywhere else, the most advanced Pokemon Duel Cheat is available right now for you to download. Promo: BODM77BWH223BE
Johne209     01/01/2015 05:37
Very well written article. It will be helpful to anyone who usess it, as well as yours truly
rem     02/12/2013 15:24
coucou
Nico     01/05/2012 08:15
Serialize function doesnt transmit the null value of the array
D6_     01/04/2012 05:57
Question - If you create a hundred form elements, displayed or not, when the user hits submit, that info is passed to the action page.  How does the action page know to only look at the number of elements that was chosen by the user?
Ajouter un commentaire Pseudo   Site
ZOOM