Skocz do zawartości
Pecetowicz Forum komputerowe

Dynamiczne pola formularza i dodawanie rekordów do bazy


Rekomendowane odpowiedzi

Witam,

Chcę się zabrać za PHP/MySQL, ale mam pytanie dot. bazy. Mam formularz gdzie chce dodać

image.thumb.png.b149682b5def6c1a87e29c69bef1a302.png

Tylko problem w tym, że w zależności od ilości serii będzie różna ilość pól.

3 serie np. to 3x seria ( automatyczne wypełnianie będzie 1,2,3 ) - 3x ciężar do wypełnienia i 3x powtórzenia. 

Jak to zrobić, żeby dodawało do tabeli w zależności od ilości pól do wpisania? Chyba, że jest łatwiejszy sposób na to, a ja idę pod górę.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

Przy wysyłaniu sprawdzasz wypełnione pola (ilość serii) i na tej podstawie tworzysz JSONa, którego potem zamieniasz na tekst i przechowujesz w bazie.

Potem przy pobieraniu z bazy zamieniasz go z tekstu na obiekt i gotowe - masz dostęp do danych w postaci tablicy i odpowiednio wyświetlasz na froncie.

#EDIT:

Przykład może nie jest jakiś super ale myślę, że w miarę wytłumaczyłem:

Spoiler

Możesz sobie sprawdzić na PhpFiddle - PHP/MySQL in-browser IDE and online server

 


<?php

// Tutaj przygotowujemy JSONa w postaci tekstu
$json = '[
{
	"title": "Seria 1",
	"weight": "15kg",
	"repeats": 2
}, {
	"title": "Seria 2",
	"weight": "15kg",
	"repeats": 2
}
]';

var_dump($json);

echo "<br>";
echo "<br>";


// Zamieniamy tekst na obiekt - aby PHP przegryzł stringa
$json_de = json_decode($json);
var_dump($json_de);

echo "<br>";
echo "<br>";

// Zamieniamy obiekt na tekst -> teraz możemy dopiero wysłać
$json_en = json_encode($json_de);
var_dump($json_en);

echo "<br>";
echo "<br>";

// Zamieniamy tekst na obiekt
$json_de = json_decode($json_en);
var_dump($json_de);

?>

 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Nie do końca rozumiem jak to ma działać. Na screenie widzę ilość serii: 1, a poniżej 4 kolumny. Masz gdzieś demo frontu, żeby lepiej zrozumieć to co napisałeś?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@-n3veR

To są serie do ćwiczeń czyli są tam dane (które mogą być wartościami) które możemy wrzucić pod klucz Seria 1, Seria 2, Seria 3 etc jako JSON. Zobacz sobie jak ja to zrobiłem w przykładzie 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
17 godzin temu, -n3veR napisał:

Nie do końca rozumiem jak to ma działać. Na screenie widzę ilość serii: 1, a poniżej 4 kolumny. Masz gdzieś demo frontu, żeby lepiej zrozumieć to co napisałeś?

Ilość serii do tego przykładu powinna być 4, zapomniałem zmienić. Np. serie 3 to niżej 3 kolumny

18 godzin temu, Mativve napisał:

Przy wysyłaniu sprawdzasz wypełnione pola (ilość serii) i na tej podstawie tworzysz JSONa, którego potem zamieniasz na tekst i przechowujesz w bazie.

Potem przy pobieraniu z bazy zamieniasz go z tekstu na obiekt i gotowe - masz dostęp do danych w postaci tablicy i odpowiednio wyświetlasz na froncie.

 

#EDIT:

Przykład może nie jest jakiś super ale myślę, że w miarę wytłumaczyłem:

  Ukryj treść

Możesz sobie sprawdzić na PhpFiddle - PHP/MySQL in-browser IDE and online server

 



<?php

// Tutaj przygotowujemy JSONa w postaci tekstu
$json = '[
{
	"title": "Seria 1",
	"weight": "15kg",
	"repeats": 2
}, {
	"title": "Seria 2",
	"weight": "15kg",
	"repeats": 2
}
]';

var_dump($json);

echo "<br>";
echo "<br>";


// Zamieniamy tekst na obiekt - aby PHP przegryzł stringa
$json_de = json_decode($json);
var_dump($json_de);

echo "<br>";
echo "<br>";

