Enlever l'attribut required après avoir utiliser une fois le bouton

Version imprimable

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 <div style=" text-align:center;">
                                                    <button type="button" id="addNewEntryButton" >Ajouter une ligne</button><BR>
 
                                                    Veuillez cliquer au moins une fois sur ce bouton.
 
 
 
                                                    <table style="margin-left:200px" id="ajout">
 
                                                        <thead>
 
                                                            <tr>
                                                                <th style="border: 1px solid black;">Sous-lieu de la zone</th>
                                                                <th style="border: 1px solid black;">Anomalies</th>
                                                                <th style="border: 1px solid black;">Photos</th>
                                                            </tr>
 
                                                        </thead>
 
                                                        <tbody>
                                                            <!-- Contenu dynamique du tableau -->
                                                        </tbody>
 
                                                    </table>
 
 
 
                                                    <script>
                                                        const addNewEntryButton = document.getElementById("addNewEntryButton")
                                                        const tableTbody = document.querySelector("#ajout tbody")
 
                                                        addNewEntryButton.onclick = () => {
                                                            const entryNumber = tableTbody.childElementCount
                                                            const tr = document.createElement("tr")
 
                                                            tr.innerHTML =
                                                                `<td><textarea  required style="width: 250px; text-align:center; margin:auto;
 height: 20px;" name="lieu[${entryNumber}]"  rows="4" cols="40" placeholder="sous-lieu n°${entryNumber}"></textarea></td>` +
                                                                `<td><textarea  style="width: 250px; margin:auto;
 height: 20px;" name="ano[${entryNumber}]" rows="4" cols="40"placeholder="anomalie n°${entryNumber}"></textarea></td>` +
                                                                `<td><input     style="width: 250px; margin:auto;
  height: 20px;" name="fichier${entryNumber}[]" type="file" placeholder="oii" multiple><br></textarea></td>`
 
                                                            tableTbody.appendChild(tr)
                                                        }
                                                    </script>

bonjour j'ai besoin de mettre le bouton en required, mais lorsqu'il a été utilisé une fois, il n'est plus obligatoire, je sais pas vraiment comment faire.
Merci

21/06/2021, 09h42
SpaceFrog

Il y a un post traité il y a peu qui parle d'un sujet assez proche du tien...

https://www.developpez.net/forums/d2...e-radio-coche/
21/06/2021, 09h50
Soden78

Merci mais ce post est aussi le mien mais il n'est pas assez similaire pour que je comprenne comment faire ^^, j'ai déjà essayé qlq trucs et si je demande c'est que je suis vraiment bloqué,
je dois faire un element.removeAttribute('required') sur un onchange j'imagine mais je n'y arrive pas ^^
21/06/2021, 13h36
SpaceFrog

Peux tu préciser ce que tu entends exactement par "mais lorsqu'il a été utilisé une fois" ?

Mettre l'attribut required sur un bouton ne sert à rien, ça n'empêchera pas d'envoyer le formulaire.

Ce que tu cherche à faire est d'appeler la fonction qui ajoute une ligne au tableau une première fois sans avoir besoin d'attendre que l'utilisateur aient a cliquer sur le bouton.

Il faudra mettre la fonction qui est appelée dans addNewEntryButton.onclick = à part puis l'appeler une première fois pour ajouter la première ligne au formulaire et s'en resservir une seconde fois passée comme événement onclick.

Ca ressemblera donc à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      const addNewEntryButton = document.getElementById("addNewEntryButton")
      const tableTbody = document.querySelector("#ajout tbody")
 
      const addNewEntry = () => {
        const entryNumber = tableTbody.childElementCount
        const tr = document.createElement("tr")
 
        tr.innerHTML =
          `<td><textarea  required style="width: 250px; text-align:center; margin:auto;
height: 20px;" name="lieu[${entryNumber}]"  rows="4" cols="40" placeholder="sous-lieu n°${entryNumber}"></textarea></td>` +
          `<td><textarea  style="width: 250px; margin:auto;
height: 20px;" name="ano[${entryNumber}]" rows="4" cols="40"placeholder="anomalie n°${entryNumber}"></textarea></td>` +
          `<td><input     style="width: 250px; margin:auto;
height: 20px;" name="fichier${entryNumber}[]" type="file" placeholder="oii" multiple><br></textarea></td>`
 
        tableTbody.appendChild(tr)
      }
 
      // On ajoute la première ligne au tableau directement
      addNewEntry()
 
      // On rajoute la possibilité d'ajouter de nouvelles entrées
      // a chaque click de l'utilisateur sur le bouton
      addNewEntryButton.onclick = () => addNewEntry()