[JavaScript][HTML][PHP]Problem z licznikiem jquery Opcje

[inomi13]

Witam, mam problem z licznikiem w poniższym kodzie. Po dodaniu np. 5 wierszy i kiedy w 1,2,3,4 wierszu zmieniam option na name2 to zawsze input domain zmienia mi w ostatnim wierszu a nie w tym wierszu w którym właśnie jestem.

[HTML] pobierz, plaintext 
<div class="row">
  <div class="col-md-3 col-sm-12">	
	<select id="select_register" name="service_name[0]" class="form-select">
	  <option value="name1">1</option>
	  <option value="name2">2</option>
	</select>
 </div>
 <div id="domain" class="col-md-3 col-sm-12" style="display:none;">	
	<input type="text" name="domain_name[0]" class="form-control">
 </div>
 <div class="col-md-3 col-sm-12">	
	<button type="button" id="add" class="btn btn-success form">Dodaj</button>
 </div>
</div>
<div id="more_register_form"><div class="row">	
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
	$(document).ready(function(){
		  var counter = 1;
		  $("#add").click(function () {
			var html = '';
			html += '<div class="row"><div class="col-md-3 col-sm-4">
			html += '<select id="select_register' + [counter] + '" name="service_name[' + [counter] + ']" class="form-select">';
			html += '<option value="name1">1</option>';
			html += '<option value="name2">2</option></select>';
			html += '<div id="domain[' + [counter] + ']" class="col-md-3 col-sm-12" style="display:none;"><input type="text" name="domain_name[' + [counter] + ']" class="form-control"></div>';
			html += '<div class="col-md-3 col-sm-4"><button type="button" id="remove" class="btn btn-danger form">Usuń usługę </button><br/></div></div>';
 
			$('#more_register_form').append(html);
			$(document).on('click', '#remove', function (){
				$(this).closest('.row').remove();
				counter = 1;
			});	
 
			$('#select_register'.counter).on('change', function() {
			  if(this.value == 'name2'){
				$('#domain'.counter).show();
			  }
			  else{
				$('#domain'.counter).hide();
			  }
 
			counter ++;	
			});
		});
		});
[HTML] pobierz, plaintext 

Ten post edytował inomi13 11.03.2022, 17:22:52

[nospor]

$('#domain'.counter).show();
No bo counter ma wowczas ostatnia wartosc.
Zamiast bawic sie liczby, to lec po klasach i szukaj domain w tym samym div co twoj select i z banki

[trueblue]

Linie 13-16, to powinno się znaleźć na zewnątrz i dlaczego po usunięciu wiersza ustawiasz counter=1?

Co to za konstrukcja $('#select_register'.counter) ?

[inomi13]

Faktycznie źle przepisałem kod. Nie do końca rozumiem jak przerobić aby lecieć po klasach. Sprawdziłem i zmieniając tylko select bez warunków też zwraca tylko ostatnią wartość anie tą którą aktualnie klikam.

[HTML] pobierz, plaintext 
$(document).on('change', '#select_register'+counter, function (){ 
alert('#select_register'+counter);
};
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
	    $(document).ready(function(){
    		  var counter = 1;
    		  $("#add").click(function () {
    			var html = '';
    			html += '<div class="row"><div class="col-md-3 col-sm-4">
    			html += '<select id="select_register' + [counter] + '" name="service_name[' + [counter] + ']" class="form-select">';
    			html += '<option value="name1">1</option>';
    			html += '<option value="name2">2</option></select>';
    			html += '<div id="domain[' + [counter] + ']" class="col-md-3 col-sm-12" style="display:none;"><input type="text" name="domain_name[' + [counter] + ']" class="form-control"></div>';
    			html += '<div class="col-md-3 col-sm-4"><button type="button" id="remove" class="btn btn-danger form">Usuń usługę </button><br/></div></div>';
 
				$(document).on('change', '#select_register'+counter, function (){ 
				var selected = $(this).val(); 
				if(selected == 'another')
				{ 
					$('#domain'+counter).show(); 
				} 
		     	else
				{ 
					$('#domain'+counter).hide(); 
				} 
				});
    			counter ++;	
    			});
				$('#more_register_form').append(html);
				$(document).on('click', '#remove', function (){
				$(this).closest('.row').remove();
				counter = 1;
				});
    		});
    		});
[HTML] pobierz, plaintext 

[nospor]

Sprawdziłem i zmieniając tylko select bez warunków też zwraca tylko ostatnią wartość anie tą którą aktualnie klikam.

No przeciez juz ci to wyjasnilem: counter na tym etapie ma ostatnia wartosc. To jest zmienna globalna i to co miala ostatnio to ma nadal. Niewazne czy uzyjesz jeden warunek, 1000 warunkow czy zadnego

[inomi13]

Nie kuman jak mam to zrobići już się w tym wszystkie pogubiłem. Przerabiając fragment kodu na klasy input #domain dodaje się tylko do pierwszego wiersza. W jaki sposób zrobić unikalną nazwę klasę ?