// Zamieniamy obiekt na tekst -> teraz możemy dopiero wysłać
$json_en = json_encode($json_de);
var_dump($json_en);

echo "<br>";
echo "<br>";

// Zamieniamy tekst na obiekt
$json_de = json_decode($json_en);
var_dump($json_de);

?>

 

 

Mógłbyś pokazać to na jakimś prostym przykładzie, żebym mógł przeanalizować to na kodzie? Jeżeli masz oczywiście czas to byłoby naprawdę super.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Ważnym elementem będzie dobrze nazwanie pól. Przykłady:

Ilość serii: 1

<input type="text" name="totalSeries[0]['series']" />
<input type="text" name="totalSeries[0]['weight']" />
<input type="number" name="totalSeries[0]['repeat']" />

Ilość serii: 3

<input type="text" name="totalSeries[2]['series']" />
<input type="text" name="totalSeries[2]['weight']" />
<input type="number" name="totalSeries[2]['repeat']" />

Ilość serii: 10:

<input type="text" name="totalSeries[9]['series']" />
<input type="text" name="totalSeries[9]['weight']" />
<input type="number" name="totalSeries[9]['repeat']" />

No i teraz już wystarczy dynamicznie tworzyć pola, a przed submitem zebrać te pola i użyć: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Ale takie nazwanie pól nie narzuca Ci jednego rozwiązania (zapis JSONa do jednego pola w encji User). Możesz zapisać kilka wierszy w osobnej tabeli tylko trzeba je jeszcze jakoś spiąć z konkretnym Userem.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

Teraz to możesz:

1. Albo samemu walidować formularz i wysyłać tylko JSONa za pomocą AJAX do skryptu PHP i zwracać tylko informację np.: czy dodano czy nie

2. Albo utworzyć ukrytego inputa, który będzie przechowywał JSONa i potem w skrypcie PHP pobierasz z niego dane które parsujesz na JSONa

3. Albo przekształcić powyższy skrypt napisany w JS na PHP i stworzyć sobie takiego JSONa po stronie skryptu PHP bez udziału JS.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
1 godzinę temu, Michael napisał:

@-n3veR a potem żeby to dodać do PHP?

No to AJAXem, przez POSTa  Kurs Javascript - jQuery - Ajax

klucz type / method (sam wybierz którego użyjesz) to atrybut [method]; klucz url to [action]; a klucz data to zserializowane pola forma.

A po stronie PHP odbierasz przysłany form w formie stringa i musisz go sobie zdekodować  PHP: json_decode - Manual  i przekształcić w tablicę (odpowiednia flaga w funkcji) bo będzie Ci wygodniej poruszać się po polach forma. No i później robisz już co tylko chcesz.

!Ważne!

Zanim pchniesz dane do bazy, to zrób najpierw sanitize danych, żebyś nie był zdziwiony jak ktoś zrobi dropa bazy z poziomu Twojego forma.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
18 godzin temu, -n3veR napisał:

No to AJAXem, przez POSTa  Kurs Javascript - jQuery - Ajax

klucz type / method (sam wybierz którego użyjesz) to atrybut [method]; klucz url to [action]; a klucz data to zserializowane pola forma.

A po stronie PHP odbierasz przysłany form w formie stringa i musisz go sobie zdekodować  PHP: json_decode - Manual  i przekształcić w tablicę (odpowiednia flaga w funkcji) bo będzie Ci wygodniej poruszać się po polach forma. No i później robisz już co tylko chcesz.

 

!Ważne!

Zanim pchniesz dane do bazy, to zrób najpierw sanitize danych, żebyś nie był zdziwiony jak ktoś zrobi dropa bazy z poziomu Twojego forma.

Odebrać form w formie stringa? Czyli jakoś z Ajaxa? 

EDIT:

Udało mi się coś takiego zrobić:

cwiczenie=Wyciskanie%20na%20%C5%82awce%20p%C5%82askiej&data=17-07-2019&iloscrepeats=3&totalSeries%5B0%5D%5B'series'%5D=1&totalSeries%5B0%5D%5B'repeat'%5D=5&totalSeries%5B0%5D%5B'weight'%5D=6&totalSeries%5B1%5D%5B'series'%5D=&totalSeries%5B1%5D%5B'repeat'%5D=10&totalSeries%5B1%5D%5B'weight'%5D=11&totalSeries%5B2%5D%5B'series'%5D=&totalSeries%5B2%5D%5B'repeat'%5D=55&totalSeries%5B2%5D%5B'weight'%5D=11&comment=Komentarz%20przykladowy

