Formularze bez przeładowania strony

Rejestracja:około 6 lat
Ostatnio:około 4 lata
Postów:22

Witam,
mam listę produktów którą wyświetlam za pomocą php foreach, przy każdym produkcie jest możliwość wyboru rozmiaru jak i sztuk:

Kopiuj

<?php foreach ($produkty_w_kategorii as $produkt): ?>

	<input type="hidden" class="id_produktu"  name="id_produktu" value="<?php echo $produkt->id?>">
	<input type="radio" class="rozmiar"  name="rozmiar" value="L" > L
	<input type="radio" class="rozmiar"  name="rozmiar" value="XL"> XL
	<input type="text" class="sztuk"  name="sztuk" placeholder="Ilość szt" value="1">	
			
	<button class="formsubmit">Dodaj</button>
<?php endforeach ?>

I mam do tego taki kod js:

Kopiuj

<script>
	$(document).ready(function(){

	$('.formsubmit').click(function(){
		$.post(" <?php echo base_url('produkty/koszyk'); ?> ", 
			{id_produktu: $('.id_produktu').val(), rozmiar: $('.rozmiar').val(), sztuk: $('.sztuk').val()}, 
			function(data){
				$('#response').html(data);
			}
		);
		
	});

});

</script>

I niestety kod ten działa w ten sposób że odczytuje dane (np wybrany rozmiar) tylko z pierwszego produktu wygenerowanego przez foreach i dodaje go do koszyka
Przy każdym produkcie jest taki formularz i przycisk jednak każdy przycisk tak jak by pobiera dane zawsze pierwszego produktu. Np jeśli zaznaczę inny rozmiar przy produkcie numer 1
a przycisk dodaj kliknę przy produkcie numer 3 to w koszyku jest tylko produkt nr 1 z wybranym rozmiarem.
Procedura samego dodawania do koszyka jest poprawna ponieważ działał poprawnie tylko że z przeładowaniem strony, a chce wyeliminować to przeładowanie.
Mam nadzieję że zrozumiecie o co mi chodzi :)

edytowany 2x, ostatnio: flowCRANE 2019-03-05 17:02

Neqero

2019-02-24 21:36

Neqero2019-02-24 21:36

Rejestracja:około 10 lat
Ostatnio:prawie 3 lata
Postów:77

Hmmm wydaje mi się że closest() może Ci pomóc. Klikając na przycisk musisz pobrać wartości dokładnie z tego formularza. Closest pozwoli Ci pobrać najbliższe wartości. Ewentualnie możesz coś z $(this) pokombinować. Poczytaj sobie jak działa closest()

arczinosek

2019-02-25 16:20

arczinosek2019-02-25 16:20

Rejestracja:prawie 7 lat
Ostatnio:około rok
Lokalizacja:Warszawa
Postów:86

Albo zrób dla każdego produktu osobny formularz albo zamiast robić pole <input type="hidden" name="id_produktu"> zrób indeks do każdego pola: name="rozmiar[<?=$id_produktu;?>]", name="sztuk[<?=$id_produktu]".
W tej chwili masz zduplikowane nazwy pól i dlatego wczytuje Ci te pierwsze a pozostałe pomija.

PavlO.

2019-02-26 14:34

PavlO.2019-02-26 14:34

Rejestracja:około 6 lat
Ostatnio:około 4 lata
Postów:22

Z id w name fajny pomysł, nawet myślałem o takim tylko jak to w php później pobrać, trzeba by pętle po wszystkich możliwych id? Jakiś inny pomysł?

Neqero

2019-02-26 14:44

Neqero2019-02-26 14:44

Rejestracja:około 10 lat
Ostatnio:prawie 3 lata
Postów:77

$(this).closest('.id_produktu').val() działa coś takeigo ?

PavlO.

2019-02-26 14:51

PavlO.2019-02-26 14:51

Rejestracja:około 6 lat
Ostatnio:około 4 lata
Postów:22

{id_produktu: $(this).closest('.id_produktu').val(), rozmiar: $(this).closest('.rozmiar').val(), sztuk: $(this).closest('.sztuk').val()},

