Mam formularz, który pobieram dane wejściowe i używam skryptu do kopiowania mojego formularza po kliknięciu przycisku Dodaj. W moim formularzu znajduje się przycisk radiowy, który zawiera ukryty obszar tekstu. Za każdym razem, gdy wybieram value="uygunDegil", ten obszar tekstu zmienia się na widoczny. Problem polega na tym, że kiedy dołączam formularz kopiowania, nie będę mógł uzyskać dostępu do przycisku kopiowania radiowego za pomocą mojej funkcji, powiedzmy, że wybieram value="uygunDegil" na moim piątym polu kopiowania, mój pierwszy ukryty obszar tekstowy zmienia się na widoczny zamiast piątego . Muszę dodać jakiś identyfikator i iterować go do mojego formularza dynamicznie lub do mojego radiobutton, ale nie wiem, jak to zrobić. Jestem nowy w JS, więc każda pomoc lub rada będzie mile widziana.

Form.php

<form method="post">
<div class="form-group row">
  <div class="col-auto">
    <label for="ad">Ad</label>
    <input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
    <label for="soyad">Soyad</label>
    <input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
    <label for="no">No</label>
    <input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
    <label for="course">Bölümü</label>
    <input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
    <label for="alKredi">Almak İstediği Kredi</label>
    <input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
    <label for="verKredi">Alabileceği Kredi</label>
    <input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
    <label for="evetKontrol">Evet</label>
    <input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
    <label for="hayirKontrol">Hayır</label>
    <input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
    <div id="ifNo" style="visibility:hidden">
        <strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
    </div>
      <div class="input-group-addon">
          <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
      </div>
  </div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>

kopię mojego formularza, który załączam

   <div class="form-group rowCopy" style="display: none;">
    <div class="col-auto">
      <label for="ad">Ad</label>
      <input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
      <label for="soyad">Soyad</label>
      <input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
      <label for="no">No</label>
      <input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
      <label for="course">Bölümü</label>
      <input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
      <label for="alKredi">Almak İstediği Kredi</label>
      <input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
      <label for="verKredi">Alabileceği Kredi</label>
      <input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
      <?php  echo '<strong>Uygun mu?</strong><br><br>'; ?>
      <label for="evetKontrol">Evet</label>
      <input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
      <label for="hayirKontrol">Hayır</label>
      <input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
      <div id="ifNo" style="visibility:hidden">
          <strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
      </div>
        <div class="input-group-addon">
            <a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
        </div>
    </div>
</div>

fields.js

$(document).ready(function() {
   //group add limit
   var maxGroup = 25;

   //add more fields group
   $(".addMore").click(function() {
      if ($('body').find('.row').length < maxGroup) {
         var fieldHTML = '<div class="form-group row">' + $(".rowCopy").html() + '</div>';
         $('body').find('.row:last').after(fieldHTML);
      } else {
         alert('Maximum ' + maxGroup + ' groups are allowed.');
      }
   });
   //remove fields group
   $("body").on("click", ".remove", function() {
      $(this).parents(".row").remove();
   });
});

function yesnoCheck() {
   if (document.getElementById('evetKontrol').checked) {
      document.getElementById('ifNo').style.visibility = 'hidden';
   } else document.getElementById('ifNo').style.visibility = 'visible';
}

JSfiddle, aby zademonstrować

0
acaiberry 2 kwiecień 2020, 21:09

3 odpowiedzi

Najlepsza odpowiedź

Dzięki informacjom przekazanym przez ironCat udało mi się znaleźć rozwiązanie mojego problemu, trochę zmieniłem kod. Mam nadzieję, że przyda się nowicjuszom takim jak ja.

$(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^='hayirKontrol']").each(function(i, el) {
      var rel = $("#ifNo_" + i);
      if ($(el).is(":checked")) {
        rel.css("visibility", "visible");
      } else {
        rel.css("visibility", "hidden");
      }
    });
  }

  //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("change, click", "input[type='radio']", showHidden);
  showHidden();
});
<!DOCTYPE html>
<html>
  <head>
    <title>Fazla Kredi</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
  </head>
  <body>

    <form method="post">
      <div class="form-group row" id="container">
        <div class="col-auto" id="ogrenci_0">
          <label for="ad">Ad</label>
          <input type="text" name="ad[]" class="form-control" id="ad_0" placeholder="Öğrencinin Adı" />
          <label for="soyad">Soyad</label>
          <input type="text" name="soyad[]" class="form-control" id="soyad_0" placeholder="Öğrencinin Soyadı" />
          <label for="no">No</label>
          <input type="text" name="numara[]" class="form-control" id="no_0" placeholder="Öğrencinin Numarası">
          <label for="course">Bölümü</label>
          <input type="text" name="bolum[]" class="form-control" id="course_0" placeholder="Öğrencinin Bölümü">
          <label for="alKredi">Almak İstediği Kredi</label>
          <input type="text" name="alKredi[]" class="form-control" id="alKredi_0" placeholder="Almak İstediği Kredi">
          <label for="verKredi">Alabileceği Kredi</label>
          <input type="text" name="verKredi[]" class="form-control" id="verKredi_0" placeholder="Alabileceği Kredi">
          <label for=""><strong>Uygun mu?</strong> </label><br>
          <label for="evetKontrol_0">Evet</label>
          <input type="radio" id="evetKontrol_0" name="uygun_0" value="uygun" checked>
          <label for="hayirKontrol_0">Hayır</label>
          <input type="radio" id="hayirKontrol_0" name="uygun_0" 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>
          <div class="input-group-addon">
            <a href="javascript:void(0)" id="add" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
          </div>
        </div>
      </div>
      <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
    </form>
<script src="fields.js"></script>
  </body>
</html>
0
acaiberry 5 kwiecień 2020, 20:30

Spróbuj dodać var counter = 0; i '<div class="form-group row" id="radio' + counter +'">'

$(document).ready(function() {
       //group add limit
       var maxGroup = 25;
       var counter = 0;


       //add more fields group
       $(".addMore").click(function() {
          if ($('body').find('.row').length < maxGroup) {
             var fieldHTML = '<div class="form-group row" id="radio' + counter +'">' + $(".rowCopy").html() + '</div>';
             counter +=1;
             $('body').find('.row:last').after(fieldHTML);
          } else {
             alert('Maximum ' + maxGroup + ' groups are allowed.');
          }
       });

Lub prosta klasa bez liczników <div class="form-group row" class="myRadio">

2
ironCat 2 kwiecień 2020, 18:27

Przełącz „ifNo” na klasę - identyfikatory MUSZĄ być unikalne, aby działały poprawnie - a następnie umieść to w swoim yesnoCheck:

$ (this) .parent (). find ('. ifNo'). css ('visibility', 'visible')

Rodzic (liczba pojedyncza, aby przejść tylko o jeden poziom wyżej!) Umieszcza cię na .col-auto, więc nadal jesteś w swoim wierszu, a find znajduje tylko „ifNo”, którego chcesz.

Co działa wystarczająco dobrze na coś tak prostego. Ale do wszystkiego, co jest zdalnie skomplikowane, używam tego samego pomysłu, który opublikował ironCat: generuj unikalne identyfikatory wierszy i używaj ich do nawigacji.

1
Roger Krueger 3 kwiecień 2020, 11:21