[HTML] pobierz, plaintext 
$(document).on('change', '#select_register', function (){ 
var selected = $(this).val(); 
 if(selected == 'another')
{
 $('#domain').show(); 
} 
else
 { 
 $('#domain').hide(); 
 } 
});
[HTML] pobierz, plaintext 

Ten post edytował inomi13 11.03.2022, 17:48:18

[nospor]

Klas nie robi sie unikalnych. Mowilem, szukaj klasy w dive z select. a ty teraz lecisz po id #domain i zdziiwony ze lapie ci pierwszy.
1) Rozrozniaj co to ID a co to klasa
2) Czytaj co sie do ciebie pisze
3) Nadaj klase dla divow domain, i potem bierz ten div domain z klasa, ktory lezy w tym samym divie co select, z ktorego wlasnie wybrales. Jak znalezc ten div co lezy w nim select? No jquery ma takie bajery jak PARENT().

[inomi13]

Zrobiłem tak i display:block jest dodawany do wszystkich inputów a nie do tego konkretnego.

[HTML] pobierz, plaintext 
html += '<div class="col-md-3 col-sm-12" style="display:none;"><input type="text" name="domain_name[' + [counter] + ']" class="domain form-control"></div>';
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
$(document).on('change', '#select_register', function (){ 
 
 var selected = $(this).val(); 
 if(selected == 'name2')
 {
	 $(".domain ").parent().css({"display": "block"});
 } 
 else
 { 
 
	 $(".domain ").parent().css({"display": "none"});
 } 
 });
[HTML] pobierz, plaintext 

[viking]

Sprawdź sobie w konsoli co w zdarzeniu on.change da $(this)

[inomi13]

Ustawiając $(document).on('change', this, function () w konsoli nie wyświetla się żadna informacja. Cały czas nie wiem jak ogarnąć kwestie aby $(".domain ").parent().css({"display": "none"}); działał tylko do danego wiersza a nie do wszystkich.

[nospor]

Cały czas nie wiem jak ogarnąć kwestie aby $(".domain ").parent().css({"display": "none"}); działał tylko do danego wiersza a nie do wszystkich.

Ostatni raz pisze: czytaj co sie do ciebie pisze. Wyraznie ci napisalem od czego masz robic parent i dopiero majac ten parent masz szukac domain. A ty przeczytasz cos po lebkach, potem walisz losowy kod i placzesz ze nei dziala.... :/

[inomi13]

Przecież ja nie proszę o gotowy kod tylko o konkretną sugestie a nie zdawkowe odpowiedzi. Chyba po to jest forum... Jak pisze że nie rozumiem do końca twoich sugestii więc jak ma zrobić tak jak proponujesz.

Skoro mam html i dodając klasę do div domain to jak ma działać parent() skoro działa on tylko do klasy wyżej? Tak jak wspominałem chce żeby po wybraniu opcji "name2" pokazywał się div z domain i chował kiedy wybierze się inną opcję.

[HTML] pobierz, plaintext 
 
<div class="col-md-3 col-sm-12">	
	<select id="select_register" name="service_name[0]" class="form-select">
	  <option value="name1">1</option>
	  <option value="name2">2</option>
	</select>
 </div>
 <div id="domain" class="col-md-3 col-sm-12" style="display:none;">	
	<input type="text" name="domain_name[0]" class="form-control">
 </div>
[HTML] pobierz, plaintext 

[viking]

$(document).on('change', this, function () ciekawa skladnia ale nie ma nic wspólnego z dokumentacją jquery.

$(document).on('change', function () {
console.log($(this))
})

[inomi13]

Faktycznie masz racje jest błędna składnia jednak cały czas nie mogę złapać punktu zaczepienia jak to ugryźć bo ile nie ma problemu z pokazanie div domain w danym wierszu to cały czas tkwię w miejscu jak zrobić aby div domain hide działał w wyznaczonym wierszu a nie w każdym. Czy parent() dać do warunku czy do wyniku

Ten post edytował inomi13 12.03.2022, 11:07:03

[nospor]

Przecież ja nie proszę o gotowy kod tylko o konkretną sugestie

I taka ode mnie dostales ale ja olales. Sie uparles ze masz dojsc do domain i ignorujeszz wszystko po drodze. No nie moja wina Wyraznie po raz kolejny ci powtarzam, ze parent masz pobrac na podstawie selecta z ktorego wybrales dane ale ty mnie nie sluchasz. No to co ja mam poradzic na to?

[inomi13]

Na głowiłem się z tym parent() ale w ten sposób nie udało mi się tego zrobić. Znalazłem gdzieś na forum podobny problem i po przerobieniu kodu teraz wszystko gra. Dzięki wszystkim za pomoc i cierpliwość.

[HTML] pobierz, plaintext 
$(document).on('change', '#select_register', function (){ 
const selected = $(this).val(); 
const row = $(this).closest('.row');
if (selected == 'name2') 
{
 row.find('.domain').show();
} 
else 
{
  row.find('.domain').hide();
}
[HTML] pobierz, plaintext 

[nospor]

A wersja z parentem by wygladala tak:
zamiast
const row = $(this).closest('.row');

by bylo
const row = $(this).parent();

I reszta tak samo jak masz w poprzednim poscie. Zadna filozofia