ajout d'option d'un sondage en javascript

par **Cyrano** » 18 sept. 2006, 16:10

Pour le CSS, c'est pour indiquer au navigateur que ça doit être appliqué même par dessus la configuration personnelle de l'internaute;

Pour le JavaScript, si, c'est important : ça recrée les identifiant des différents champs : si tu lis bien les commentaires du code, chaque champ du formulaire doit avoir un identifiant unique : donc, il y a un pointeur qui s'incrémente concaténé avec un nom. Il faut que dans le JavaScript je reconstruise aussi ces identifiants pour pointer correctement dessus. Si tu retires ce bout là, ton script sera bon pour la poubelle à terme. En outre, si tu fais une validation JavaScript du formulaire, tu en auras également besoin.

par **Spols** » 18 sept. 2006, 16:06

Un grand merci Cyrano pour se script qui correspondait à ce que je cherchais. Je l'ai adapté à mes besoisn sans trop de problème et il est maintenant fonctionnelle.

Par curiosité, j'aurais 2 question à poser
dans cette partie de code ci :

Code : Tout sélectionner

body {
    font-family: verdana, helvetica, sans-serif;
    font-size: 85% !important;
}

Pourquoi avoir mis important à coté du 85%

danc cette partie de code ci :

Code : Tout sélectionner

var noms    = new Array;
    var prenoms = new Array;
    for(var l = 0; l < nbl; l++)
    {
        var index_n = 'nom_'+ l;
        var index_p = 'prenom_'+ l;
        noms[l]    = f.elements[index_n].value;
        prenoms[l] = f.elements[index_p].value;
    }

A quoi sert-elle? Elle rempli un tableau avec les valeurs qui n'est pas réutiliser ultérieurement.

Je n'ai pas inclu cette partie de code vu que je ne voyais pas son utilité et que mon script est fonctionnelle comme cela.

merci beaucoup aux 2 autres qui m'ont aider aussi

par **Cyrano** » 18 sept. 2006, 07:32

Te donner toutes les explications va prendre pas mal de temps, voilà une page avec ce que tu cherches. Je me suis monté ça il y a quelques temps pour des besoins persos. Pour ma part, j'ai utilisé un tableau html, mais c'est faisable éventuellement sans. Je te laisse voir le fonctionnement. Note bien que coté JavaScript, je me sers du DOM (Document Object Model) pour créer les nouvelles lignes. Chaque détail est important.

Voici l'exemple :

<?php
session_start();
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Ajout dynamique de lignes de saisie dans un formulaire</title>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
body {
    font-family: verdana, helvetica, sans-serif;
    font-size: 85% !important;
}
table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid #999;
    padding: 0.25em;
}
form {
    width: 300px;
    position: relative;
    top: 5em;
    left: 50%;
    margin-left: -150px;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
function ajoutligne(i)
{
    var f       = document.forms['test'];
    var j       = i + 1;
    var idNom   = 'nom_'+ i;
    var lignes  = document.getElementById('table_form');
    /**
     * Comptage des lignes du lignes :
     * tous les éléments
     * moins le bouton submit
     * et le reste divisé par le nombre de colonnes (ici 3)
     */
    var nbl     = (f.elements.length - 2) / 3;
    var chaine  = '';

    /* D'abord, on récupère les valeurs courantes du formulaire */
    var noms    = new Array;
    var prenoms = new Array;
    for(var l = 0; l < nbl; l++)
    {
        var index_n = 'nom_'+ l;
        var index_p = 'prenom_'+ l;
        noms[l]    = f.elements[index_n].value;
        prenoms[l] = f.elements[index_p].value;
    }

    /* Si on est sur la dernière ligne et que la valeur nom n'est pas vide, on rajoute la ligne de lignes */
    if(f.elements[idNom].value != '')
    {
        if(i == (nbl - 1))
        {
            /* Construction de la chaine vide à ajouter éventuellement */
            /* Ajout d'une ligne vide */
            var nouvelleLigne = document.createElement("tr");
            var creerLigne = lignes.appendChild(nouvelleLigne);

            /* Création des cellules */
            var cell_1 = document.createElement("td");
            var cell_2 = document.createElement("td");
            var cell_3 = document.createElement("td");

            /* Insertion des cellules dans la ligne */
            var creerCell_1 = creerLigne.appendChild(cell_1);
            var creerCell_2 = creerLigne.appendChild(cell_2);
            var creerCell_3 = creerLigne.appendChild(cell_3);

            /* Création des champs de formulaire */
            var champ_1 = document.createElement("input");
            var champ_2 = document.createElement("input");
            var champ_3 = document.createElement("input");

            /* Création des attributs pour chaque champ */
            /**
             * On commence par vérifier le navigateur utilisé.
             * Si en effet on a besoin d'un gestionnaire d'évènement, Internet explorer n'interprètera pas
             * de la même manière l'attribut ajouté.
             */
            var isExplorer = ((navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && (navigator.userAgent.toLowerCase().indexOf('opera') == -1)) ? true : false;
            if(isExplorer == true)
            {
                /* Le navigateur est Internet Explorer */
                var idChamp = 'nom_'+ j;
                champ_1.onchange = function(){if(document.forms['test'].elements[idChamp].value != ''){ajout();}};
            }
            else
            {
                champ_1.setAttribute("onchange", "if(this.value != ''){ajout();}");
            }
            /* Ajout des autres attributs de la balise */
            champ_1.setAttribute("type",  "text");
            champ_1.setAttribute("name",  "nom[]");
            champ_1.setAttribute("id",    "nom_"+ j);
            champ_1.setAttribute("title", "Inscrivez un nom de famille");
            champ_1.setAttribute("value", "");
            champ_2.setAttribute("type",  "text");
            champ_2.setAttribute("name",  "prenom[]");
            champ_2.setAttribute("id",    "prenom_"+ j);
            champ_2.setAttribute("title", "Inscrivez un prénom");
            champ_2.setAttribute("value", "");
            champ_3.setAttribute("type",  "checkbox");
            champ_3.setAttribute("name",  "supprligne[]");
            champ_3.setAttribute("id",    "supprligne"+ j);
            champ_3.setAttribute("title", "Supprimer la ligne");

            /* Insertion des champs dans chaque cellule */
            creerCell_1.appendChild(champ_1);
            creerCell_2.appendChild(champ_2);
            creerCell_3.appendChild(champ_3);

            var idPrenom = 'prenom_'+ i;
            f.elements[idPrenom].focus();

            /* Ajout dans la page d'une ligne supplémentaire indiquant le nombre de lignes ajoutées */
            var info = document.createElement('p');
            f.appendChild(info);
            info.setAttribute('style', 'font-size: 10px;');
            var j = i;
            j = (j + 2);
            info.appendChild(document.createTextNode('Création de la ligne '+ (j)))
        }
    }
    else
    {
        alert('Le premier champ de la dernière ligne (ligne '+ nbl +') est vide.\n Aucune nouvelle ligne ne pourra être ajoutée.');
    }
}

function ajout()
{
    /* Comptage du nombre de lignes en cours */
    var compte = (((document.forms['test'].elements.length) - 2) / 3) -1;
    // alert(compte);
    ajoutligne(compte);
}
/* ]]> */
</script>
</head>
<body>
<?php
if(isset($_POST['envoi']))
{
    echo("<pre>\n");
    var_dump($_POST);
    echo("</pre>\n");
}
?>
<form id="test" action="" method="post">
<?php
/**
 * Initialisation d'un pointeur de départ pour les attributs id des champs de saisie du formulaire.
 * On ne peut en effet pas avoir deux fois le même identifiant dans une même page HTML. Donc à chaque
 * ligne ajoutée, il faudra un nouvel identifiant. Ce dernier sera géré dynamiquement en JavaScript.
 */
$i  = 0;
?>
  <table summary="">
    <thead>
      <tr>
        <th>Nom</th>
        <th>Prénom</th>
        <th>Supprimer</th>
      </tr>
    </thead>
    <tbody id="table_form" >
      <tr>
        <td><input type="text" name="nom[]" id="nom_<?php echo($i); ?>" title="Inscrivez un nom de famille" value="" onchange="if(this.value != ''){ajout();}" /></td>
        <td><input type="text" name="prenom[]" id="prenom_<?php echo($i); ?>"  title="Inscrivez un prénom" value="" /></td>
        <td><input type="checkbox" name="supprligne[]" id="supprligne<?php echo($i); ?>" title="Supprimer la ligne" /></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">
          <input type="submit" name="envoi" id="envoi" value="Valider" />
          <input type="button" name="cnl" id="cnl" value="Ajouter une ligne de saisie" onclick="ajout();" />
        </td>
      </tr>
    </tfoot>
  </table>
</form>
</body>
</html>

Voilà, la page est complète, je n'aurai pas beaucoup de temps dans les jours à venir pour les explications, donc si tu as des questions, sois le plus précis possible

par **Spols** » 18 sept. 2006, 01:15

j'ai cherhché pendant des jours, et je n'ai pas réussi à trouver la solution

voici le bout de code que j'ai tenté dans sa version la plus fonctionnelle

Code : Tout sélectionner

<html>
<head>
<script language="javascript">
function ajout () {
	window.document.ligne2 = document.createElement("p");
	window.document.ligne2 = window.document.getElementById("ligne1").cloneNode(true);
	window.document.getElementById("option").insertBefore(window.document.ligne2,window.document.getElementById("ligne1"));
	window.document.getElementById("ligne1").swapNode(window.document.ligne2);
	window.document.ligne2.firstChild.name = "option[2]";
	window.document.getElementByTagName("option[1]").firstChild.value = "";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="option.php">
  <div id="option">
  <p id="ligne1"><input type="text" name="option[1]" value=""/><input type="button" name="add" value="Ajouter" onclick="ajout()"/></p>
  </div>
  
  <input type="submit" name="Submit" value="Envoyer">
</form>
</body>
</html>

Le problème c'est que je n'arrive plus à acceder à la première balise <p> et donc je ne sais pas modifier son contenu ni le verouiller

Et accessoirement si il y avait moyen d'inverser, pour que les nouvelles balises <p> apparaisse en dessous en non au dessus de la première cela m'arrangerai

Meric de votre attention j'espère que vous pourrez m'aider

par **zeus** » 13 sept. 2006, 18:22

En gros, le systeme est le suivant :

crée un conteneur (un div, ...) dans lequel tu met une ligne de choix d'option
crée une fonction JS qui prend le contenu de ce conteneur et lui ajoute une ligne de choix d'option
associe l'appel à cette fonction sur un bouton

Pense bien à donner un id propre à chaque ligne (pour la suppression) mais donne le meme name suivi de [] pour que la récupération des données du post soit facile

par **Spols** » 13 sept. 2006, 17:24

phpbb as utilisé le php pour cela ce qui est plus simple certe mais ne correcpond pas à ce que je voudrais faire

la question reste ouverte

par **Ryle** » 13 sept. 2006, 08:09

S'ils l'ont fait, c'est que c'est possible

Tu as regardé les sources de phpbb et de la page en question ?

par **Spols** » 13 sept. 2006, 00:14

Bonjour à tous,

Je voudrais savoir si il est faisable de devellopé un script en javascript uniquement du même type que celui de phpbb pour l'ajout d'option d'un sondage, c'est à dire un champ texte et un boutton qui, dés qu'on appuie dessu, ajoute un champs en dessus.

Si la réponse est positive, Pourriez vous me mettre sur la voie pour savoir comment écrire le champs de formulaire en plus sans perdre le reste de la page

Je vous remercie de votre attention

ajout d'option d'un sondage en javascript

Répondre

Étendre la vue Revue du sujet : ajout d'option d'un sondage en javascript

ajout d'option d'un sondage en javascript