nie działa, dla żadnego produktu z listy

edytowany 1x, ostatnio: PavlO. 2019-02-26 14:52

arczinosek

2019-02-26 15:42

arczinosek2019-02-26 15:42

Rejestracja:prawie 7 lat
Ostatnio:około rok
Lokalizacja:Warszawa
Postów:86

PavlO. napisał(a):

Z id w name fajny pomysł, nawet myślałem o takim tylko jak to w php później pobrać, trzeba by pętle po wszystkich możliwych id? Jakiś inny pomysł?

Możesz zrobić jeszcze w ten sposób:

Kopiuj

<input type="radio" name="produkt[<?=$produkt_id;?>][rozmiar]" value="XL">
<input type="number" name="produkt[<?=$produkt_id;?>][sztuk]" value="1">

a później jedziesz:

Kopiuj

foreach ($_POST['produkt'] as $id => $info) {
    $rozmiar = $info['rozmiar'];
    $sztuk = (int) $info['sztuk'];
}

edytowany 2x, ostatnio: arczinosek 2019-02-26 15:48

PavlO.

2019-02-26 20:54

PavlO.2019-02-26 20:54

Rejestracja:około 6 lat
Ostatnio:około 4 lata
Postów:22

Okej to działa. Tylko jeszcze jak przenieść w javascript tą tablice produkt[<?=$produkt_id;?>] [rozmiar] // [sztuk] z wartościami z inpuów, bo poprzedni skrypt mój odpada, i nie wiem jak zastąpić w nim tą linijkę z danymi:

Kopiuj

{id_produktu: $('.id_produktu').val(), rozmiar: $('.rozmiar').val(), sztuk: $('.sztuk').val()},

Próbowałem również w taki sposób, po dopisaniu do inputów class="forminput" ale też nie działa: (wyskakuje alert fali)

Kopiuj

    $(document).ready(function(){

        $('.formsubmit').on('click',function(){
            var data = $('.forminput').serialize();
            
            $.ajax({
                type : "POST",
                url  : "<?php echo base_url('produkty/koszyk')?>",
                dataType : "JSON",
                data : {data},
                success:function(data)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    alert('fail');
                }
            });

        });
    });

Problem teraz leży w odpowiednim przekazaniu w js "data".

edytowany 3x, ostatnio: PavlO. 2019-02-26 21:33

arczinosek

2019-02-27 09:24

arczinosek2019-02-27 09:24

Rejestracja:prawie 7 lat
Ostatnio:około rok
Lokalizacja:Warszawa
Postów:86

serialize() używaj dla całego formularza a nie dla buttona. Myślę, że najlepszym dla Ciebie wyjściem jest zrobić dla każdego produktu osobny formularz, dać mu class np. productForm a później:

Kopiuj

$('.productForm').submit(function() {
    var formData = $(this).serialize();

    $,ajax({
        data: formData,
        // ...
    });
});

Przy okazji daj <button type="submit">, aby można było formularz wysłać wciskając po prostu ENTER w polu tekstowym.

Jeśli chcesz od razu wysłać całą listę produktów a nie jeden wiersz to oczywiście użyj jednego formularza a po stronie php sprawdzaj czy $sztuk > 0 ;)

edytowany 1x, ostatnio: arczinosek 2019-02-27 09:26

PavlO.

2019-03-01 18:56

PavlO.2019-03-01 18:56

Rejestracja:około 6 lat
Ostatnio:około 4 lata
Postów:22

Zrobiłem tak jak poleciłeś:

Kopiuj

    $('.productForm').submit(function() {
    var formData = $(this).serialize();

            $.ajax({
                type : "POST",
                url  : "<?php echo base_url('produkty/koszyk')?>",
                dataType : "JSON",
                data : formData,
                success:function(formData)
                {
                    alert('SUCCESS!!');
                },
                error:function()
                {
                    //alert('fail!'');
                    alert(formData);
       
                }
            });

        });

