0
votes

JavaScript: Comment remplir plusieurs entrées en utilisant OnClick

Utilisation de boutons OnClick, comment puis-je remplir toutes les entrées de ma page qui contenant toinput forge> id.

Dans ce simple extrait, vous ne pouvez voir que la première entrée est remplie. P>

Comment pouvez-vous remplir ces 2 entrées en un clic lorsque je lance le mode modal. p>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<!-- Button trigger modal -->
<button onclick=(getid(10)) type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input id="toinput" value="">
        <input id="toinput" value="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

javascript jquery html

1 commentaires

Tout votre code est correct mais vous avez utilisé deux identifiants. Et l'identifiant doit être unique. Pour résoudre votre problème, tout ce que j'ai fait est un identifiant de changement avec classe. Puisque la classe peut être répétée. Et votre code fonctionne comme indiqué dans ma réponse ci-dessous.

3 Réponses :

1
votes

Tout votre code est correct mais vous avez utilisé deux identifiants. et id doit être unique. strong> Pour résoudre votre problème, tout ce que j'ai fait est ID de commutateur avec classe forte>. Étant donné que Les classes peuvent être répétées forte>. Et votre code fonctionne comme indiqué ci-dessous.

3 commentaires

Les identifiants sont destinés à articles uniques . S'il y en a plus d'un, il n'est plus considéré comme «unique».

@Davidboe. Vous ne devez pas utiliser d'identifiant pour plus d'un article sur une seule page. Ils sont censés être uniques. Donc, chaque fois que vous devez cibler plusieurs éléments, veuillez utiliser des cours. C'est ce que les classes sont faites pour.

@Davidboe n'hésitez pas à en savoir plus sur les classes ID VS. Voici un lien pour vous aider à commencer avec: CSS-Tricks.com / la différence - entre-id-identifiant

1
votes

Vous donnez à la fois les entrées le même ID, mais il doit toujours être unique. Au lieu de cela, s'il n'interfère pas avec votre CSS, modifiez l'ID en classe = "TOInput" pour les deux et modifier votre code JQuery comme suit:
$ ('. TOINPUT'). VAL (ID);
Vous pouvez également utiliser la classe DIV à cette fin comme ci-dessous:
$ ('. entrée de corps modal'). Val (ID);
0 commentaires
2 votes c'est-telle exactement pour Toutes les entrées de votre page qui commencent par TOINPUT ID CODE> P> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  <button onclick=(getid(10)) type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <input id="toinput_0" value=""> <input id="toinput_1" value=""> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 0 commentaires

Articles qui pourrait vous intéresser : Impossible d'importer le module "@ angular / material" Interaction profonde avec break and catch Utilisation de node.js comment renommer tous les fichiers d'un dossier Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO