Jquery, duplikowanie pól formularzy i przepisanie w nich wartości

Odpowiedz Nowy wątek
2017-02-10 12:55

Rejestracja: 4 lata temu

Ostatnio: 11 miesięcy temu

0

Hej, mam taki problem z Jquery, wynikający chyba z mojego niewłaściwego rozumienia tego, jak JavaScript rozpoznaje model DOM.

Wygląda to tak: mam formularz, w którym mam taki div:

<div class="clone"> 
       <input class="first_input" name="pole[]" type="text" value = "23">
       <input class="second_input" id = "pole" name="wynik[]" type = "text" readonly>
   </div>

Mam funkcję, która pozwala duplikować ten div tworząc kolejne pola formularza. Chciałbym, żeby pole "second-input" wyświetlało zawsze zawartość odpowiedniego pola "first_input" pomnożone np przez 2. Mam coś takiego

$(".first_input").keyup(function(){
        $(".clone :nth-child(2)").val($(".clone :nth-child(1)").val() * 2);
    });

Problem polega na tym, że w tych kolejno dodanych polach wyświetla się pomnożona wartość z pierwszego pola, tzn zawsze jest brane pod uwagę to najwyższe pole, a nie to które zostało dodane.

JQuery prawie w ogóle nie używam, więc proszę o wyrozumiałość i z góry dzięki za pomoc :)

Pozostało 580 znaków

2017-02-10 13:04

Rejestracja: 9 lat temu

Ostatnio: 3 miesiące temu

0

Pokaż jeszcze funkcję która duplikuje tego diva.

Pozostało 580 znaków

2017-02-10 13:07

Rejestracja: 4 lata temu

Ostatnio: 11 miesięcy temu

0

http://www.andresvidal.com/labs/relcopy.html

Domyślnie każdy kolejny div miał class = "clone copy 1,2,3... itd " jak zmieniłem ze klasa się nie zmienia i jest ciągle samo clone. Generalnie wygląda to tak jakby JQuery łapało tylko pierwsze występnie ".clone"

Pozostało 580 znaków

2017-02-10 13:08

Rejestracja: 9 lat temu

Ostatnio: 3 godziny temu

0

Ponieważ korzystasz z klas to selektor ".clone" bierze wszystkie zduplikowane divy. Przez to prawdopodobnie ostatecznie wynika branie wartości z pierwszego diva.
Zamiana

 $(".clone :nth-child(2)").val($(".clone :nth-child(1)").val() * 2);

Na

$(this).closest(".clone :nth-child(2)").val($(this).closest(".clone :nth-child(1)").val() * 2);

Powinna pomóc

Edit: Żeby doprecyzować. Funkcja closest() bierze najbliższy, względem wybranego elementu, obiekt spełniający warunek


edytowany 1x, ostatnio: mar-ek1, 2017-02-10 13:10

Pozostało 580 znaków

2017-02-10 13:13

Rejestracja: 4 lata temu

Ostatnio: 11 miesięcy temu

0
mar-ek1 napisał(a):

Ponieważ korzystasz z klas to selektor ".clone" bierze wszystkie zduplikowane divy. Przez to prawdopodobnie ostatecznie wynika branie wartości z pierwszego diva.
Zamiana

 $(".clone :nth-child(2)").val($(".clone :nth-child(1)").val() * 2);

Na

$(this).closest(".clone :nth-child(2)").val($(this).closest(".clone :nth-child(1)").val() * 2);

Powinna pomóc

Edit: Żeby doprecyzować. Funkcja closest() bierze najbliższy, względem wybranego elementu, obiekt spełniający warunek

Hmm.. Nie działa.. inna sprawa, że nie bardzo rozumiem Twój tok rozumowania :) Głównie chodzi mi dwa pierwsze zdania.

edytowany 1x, ostatnio: thalion, 2017-02-10 13:14

Pozostało 580 znaków

2017-02-10 13:18

Rejestracja: 9 lat temu

Ostatnio: 3 godziny temu

0

Nie musisz cytować całego posta, który jest zaraz powyżej ;)