Po dodaniu <button type="submit"> występuje przeładowanie strony, ale to nie ważne na razie. Ważniejsze jest to że nie wiem czemu ale z js otrzymuje alert 'fail'. Przez co wyświetliłem sobie najpierw w alercie "data" przy tym wyskakiwał pusty alert tak jak by nie było żadnych danych, następnym razem w alercie(tym z errora) wyświetliłem sobie "formData" i tam są już jakieś dane. Więc dlaczego w data nic nie było? i js zwraca błąd, a nie wykonuje funkcji success? Może coś z typem danych nie tak? I jeszcze jedno pytanie w php jak odebrać te dane, w sensie $this->input->post( 'formData' ) one będą pod nazwą formData w post?

edytowany 1x, ostatnio: PavlO. 2019-03-03 19:56

arczinosek

2019-03-05 09:05

arczinosek2019-03-05 09:05

Rejestracja:prawie 7 lat
Ostatnio:około rok
Lokalizacja:Warszawa
Postów:86

Aby uniknąć przeładowania, popraw kod na:

Kopiuj

$('.productForm').submit(function(e) {
    e.preventDefault();
// ...

Żródło

Żeby sprawdzić, dlaczego dostajesz fail, dodaj handler error do $.ajax

error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )

Argument textStatus powinien dać Ci wystarczająco dużo informacji ;) Obstawiam, że nie dostajesz poprawnej odpowiedzi JSON.

PavlO.

2019-03-05 20:48

PavlO.2019-03-05 20:48

Rejestracja:około 6 lat
Ostatnio:około 4 lata
Postów:22

DZIĘKUJĘ udało się, po niżej dołączam kod z poprawami :) Już dodawanie do koszyka działa bardzo fajnie. Teraz jeszcze pytanie odnośnie komunikatu "Dodano do koszyka" czy tak jak ja to poniżej wykonałem jest akceptowalne? MSG jest generowane w pliku php za pomocą echo. Może jakieś inne pomysły bardziej profesjonalne ;) Docelowo fajnie by było jak by owy komunikat znikał np po 3sekundach.

Kopiuj


    $('.productForm').submit(function(e) {
    e.preventDefault();
    var formData = $(this).serialize();

            $.ajax({
                url  : "<?php echo base_url('produkty/koszyk')?>",
           	    type: 'POST',
            	contentType: 'application/x-www-form-urlencoded',
            	data: formData,
            	cache: false,
            	processData:false,
                success:function(msg)
                {
                    $('#msg').html(msg);
       
                    //alert('SUCCESS!!');
                },
                
               	error:function() 
               	{
                	$('#msg').html("Błąd dodawania do koszyka!");
                }
            });

        });

edytowany 4x, ostatnio: PavlO. 2019-03-05 20:49

arczinosek

2019-03-06 09:15

arczinosek2019-03-06 09:15

Rejestracja:prawie 7 lat
Ostatnio:około rok
Lokalizacja:Warszawa
Postów:86

jQuery.animate()

Samo przekazywanie komunikatu bezpośrednio z php jest OK dopóki nie przekażesz komunikatu błędu z wrażliwymi danymi ;)

Liczba odpowiedzi na stronę

Treść *

Treść

Podgląd

Kliknij, aby dodać treść...

Kliknij, aby dodać załącznik lub wklej ze schowka.

Instrukcja obsługi Markdown

Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H₂O i m².

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript document.write('Hello World'); ```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

Alt+L - zaznaczenie całej linii
Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

Ctrl+Enter - dodaj post
⌘+Enter - dodaj post (MacOS)

Formularze bez przeładowania strony

PavlO. napisał(a):

Smileys & People

Animals & Nature

Food & Drink

Travel & Places

Activities

Objects

Symbols

Typografia

Linki

Wewnętrzne odnośniki

Wspomnienia użytkowników

Znaczniki HTML

Skróty klawiszowe

Indeks górny oraz dolny

Składnia Tex

Kod źródłowy

Krótkie fragmenty kodu

Kod wielolinijkowy

Tabelki

Lista uporządkowana i nieuporządkowana

Składnia Markdown

Skróty klawiszowe