Chodziło o coś takiego?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Zamiast .serialize() użyj .serializeArray() 

Tu masz przykład z wyrzuceniem danych do konsoli, no ale poradzisz sobie, żeby to wrzucić do AJAXa  jQuery: serialize a form to JSON - JSFiddle

Ważne tylko, żebyś dla data poniższy kawałek kodu:

$(this).serializeFormJSON()

opakował w:

JSON.stringify()
Odnośnik do odpowiedzi
Udostępnij na innych stronach
1 godzinę temu, -n3veR napisał:

Zamiast .serialize() użyj .serializeArray() 

Tu masz przykład z wyrzuceniem danych do konsoli, no ale poradzisz sobie, żeby to wrzucić do AJAXa  jQuery: serialize a form to JSON - JSFiddle

 

Ważne tylko, żebyś dla data poniższy kawałek kodu:


$(this).serializeFormJSON()

opakował w:


JSON.stringify()

 

Teraz mam tak:

{"cwiczenie":"Wyciskanie na ławce skośnej","data":"17-07-2019","iloscrepeats":"1","totalSeries[0]['series']":"1","totalSeries[0]['repeat']":"5","totalSeries[0]['weight']":"5","comment":"ggg"}

EDIT:

Udało się zrobić z Ajaxem jeszcze. W konsoli patrzę log i tworzy mi ID: 101 - jest to kolejny ID z testowego api z fiddle. Mam podpiąć plik .php do url, który będzie wysyłał formularz?

I jak teraz w PHP te dane z ajaxa wyciagnąć?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Tak, do url wstaw adres pliku PHP na który chcesz wysłać dane (pobrany z atrybutu [action] forma). A w pliku PHP wstaw sobie taki (tymczasowy) kod:

<?php
die(var_dump($_POST));

Tylko nie korzystaj z $_POST w dalszej części swojego kodu. + wróć do mojego posta o json_decode()

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Działa mi już w PHP, ale nie chce decode działać.

array(5) { ["cwiczenie"]=> string(30) "Wyciskanie na ławce płaskiej" ["data"]=> string(10) "17-07-2019" ["iloscrepeats"]=> string(1) "1" ["totalSeries"]=> array(1) { [0]=> array(3) { ["'series'"]=> string(1) "1" ["'repeat'"]=> string(0) "" ["'weight'"]=> string(0) "" } } ["comment"]=> string(0) "" } 

Warning: json_decode() expects parameter 1 to be string, array given in C:\xampp\htdocs\html\wyslij.php on line 7
NULL  

php:

<?php
$wynik = $_POST;
var_dump($wynik);

echo "<br>";

$json_de = json_decode($wynik);
var_dump($json_de);


?>

EDIT: Udało mi się najpierw encode potem decode i wyszło tak:

array(5) { ["cwiczenie"]=> string(30) "Wyciskanie na ławce płaskiej" ["data"]=> string(10) "17-07-2019" ["iloscrepeats"]=> string(1) "3" ["totalSeries"]=> array(3) { [0]=> array(3) { ["'series'"]=> string(1) "1" ["'repeat'"]=> string(2) "55" ["'weight'"]=> string(2) "55" } [1]=> array(3) { ["'series'"]=> string(0) "" ["'repeat'"]=> string(2) "22" ["'weight'"]=> string(2) "25" } [2]=> array(3) { ["'series'"]=> string(0) "" ["'repeat'"]=> string(3) "515" ["'weight'"]=> string(3) "151" } } ["comment"]=> string(3) "dfs" } 

//encodoe

string(272) "{"cwiczenie":"Wyciskanie na \u0142awce p\u0142askiej","data":"17-07-2019","iloscrepeats":"3","totalSeries":[{"'series'":"1","'repeat'":"55","'weight'":"55"},{"'series'":"","'repeat'":"22","'weight'":"25"},{"'series'":"","'repeat'":"515","'weight'":"151"}],"comment":"dfs"}" 


//decode


