Jump to content
Sign in to follow this  
Michael

Dynamiczne pola formularza i dodawanie rekordów do bazy

Recommended Posts

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ę.

Share this post


Link to post

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);

?>

 

 

  • Like 2
  • Love 1

Share this post


Link to post

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ś?

  • Like 1
  • Wow 1

Share this post


Link to post

@-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 

  • Like 2

Share this post


Link to post
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.

Share this post


Link to post

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.

  • Like 3
  • Love 1

Share this post


Link to post

@-n3veR @Mativve już zrobiłem dynamiczne dodawanie inputów za pomocą buttona i nadałem każdemu nazwę jak podałeś @-n3veR .

Jak teraz mogę zebrać wszystkie te informacje do JSON'a zależnie od n serii?

 

image.thumb.png.0fb21f31600de9a245aca011a12f278f.png

image.png.efe35198b541b44cd8e365b0215e1dc3.png

Share this post


Link to post

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

Share this post


Link to post

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.

  • Like 1
  • Love 1

Share this post


Link to post
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.

  • Like 2
  • Love 1

Share this post


Link to post
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?

Share this post


Link to post

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()

 

  • Like 1
  • Love 1

Share this post


Link to post
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ąć?

  • Like 1

Share this post


Link to post

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()

  • Like 1
  • Love 1

Share this post


Link to post

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ł?

Share this post


Link to post

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
  • Like 2
  • Love 1

Share this post


Link to post
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?

Share this post


Link to post

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.

  • Like 1
  • Love 1

Share this post


Link to post
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?

 

Share this post


Link to post
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.

Share this post


Link to post

@-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;
      }
?>

 

 

  • Like 1
  • Love 1

Share this post


Link to post

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...

  • Like 2
  • Love 1

Share this post


Link to post
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?

Share this post


Link to post

@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;
}

 

 

  • Like 1
  • Love 1

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...