A co do mojego toku rozumowania to tak:
Jeśli dobrze zrozumiałem co chcesz zrobić to chcesz, żeby po wpisaniu czegoś w pole z klasą first_input wartość w polu second_input była wartością tego pierwszego x2. Jeśli to ma działać niezależnie dla każdej pary to w metodzie obsługującej zdarzenie wpisania czegoś trzeba jakoś wybrać ten konkretny input, po to ta zabawa z this i closest - żeby wybierało faktycznie najbliższy element, a nie wszystkie.

Inna sprawa, że w sumie to walnąłem drogę naokoło, bo skoro w divie są tylko 2 inputy to można tak:

 $(".first_input").keyup(function(){
        $(this).closest(".second_input").val($(this).val() * 2);
    });

Bo w funkcji jako this będzie ten pierwszy input ;)

A co do pierwszych zdań to chodziło mi o to, że skoro wybierasz w selektorze pierwsze dziecko elementu z klasą .clone, a klasę .clone ma każdy skopiowany div to bardzo prawdopodobne, że jquery bierze właśnie wartość tylko z pierwszego. Chociaż dokładnie to selektor ".clone :nth-child(2)" zwróci wszystkie drugie inputy we wszystkich divach


edytowany 1x, ostatnio: mar-ek1, 2017-02-10 13:21

Pozostało 580 znaków

2017-02-10 13:21

Rejestracja: 4 lata temu

Ostatnio: 11 miesięcy temu

0

No tak. Niby wszystko się zgadza, tylko że przy użyciu Twojego kodu po dodaniu kolejnych kopii nie pobiera już nawet tej wartości z pierwszego :) Pole pozostaje puste + nie działa przepisywanie w pierwszym rzędzie:-)

edytowany 2x, ostatnio: thalion, 2017-02-10 13:22
Szczerze mówiąc byłem przekonany, że to bardzo proste i, że nie będzie z tym żadnych problemów :D - thalion 2017-02-10 13:24
Sam też nie jestem mistrzem przekazywania wiedzy więc może zaraz ktoś w 2 zdaniach to jaśniej opowie :D - mar-ek1 2017-02-10 13:27

Pozostało 580 znaków

2017-02-10 13:25

Rejestracja: 9 lat temu

Ostatnio: 3 godziny temu

0

Piszę z głowy, mogłem gdzieś literówkę walnąć ;) Konsola JS coś mówi?

Poza tym jak dodajesz element to jak dobrze pamiętam to trzeba zarejestrować dla niego zdarzenie na nowo czyli wywołać

 $(".first_input").keyup(function(){
...

na nowo, albo zamiast tego dać:

 $(document)on("keyup", ".first_input", function(){

Czyli zarejestrować zdarzenie keyup dla dokumentu, ale wywoływać je tylko dla elementów z klasą ".first_input"


Z rejestracją chyba nie ma problemów, bo przecież wcześniej działało zdarzenie, tylko w niewłaściwy sposób -> funkcja się opalała - thalion 2017-02-10 13:28
...a konsola milczy :) - thalion 2017-02-10 13:29
Zawsze zostaje debugowanie za pomocą console.log() ;) Wypisujesz różne zmienne w różnych miejscach i pewnie znajdzie się winowajca - mar-ek1 2017-02-10 13:30
Ale ja jednego nie rozumiem. Kiedy pobieram coś takiego $(".klasa") to myślałem, że zwracany jest zbiór dowiązań do każdego obiektu oddzielnie więc każde odwołanie się od tego dowiązania będzie względem każdego z nich a nie pierwszego (to przeciez normalne, że elementów o takiej samej klasie jest wiele) - thalion 2017-02-10 13:36
Aż tak dalekich logicznych wytłumaczeń działania JQuery bym nie ryzykował :D - mar-ek1 2017-02-10 13:37
Wolę nie myśleć co będzie jak będę chciał zsumować wszystkie wartości z tych duplikowanych pól :P - thalion 2017-02-10 13:40

Pozostało 580 znaków

2017-02-10 13:58

Rejestracja: 4 lata temu

Ostatnio: 11 miesięcy temu

0

Na razie poradziłem sobie inaczej. Pozmieniałem wszystko tak, że każdy kolejny rząd zawiera pola z id first+n i second+n. Dzięki temu odwołuje się w pętli do każdego z osobna i problem nie występuje.

Pozostało 580 znaków

Odpowiedz

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0