Discussion :

[Jildo]

Bonjour à tous,

Je suis débutant et dans mon projet le client doit remplir un formulaire de recette de cuisine.
Je bloque au moment du remplissage des ingrédients que j'aimerai coder en jQuery.

J'ai passé une journée la dessus a essayer plein d'astuces diverses mais je n'arrive a rien faire marcher.
Voici ce que je n'arrive pas a coder: Le client en cliquant sur le bouton "ajouter" doit faire apparaitre une nouvelle ligne avec les deux input (Nom de l’ingrédient et quantité) + 1 select (L'unité de mesure)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
Ajoutez vos ingredients: <br />
        <table class="table" id="ingredientTbl">
            <tr>
                <th>Ingrédient</th>
                <th>Quantité</th>
                <th>Unité</th>
            </tr>
        </table>
        <button id="btnAdd">Ajouter</button>

Coté JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#btnAdd").click(function () {
            var newElement = '<tr><td><input type="text" name="Ingrédient[]" pattern=".{3,}" required title="Ingrédient requis" /></td><td><input type="number" name="Quantité[]" min="1" /></td><td><select name="Unité" id="unityMenu" style="width:100px">< option value = "" disabled selected> Choose Unity</option ></select ></td></tr>';
            $("#ingredientTbl").append($(newElement));
 
        });

Variante en UL LI:

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
 <ul id="list">
            <li class="list_ingredient">
                Nom de l'ingrédient:
                <input type="text" id="ingredientName" pattern=".{3,}" required title="Ingrédient requis" />
                Mesure:
                <input type="number" id="measurement" min="1" />
                Unité:
                <select name="unitOfMeasure" id="unityMenu" style="width:100px">
                    <option value="" disabled selected>Choose Unity</option>
                </select>
                <button id="list_add">Ajouter</button>
                <button id="list_del">Supprimer</button>
            </li>
        </ul>

ps: si vous pensez qu'une méthode est mieux que celle ci dessus dites moi je suis flexible.


Merci d'avance.

[Jildo]

Résolu

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
Ajoutez vos ingredient:
            <ul >
                <li id="list">
                    Nom de l'ingrédient:
                    <input type="text" id="ingredientName" pattern=".{3,}" required title="Ingrédient requis" />
                    Mesure:
                    <input type="number" id="measurement" min="1" />
                    Unité:
                    <select name="unitOfMeasure" id="unityMenu" style="width:100px">
                        <option value="" disabled selected>Choose Unity</option>
                    </select>
 
                </li>
            </ul>
        <button id="list_add">Ajouter</button>

jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
        $(function () {
 
            $('#list_add').click(function () {
                $('#list').clone().insertAfter($('#list'));
            });
 
        });