string(330) ""{\"cwiczenie\":\"Wyciskanie na \\u0142awce p\\u0142askiej\",\"data\":\"17-07-2019\",\"iloscrepeats\":\"3\",\"totalSeries\":[{\"'series'\":\"1\",\"'repeat'\":\"55\",\"'weight'\":\"55\"},{\"'series'\":\"\",\"'repeat'\":\"22\",\"'weight'\":\"25\"},{\"'series'\":\"\",\"'repeat'\":\"515\",\"'weight'\":\"151\"}],\"comment\":\"dfs\"}""  

To tak ma wyglądać?

W MySQL jakie zrobić tabele? Na co je podzielić, żeby miały serie oddzielnie i dynamiczne dodawanie w zależności ile ktoś zrobił?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Pokaż mi plik z AJAXem, bo nie powinieneś mieć tego pierwszego błędu o którym pisałeś.

20 godzin temu, Michael napisał:

W MySQL jakie zrobić tabele?

2 tabele, bo jeden User może mieć wiele Serii:

  • Users
  • Series  tutaj trzeba dodatkowe pole UserId dla powiązania
Odnośnik do odpowiedzi
Udostępnij na innych stronach
6 godzin temu, -n3veR napisał:

Pokaż mi plik z AJAXem, bo nie powinieneś mieć tego pierwszego błędu o którym pisałeś.

 

2 tabele, bo jeden User może mieć wiele Serii:

  • Users
  • Series  tutaj trzeba dodatkowe pole UserId dla powiązania
    $(function(){
      
(function ($) {
    $.fn.serializeFormJSON = function () {

        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

const apiUrl = "https://jsonplaceholder.typicode.com";

$('form').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeFormJSON();
	data=JSON.stringify(data);
    console.log(data);

	
	 //wysylamy dane
    $.ajax({
        url: 'wyslij.php',
        method : "POST",
        dataType : "json",
        data : data
    })
    .done(function(res) {
        console.log("Uzytkownik zostal dodany do bazy", res);
    })

});


    });

EDIT: Tylko jeszcze pytanie o zapytanie do bazy. Jeżeli mam to teraz w stringu, to jak mam odczytać serie i dać to do bazy?

Jak dodam cokolwiek do bazy to doda na sztywno. Ale żeby dodać wszystkie serie to już nie mam pojęcia jak wyciągnąć to wszystko.

array(5) { ["cwiczenie"]=> string(30) "Wyciskanie na ławce płaskiej" ["data"]=> string(10) "17-07-2019" ["iloscrepeats"]=> string(1) "4" ["totalSeries"]=> array(1) { [0]=> array(3) { ["series"]=> string(1) "1" ["repeat"]=> string(2) "25" ["weight"]=> string(2) "15" } } ["comment"]=> string(0) "" } 

string(165) "{"cwiczenie":"Wyciskanie na \u0142awce p\u0142askiej","data":"17-07-2019","iloscrepeats":"4","totalSeries":[{"series":"1","repeat":"25","weight":"15"}],"comment":""}" 

object(stdClass)#2 (5) { ["cwiczenie"]=> string(30) "Wyciskanie na ławce płaskiej" ["data"]=> string(10) "17-07-2019" ["iloscrepeats"]=> string(1) "4" ["totalSeries"]=> array(1) { [0]=> object(stdClass)#3 (3) { ["series"]=> string(1) "1" ["repeat"]=> string(2) "25" ["weight"]=> string(2) "15" } } ["comment"]=> string(0) "" }

A i formaty mam takie, który jest prawidłowy?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

OK, kod JS spoko.

Taki kod powinieneś mieć w PHP:

$json = json_decode($wynik, true);

Zamienna $json to tablica o której już pisałem wyżej.

Odczytujesz poszczególne serie w pętli z pola totalSeries, ale nie zapisuj rekordów w niej, bo zajedziesz bazę.

A odczyt z bazy, to prosty SELECT z klauzulą WHERE.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
4 godziny temu, -n3veR napisał:

OK, kod JS spoko.

 

Taki kod powinieneś mieć w PHP:


$json = json_decode($wynik, true);

Zamienna $json to tablica o której już pisałem wyżej.

 

Odczytujesz poszczególne serie w pętli z pola totalSeries, ale nie zapisuj rekordów w niej, bo zajedziesz bazę.

A odczyt z bazy, to prosty SELECT z klauzulą WHERE.

Warning: json_decode() expects parameter 1 to be string, array given in C:\xampp\htdocs\html\wyslij.php on line 34
NULL

Cały czas jest ten błąd.

$json = json_decode($_POST, true);
	var_dump($json);

Może encode i potem decode?

EDIT: Jak pobrałem z zaimportowanego JSONA z JS to działa.

Udało mi sie zrobić tak:

image.thumb.png.9dfbd95a0af19f6c953943a325ddb0c6.png

image.thumb.png.355ced6484310b59868c5e5c68617720.png

Zrobiłem 2 pętle - 1 wyciąganie zmiennych do tablicy , 2 - dodawanie do bazy.

Każda seria to oddzielny wpis. Myślisz, że tak jest dobrze?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert
9 godzin temu, Michael napisał:

Może encode i potem decode?

Nie, bo jak masz array na backendzie, to bez sensu są te dwie operacje. No ale dziwne że się tak dzieje, bo robisz .stringify() w JSie, więc powinieneś dostać string na backend... Dobrze piszę @Mativve?

Kodowanie plików masz złe, bo masz krzaki w bazie.

Pokaż kod PHP, bo pisałem Tobie, żeby nie robić zapisu w pętli.

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@-n3veR Musiałem sobie to u siebie zobrazować.

W AJAX ja wysyłam normalnie JSON. Wtedy na backendzie mam cały array i mogę na nim sobie jakieś rzeczy zrobić (walidację, przeliczenia etc) i dopiero po przygotowaniu tablicy ze zmiennymi generuję.

Sprawdzałem kilka razy i przy json_encode($_POST) - on traktuje go jako stringa więc dopiero po wykonaniu jakichś czynności można go użyć (tworząc stringa możemy wrzucić go do bazy).

Ja to na takim prostym przykładzie zrobiłem tak:

HTML

Spoiler

<!DOCTYPE html>
<html lang="pl">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
      <form action="test.php" method="POST" id="workoutform">
            <label for="workName">Nazwa ćwiczenia</label>
            <select name="workName" id="workName">
                  <option value="Podciąganie">Podciąganie</option>
                  <option value="Sztanga">Sztanga</option>
                  <option value="Rowerek">Rowerek</option>
                  <option value="Stepper">Stepper</option>
            </select>

            <div id="seriesBox">
                  <div>
                        <p>Seria 1</p>
                        <input type="text" name="totalSeries[0]['weight']" placeholder="Ciężar"/>
                        <input type="number" name="totalSeries[0]['repeat']" placeholder="Powtórzenia"/>
                        <button class="remove">X</button>
                  </div>
                  
                  <div>
                        <p>Seria 2</p>
                        <input type="text" name="totalSeries[1]['weight']" placeholder="Ciężar"/>
                        <input type="number" name="totalSeries[1]['repeat']" placeholder="Powtórzenia"/>
                        <button class="remove">X</button>
                  </div>

                  <div>
                        <p>Seria 3</p>
                        <input type="text" name="totalSeries[2]['weight']" placeholder="Ciężar"/>
                        <input type="number" name="totalSeries[2]['repeat']" placeholder="Powtórzenia"/>
                        <button class="remove">X</button>
                  </div>
            </div>

            <br>
            <br>

            <div>
                  <label for="dateExecution">Data</label>
                  <input type="date" name="dateExecution" id="dateExecution">
            </div>

            <br>
            <br>
            <button type="submit">Dodaj</button>
      </form>

      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
            let wform = $("#workoutform");

            wform.submit( function(e){
                  let wformJSON = wform.serializeControls();

                  // Zamieniamy datę na timestamp tak aby móc to potem odczytać, przeliczyć etc
                  let date = new Date( wformJSON.dateExecution );
                  wformJSON.dateExecution = date.getTime();

                  $.ajax({
                        url: "send.php",
                        method: "POST",
                        // dataType: 'json',
                        data: wformJSON,
                  }).done( function(res){
                        console.log(res);
                  }).fail(function(res) {
                        console.log(res);
                  });

                  e.preventDefault();
                  return false;
            });

            $.fn.serializeControls = function() {
                  var data = {};

                  function buildInputObject(arr, val) {
                        if (arr.length < 1)
                              return val;  
                        var objkey = arr[0];
                        if (objkey.slice(-1) == "]") {
                              objkey = objkey.slice(0,-1);
                        }  
                        var result = {};
                        if (arr.length == 1){
                              result[objkey] = val;
                        } else {
                              arr.shift();
                              var nestedVal = buildInputObject(arr,val);
                              result[objkey] = nestedVal;
                        }
                        return result;
                  }

                  $.each(this.serializeArray(), function() {
                        var val = this.value;
                        var c = this.name.split("[");
                        var a = buildInputObject(c, val);
                        $.extend(true, data, a);
                  });
                  
                  return data;
            }
      </script>
</body>
</html>

 

PHP

Spoiler

<?php
      if( isset($_POST['workName']) ){
            $data = json_decode(json_encode($_POST));

            // TUTAJ ROBIMY RZECZY NP.: SPRAWDZANIE CZY POLA ZOSTAŁY WYPEŁNIONE ITD
            // TERAZ PRZYGOTOWUJEMY DO DODANIA DO BAZY

            $dataStr = json_encode($data);

            print_r(gettype( $data ));
            print_r("\n");

            print_r(gettype( $dataStr ));

            return true;
      }
      else{
            return false;
      }
?>

 

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Ekspert

Ale zrobienie czegoś takiego w JSie:

data: JSON.stringify($('form').serializeArray())

Powinno skutkować jedynie takim kodem na backendzie i to bez błędów:

$json = json_decode($_POST);

O to mi chodziło...

Odnośnik do odpowiedzi
Udostępnij na innych stronach
14 minut temu, -n3veR napisał:

Ale zrobienie czegoś takiego w JSie:


data: JSON.stringify($('form').serializeArray())

Powinno skutkować jedynie takim kodem na backendzie i to bez błędów:


$json = json_decode($_POST);

O to mi chodziło...

21 minut temu, Mativve napisał:

@-n3veR Musiałem sobie to u siebie zobrazować.

 

W AJAX ja wysyłam normalnie JSON. Wtedy na backendzie mam cały array i mogę na nim sobie jakieś rzeczy zrobić (walidację, przeliczenia etc) i dopiero po przygotowaniu tablicy ze zmiennymi generuję.

 

Sprawdzałem kilka razy i przy json_encode($_POST) - on traktuje go jako stringa więc dopiero po wykonaniu jakichś czynności można go użyć (tworząc stringa możemy wrzucić go do bazy).

 

Ja to na takim prostym przykładzie zrobiłem tak:

HTML

  Ukryj treść


<!DOCTYPE html>
<html lang="pl">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
</head>
<body>
      <form action="test.php" method="POST" id="workoutform">
            <label for="workName">Nazwa ćwiczenia</label>
            <select name="workName" id="workName">
                  <option value="Podciąganie">Podciąganie</option>
                  <option value="Sztanga">Sztanga</option>
                  <option value="Rowerek">Rowerek</option>
                  <option value="Stepper">Stepper</option>
            </select>

            <div id="seriesBox">
                  <div>
                        <p>Seria 1</p>
                        <input type="text" name="totalSeries[0]['weight']" placeholder="Ciężar"/>
                        <input type="number" name="totalSeries[0]['repeat']" placeholder="Powtórzenia"/>
                        <button class="remove">X</button>
                  </div>
                  
                  <div>
                        <p>Seria 2</p>
                        <input type="text" name="totalSeries[1]['weight']" placeholder="Ciężar"/>
                        <input type="number" name="totalSeries[1]['repeat']" placeholder="Powtórzenia"/>
                        <button class="remove">X</button>
                  </div>

                  <div>
                        <p>Seria 3</p>
                        <input type="text" name="totalSeries[2]['weight']" placeholder="Ciężar"/>
                        <input type="number" name="totalSeries[2]['repeat']" placeholder="Powtórzenia"/>
                        <button class="remove">X</button>
                  </div>
            </div>

            <br>
            <br>

            <div>
                  <label for="dateExecution">Data</label>
                  <input type="date" name="dateExecution" id="dateExecution">
            </div>

            <br>
            <br>
            <button type="submit">Dodaj</button>
      </form>

      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
            let wform = $("#workoutform");

            wform.submit( function(e){
                  let wformJSON = wform.serializeControls();

                  // Zamieniamy datę na timestamp tak aby móc to potem odczytać, przeliczyć etc
                  let date = new Date( wformJSON.dateExecution );
                  wformJSON.dateExecution = date.getTime();

                  $.ajax({
                        url: "send.php",
                        method: "POST",
                        // dataType: 'json',
                        data: wformJSON,
                  }).done( function(res){
                        console.log(res);
                  }).fail(function(res) {
                        console.log(res);
                  });

                  e.preventDefault();
                  return false;
            });

            $.fn.serializeControls = function() {
                  var data = {};

                  function buildInputObject(arr, val) {
                        if (arr.length < 1)
                              return val;  
                        var objkey = arr[0];
                        if (objkey.slice(-1) == "]") {
                              objkey = objkey.slice(0,-1);
                        }  
                        var result = {};
                        if (arr.length == 1){
                              result[objkey] = val;
                        } else {
                              arr.shift();
                              var nestedVal = buildInputObject(arr,val);
                              result[objkey] = nestedVal;
                        }
                        return result;
                  }

                  $.each(this.serializeArray(), function() {
                        var val = this.value;
                        var c = this.name.split("[");
                        var a = buildInputObject(c, val);
                        $.extend(true, data, a);
                  });
                  
                  return data;
            }
      </script>
</body>
</html>

 

 

PHP

  Ukryj treść


<?php
      if( isset($_POST['workName']) ){
            $data = json_decode(json_encode($_POST));

            // TUTAJ ROBIMY RZECZY NP.: SPRAWDZANIE CZY POLA ZOSTAŁY WYPEŁNIONE ITD
            // TERAZ PRZYGOTOWUJEMY DO DODANIA DO BAZY

            $dataStr = json_encode($data);

            print_r(gettype( $data ));
            print_r("\n");

            print_r(gettype( $dataStr ));

            return true;
      }
      else{
            return false;
      }
?>

 

 

Spoiler

	$json_dex = json_decode(json_encode($wynik), true );
	$iloscserii = $json_dex['iloscrepeats'];
	$cwiczenie = $json_dex['cwiczenie'];
	$komentarz = $json_dex['comment'];

	var_dump($iloscserii);

	for($j = 0; $j < $iloscserii; $j += 1) {
      var_dump($j);
      $ciezar[$j]=$wynik['totalSeries']["$j"]['weight'];
      $powtorzenie[$j]=$wynik['totalSeries']["$j"]['repeat'];
      $seria[$j]=$wynik['totalSeries']["$j"]['series'];
		echo $seria[$j];
		echo "<br>";
		echo $powtorzenie[$j];
		echo "<br>";
		echo $ciezar[$j];
		echo "<br>";echo "<br>";echo "<br>";
}		
	
	
  for($i = 0; $i < $iloscserii; $i += 1)	{
          var_dump($i);
          $wynik = @$polaczenie -> query("INSERT INTO serie(id, data, iloscserii, nazwacwiczenia, seria1, powt1, ciez1, komentarz) VALUES ('', 'dzisiaj', '$iloscserii', '$cwiczenie', '$seria[$i]', '$powtorzenie[$i]', '$ciezar[$i]', '$komentarz')");
          echo "<br>";
  }	

Tak zrobiłem u siebie na żeby testować. W pętli pobieram dane a potem je dodaje w nowych wierszach. W bazie normalnie dodaje tekst i liczby. Kodowanie już zmieniłem i nie ma krzaków.

image.thumb.png.1b71a963363f157474dc834b520c657a.png

Tutaj wyciąg z bazy. Jaka jest różnica z encode a bez? Widać byłoby w bazie?

Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • Administrator

@Michael Do bazy musisz dać stringa, którego potem sobie odkodujesz na JSONa.

Swoją drogą w moim przykładzie znalazłem jakiś skrypt do JS, który w fajny sposób przygotowuje dane z formularza (korzystając z tablic w name) robi sobie całego JSONa:

json - jquery serialize input with arrays - Stack Overflow

Spoiler

$.fn.serializeControls = function() {
  var data = {};

  function buildInputObject(arr, val) {
    if (arr.length < 1)
      return val;  
    var objkey = arr[0];
    if (objkey.slice(-1) == "]") {
      objkey = objkey.slice(0,-1);
    }  
    var result = {};
    if (arr.length == 1){
      result[objkey] = val;
    } else {
      arr.shift();
      var nestedVal = buildInputObject(arr,val);
      result[objkey] = nestedVal;
    }
    return result;
  }

  $.each(this.serializeArray(), function() {
    var val = this.value;
    var c = this.name.split("[");
    var a = buildInputObject(c, val);
    $.extend(true, data, a);
  });
  
  return data;
}

 

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
×
×
  • Dodaj nową pozycję...