J'ai un formulaire html. Chaque fois que je clique sur le bouton Ajouter, une autre copie s’ajoute. Chaque fois que je clique sur le bouton Ajouter, l'ID de mes éléments augmente, comme username_0, username_1, username_2 ... Il y a 2 boutons radio sur mon formulaire qui chaque fois que je choisis le deuxième bouton radio, une zone de texte masquée apparaît. Le problème est que j'ai du mal à choisir mes identifiants dynamiques de boutons radio. J'ai fait une fonction mais ça ne fonctionne que pour le premier élément car je ne peux pas obtenir les identifiants dynamiques

    <label for="evetKontrol_0">Evet</label>
    <input type="radio" id="evetKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygun" checked>
    <label for="hayirKontrol_0">Hayır</label>
    <input type="radio" id="hayirKontrol_0" name="uygun_0" onclick="javascript:yesnoCheck();" value="uygunDegil">
    <div id="ifNo_0" style="visibility:hidden">
        <strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_0" name="hayirSebep" style="height: 75px"><br>
    </div>
    function yesnoCheck() {
      if (document.getElementById('evetKontrol_0').checked) {
          document.getElementById('ifNo_0').style.visibility = 'hidden';
      }
      else document.getElementById('ifNo_0').style.visibility = 'visible';


    }

Je dois pouvoir obtenir mon evetKontrol_#somenumber pour ma fonction pour chaque copie de mon formulaire.

JSfiddle / tout mon code

J'ai essayé d'utiliser jQuery( "[attribute*='value']" ) mais je n'ai pas réussi à le résoudre.

0
acaiberry 5 avril 2020 à 20:54

3 réponses

Meilleure réponse

Considérer ce qui suit.

Exemple de travail: https://jsfiddle.net/Twisty/sonvakq2/21/

JavaScript

$(function() {

  function addElement(tObj) {
    var counter = $("[id^='ogrenci']", tObj).length;
    var html = '<div class="col-auto" id="ogrenci_' + counter + '"><label for="ad">Ad</label><input type="text" name="ad[]" class="form-control" id="ad_' + counter + '" placeholder="Öğrencinin Adı"/><label for="soyad">Soyad</label><input type="text" name="soyad[]" class="form-control" id="soyad_' + counter + '" placeholder="Öğrencinin Soyadı"/><label for="no">No</label><input type="text" name="numara[]" class="form-control" id="no_' + counter + '" placeholder="Öğrencinin Numarası"><label for="course">Bölümü</label><input type="text" name="bolum[]" class="form-control" id="course_' + counter + '" placeholder="Öğrencinin Bölümü"><label for="alKredi">Almak İstediği Kredi</label><input type="text" name="alKredi[]" class="form-control" id="alKredi_' + counter + '" placeholder="Almak İstediği Kredi"><label for="verKredi">Alabileceği Kredi</label><input type="text" name="verKredi[]" class="form-control" id="verKredi_' + counter + '" placeholder="Alabileceği Kredi"><label for=""><strong>Uygun mu?</strong> </label><br><label for="evetKontrol_' + counter + '">Evet</label><input type="radio" id="evetKontrol_' + counter + '" name="uygun_' + counter + '" value="uygun" checked><label for="hayirKontrol_' + counter + '">Hayır</label><input type="radio" id="hayirKontrol_' + counter + '" name="uygun_' + counter + '" value="uygunDegil"><div id="ifNo_' + counter + '" style="visibility:hidden"><strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep_' + counter + '" name="hayirSebep" style="height: 75px"><br></div><div class="input-group-addon"><a href="#" id="remove_' + counter + '" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a></div></div>';
    tObj.append(html);
  }

  function showHidden() {
    $("[id^='evetKontrol']").each(function(i, el) {
      var rel = $("#ifNo_" + i);
      if ($(el).is(":checked")) {
        rel.show();
      } else {
        rel.hide();
      }
    });
  }

  //add more fields group
  $("#add").click(function() {
    addElement($("#container"));
  });

  //remove fields group
  $('#container').on('click', "a[id^='remove']", function() {
    $(this).parents('div.col-auto').remove();
  });

  $("#container").on("click", "input[type='radio']", showHidden);
});

Votre violon n'était pas configuré correctement, j'ai donc abordé cela en premier. J'ai déplacé de nombreux éléments reproductibles dans les fonctions. Commuté tout le jQuery et supprimé tous les appels javascript locaux.

Vous pouvez voir des exemples d'utilisation du sélecteur d'attributs de manière relative pour sélectionner les éléments souhaités.

Voir plus: https://api.jquery.com/category/selectors/attribute- sélecteurs /

1
Twisty 5 avril 2020 à 19:07

Afin d'obtenir le evetKontrol_#somenumber, passez ce nombre dans la fonction onclick.

Dans votre JSfiddle, cela signifierait la concaténation de la variable counter dans les paramètres de fonction comme

... onclick="javascript:yesnoCheck(' + counter + ');" ...

Mettez ensuite à jour la fonction pour utiliser cette valeur:

function yesnoCheck(counter) {
  if (document.getElementById('evetKontrol_' + counter).checked) {
    document.getElementById('ifNo_' + counter).style.visibility = 'hidden';
  } else {
    document.getElementById('ifNo_' + counter).style.visibility = 'visible';
  }
0
justinseibert 5 avril 2020 à 18:24

Vous ne devriez pas avoir besoin d'utiliser des identifiants pour cela. Capturez simplement l'événement onclick et passez un booléen pour déterminer si l'entrée masquée doit être affichée. Si vous avez plusieurs entrées à afficher et à masquer séparément, vous pouvez transmettre l'ID de l'entrée avec le booléen.

function yesnoCheck(show) {
  var ta = document.getElementById('hiddenTA');
  if (show) {
    ta.style.visibility = 'visible';
  } else {
    ta.style.visibility = 'hidden';
  }
}
<label for="user1_0">User 1</label>
<input type="radio" name="users" id="user1_0" onclick="yesnoCheck(false)" checked />
<label for="user2_0">User 2</label>
<input type="radio" name="users" id="user2_0" onclick="yesnoCheck(true)" />

<input style="visibility:hidden" id="hiddenTA" />
0
Jack 5 avril 2020 à 18:16