Forum : Input générer dynamiquement

Bonjour,

J'ai un formulaire ou j'ai placé un bouton "Ajouter suggestion" qui fonctionne bien, mais pas comme je voudrais puisque j'aimerai qu'il y ai au départ 1 input obligatoire à remplir et un nombre maximum d'input à rajouter qui soit limité à 5, chose que je ne suis pas arriver à faire.

Voici une partie du code:

<form method="post" action="">
    <fieldset>
        <label>Pseudo </label> <input type="text" name="pseudo" /><br/><br/>
    <label>Message</label><input type="text" name="message" value="<?php if(isset($_POST"message"])){echo htmlspecialchars($_POST"message"]);}?>"/> <br/><br/>

        <input type="submit" name="addchoice" value="Ajouter une suggestion"/><br/><br/>

    <?php
            $nb_choix = 1;

            if(isset($_POST"addchoice"]) && !empty($_POST'nb_choix']))
        {   
            $nb_choix = $_POST'nb_choix']+1;
            for($i=1;$i<=$nb_choix;$i++) {
    ?>      
        <label> Suggestion <?php echo $i;?></label> <input type="text" name="suggest" value="<?php echo $i;?>"/> <br/>
        <?php   
        }//fin du for
         }//Fin du if
        ?>

        <input type="hidden" name="nb_choix" value="<?php echo $nb_choix; ?>" />
        <input type="submit" name="poster" value="Poster" />
    </fieldset>
</form>

Merci à ceux qui voudront bien m'aider :)

wilose

Bonjour,
Je te conseil d'utiliser JavaScript, car php obligera la page à s'actualiser.

vash60700

un truc comme ça quoi :

document.createElement('<input type="text" name="'+lenom+'" >')

Boobha

Salut,

En restant dans ton système je te propose quelque chose comme ca :

<form method="post" action="">
    <fieldset>
        <label>Pseudo </label> <input type="text" name="pseudo" /><br/><br/>
    <label>Message</label><input type="text" name="message" value="<?php if(isset($_POST"message"])){echo htmlspecialchars($_POST"message"]);}?>"/> <br/><br/>
    <input type="submit" name="addchoice" value="Ajouter une suggestion"/><br/><br/>

    <?php
    $nb_choix = (isset($_POST'addchoice']) && isset($_POST'nb_choix']))? $_POST'nb_choix']+1:1;
    for($i=0;$i<$nb_choix;$i++) {
    ?>
    <label> Suggestion <?php echo $i+1;?></label> <input type="text" name="suggest]" value="<?php if(isset($_POST"suggest"]$i])){ echo $_POST"suggest"]$i]; } ?>"/> <br/>
    <?php    
    }//fin du for
    ?>
    <input type="hidden" name="nb_choix" value="<?php echo $nb_choix; ?>" />
    <input type="submit" name="poster" value="Poster" />
    </fieldset>
</form>
<?php
if( isset($_POST) ){
    echo "<pre>";
    print_r($_POST);
    echo "</pre>";
}
?>

vanesselaaa

Auteur

Merci pour vos réponses :)
Boodha tu peu m'expliquer cette ligne:

//C'est un opérateur ternaire?
$nb_choix = (isset($_POST'addchoice']) && isset($_POST'nb_choix']))? $_POST'nb_choix']+1:1;

Car je n'utilise pas ce genre d'opérateur, c'est pour bien comprendre :)

Tralala8

Bonjour,

Cette ligne est une condition. La condition se compose des deux "isset", le traitement à exécuter si la condition est remplie vient après le "?" et le traitement à exécuter si la condition n'est pas remplie vient après le ":".

Sinon, comme l'a dit vash60700, il vaut mieux utiliser du JavaScript, c'est la solution la mieux adaptée.

vanesselaaa

Auteur

Merci pour ces explications Tralala8 :)
Oui je sais que le javascript est la meilleur solution à mon problème, mais je ne le maitrise pas encore donc je préfère me servir de php ou je suis plus à l'aise.

Je veux également rajouter l'option "supprimer" pour enlever un champ donc j'ai rajouter cette ligne:

$supprnb_choix =(isset($_POST'supprchoice']) && isset($_POST'nb_choix']))? $_POST'nb_choix']-1:1;

Cela fonctionne parfaitement bien :) mais je n'arrive pas a récupérer le champ suggest] pour l'insérer dans ma bdd :(

wilose

Je débute en JavaScript, mais je donne quand même un début de code...
html :

<input type="button" name="addchoice" id="addchoice" value="Ajouter une suggestion"/><br/>
<div id="d"><label> Suggestion </label><input type="text" name="suggest" /><br/></div>

JavaScript :

<script>
var element = document.getElementById('addchoice');
element.addEventListener('click', function() {
    var input1 = document.getElementById('d');
    var input2 = input1.cloneNode(true);
    input1.parentNode.appendChild(input2);    
}, false);
</scrypt>

Le problème est que chaque "name" des inputs cloné sont identique,
et je n'est pas encore les connaissances pour y remédier.

Raphael986

Bonjour

Je confirme l'idée de wilose, il est préférable d'utiliser le javascript plutôt que le php pour ce genre de problème, si l'utilisateur à une connexion en carton il va mettre 30ans à remplir les 5 messages et il est rare qu'un internaute aime patienter 30ans...

Donc il te faut remplacer :

<input type="submit" name="addchoice" value="Ajouter une suggestion"/>

Par un simple bouton, ainsi en cliquant dessus tu déclencheras la fonction javascript sans envoyer le formulaire.

Et pour répondre à la problématique de wilose :
"Le problème est que chaque "name" des inputs cloné sont identique, et je n'est pas encore les connaissances pour y remédier."

Il suffit de mettre name = "message]" et on génère un $_POST sous forme de tableau facilement traitable par la suite.

vanesselaaa

Auteur

Merci pour vos réponses! le problème c'est que je commence à débuter en javascript et que donc je ne sais pas le retranscrire en JS!
Quelqu'un peu t-il me mettre sur la voie?
Merci!!!

Input générer dynamiquement

9 réponses