[JS] do [PHP] - Przesłanie tabeli generowanej w JS do PHP Opcje

[XMajkel]

Mam skrypt JS który generuje koszyk produktów w postaci tabeli i mam problem żeby przesłać go do formularza PHP który wyśle mi już zamówienie na maila. Próbowałem z innerHTML ale to do bani. Jak byście to zrobili??

Fragment JS który tworzy tabele

/ wyswietlenie tabeli z zawartoscia koszyka
function ShowBasket(isEditable)
{
var table = document.getElementById("basketTable");
var basket = new TShopBasket();
basket.Read();



clearTable();

if (basket.Count() < 1)
{
emptyBasket(isEditable);
return -1;
}

for (var i = 0; i < basket.Count(); i++)
addRow(basket, i, isEditable);
addTotal(basket, isEditable);
}

// dodanie wiersza z pozycja koszyka
function addRow(basket, i, isEditable)
{
var table = document.getElementById("basketTable");
var lastRow = table.rows.length;

var row = table.insertRow(lastRow);
row.id = "row_" + i;

// lp
var cell = row.insertCell(0);
var textNode = document.createTextNode(lastRow);
cell.appendChild(textNode);

// nazwa
cell = row.insertCell(1);
textNode = document.createTextNode(basket.GetName(i));
cell.appendChild(textNode);

// ilosc
if (isEditable)
{
cell = row.insertCell(2);
var el = document.createElement("input");
el.type = "text";
el.name = "quant" + i;
el.id = "quant_" + i;
el.size = "5";
el.value = basket.GetQuant(i);
el.setAttribute("onchange", "javascript:updateItem('quant_" + i + "', " + i + ");");
cell.appendChild(el);
}
else
{
cell = row.insertCell(2);
textNode = document.createTextNode(basket.GetQuant(i));
cell.appendChild(textNode);
}

// cena
cell = row.insertCell(3);
cell.setAttribute("class", "right");
textNode = document.createTextNode(basket.GetNetPrice(i).toFixed(2));
cell.appendChild(textNode);

// wartosc
cell = row.insertCell(4);
cell.setAttribute("class", "right");
textNode = document.createTextNode(basket.GetNetAmount(i).toFixed(2));
cell.appendChild(textNode);

// link usun
if (isEditable)
{
cell = row.insertCell(5);
var el = document.createElement("a");
el.setAttribute("href", "javascript:deleteItem(" + i + ");");
el.innerHTML = "usuñ";
cell.appendChild(el);
}
}

// wiersz podsumowania
function addTotal(basket, isEditable)
{
var table = document.getElementById("basketTable");
var lastRow = table.rows.length;
var row = table.insertRow(lastRow);

var cell = row.insertCell(0);
var textNode = document.createTextNode(" ");
if (isEditable)
cell.setAttribute("colspan", "4");
else
cell.setAttribute("colspan", "3");
cell.appendChild(textNode);

// podsumowanie
cell = row.insertCell(1);
cell.setAttribute("class", "right");
var textNode = document.createTextNode(basket.GetNetTotal().toFixed(2));
cell.appendChild(textNode);
}


Fragment html w którym wyświetla się tabela. (php narazie puste bo nie ma co odebrać np. postem)

[HTML] pobierz, plaintext 
<div id="basket">
  <table id="basketTable" name="basketTable">
    <tr>
    <th width="5%">Lp</th>
    <th width="40%">Nazwa</th>
    <th width="15%">Ilość</th>
    <th width="15%">Wartość</th>
    <th width="10%">&nbsp;</th>
    </tr>
  </table>
  <input type="submit"/>
 
 
  <a href="#" onclick="ClearBasket();" >wyczyść</a>
</div>
 
 
 
<div>
  <h1>
 
 
<?php
 
 
 
?>  
 
[HTML] pobierz, plaintext 

Dziękuję za sugestie bądź kody:)

[Crozin]

1. Formatuj odpowiednio kod przy użyciu BBCode.
2. Dane powinieneś przesłać w formacie, który jest możliwy do normalnego odczytania/zapisania zarówno przez JS jak i PHP. Tutaj idealnie nadawać się będzie JSON bądź XML do tego.

[Prezi2907]

1. Formatuj odpowiednio kod przy użyciu BBCode.
2. Dane powinieneś przesłać w formacie, który jest możliwy do normalnego odczytania/zapisania zarówno przez JS jak i PHP. Tutaj idealnie nadawać się będzie JSON bądź XML do tego.

Oparłbym się na JSONA a następnie wysłał to AJAXEM do obróbki PHP. Po zapisie w bazie danych (zwróciło by mi identyfikator koszyka w bazie) przeszedłbym z odpowiednim parametrem do dalszych etapów sklepu i KONIEC

[XMajkel]

Oparłbym się na JSONA a następnie wysłał to AJAXEM do obróbki PHP. Po zapisie w bazie danych (zwróciło by mi identyfikator koszyka w bazie) przeszedłbym z odpowiednim parametrem do dalszych etapów sklepu i KONIEC

Właśnie chce maksymalnie uprościc proces i uniknąć bazy danych:) Mam dosć jednolite produkty i nie jest mi potrzebna, a chce by kilka innych osób (zielonych z html itd.) również mogło opiekować sie sklepem. Próbowałem coś z innerhtlml ale nic nie wymysliłem po przegerwoaniu tablei w tekst.

[PrinceOfPersia]

masz formularz i tabelkę na jednej stronie HTML, tak?

To zrób ukryte pole w tym formularzu:

Kod

<input type="hidden" id="zamowienie" name="zamowienie" />

następnie, przy generacji tabelki:

stwórz strukturę JS, która będzie reprezentować koszyk. Np. tablicę:

Kod

var koszyk = [];

oraz przy dodawaniu wiersza do koszyka:

Kod

// dodanie wiersza z pozycja koszyka
function addRow(basket, i, isEditable)
...
....
...
//DODAJEMY RÓWNIEŻ DO TABLICY java script:
koszyk.push({name: basket.GetName(i), quant: basket.GetQuant(i)}); // KOD PRZYKŁADOWY, PEWNIE TAK NIE ZADZIAŁA BEZPOŚREDNIO

A potem wrzuć to do tego ukrytego pola w postaci JSON:
document.getElementById('zamowienie').value = JSON.stringify(koszyk);

i string z koszykiem wyślę się, kiedy użytkownik wyśle formularz (method="POST" powinien być ustawiony ofc).

a po stronie PHP masz funkcję json_decode.

tak bym to rozwiązał mniej wiecej

Ten post edytował PrinceOfPersia 21.04.2014, 23:24:17

[XMajkel]

A potem wrzuć to do tego ukrytego pola w postaci JSON:
document.getElementById('zamowienie').value = JSON.stringify(koszyk);

i string z koszykiem wyślę się, kiedy użytkownik wyśle formularz (method="POST" powinien być ustawiony ofc).

a po stronie PHP masz funkcję json_decode.

tak bym to rozwiązał mniej wiecej

Dzięki za pomoc, mimo wyczerpującej podpowiedzi jednak cos spaprałem bo nie działa wysyła tylko to pierwsze pole z pliku html...

Fragment nowego kodu JSON:

Kod

// ================================================================================
======
    
// JSON

JSON.stringify(koszyk)

var koszyk = [];

// dodanie wiersza z pozycja koszyka
function addRow(basket, i, isEditable)
{
  var table = document.getElementById("basketTable");
  var lastRow = table.rows.length;

  var row = table.insertRow(lastRow);
  row.id = "row_" + i;

  // lp
  var cell = row.insertCell(0);
  var textNode = document.createTextNode(lastRow);
  cell.appendChild(textNode);
  
  // nazwa
  cell = row.insertCell(1);
  textNode = document.createTextNode(basket.GetName(i));
  cell.appendChild(textNode);
....
....
....
....
  
  // link usun
  if (isEditable)
  {
    cell = row.insertCell(5);
    var el = document.createElement("a");
    el.setAttribute("href", "java script:deleteItem(" + i + ");");
    el.innerHTML = "usuñ";
    cell.appendChild(el);
  }
}

//DODAWANIE DO TABLICY JS:
koszyk.push({name: basket.GetName(i), quant: basket.GetQuant(i)});

document.getElementById('zamowienie').value = JSON.stringify(koszyk);

// ================================================================================
======

Fragment html z tabelka koszyka

Kod

<form method="POST" action="maj.php">
<div id="basket">
  <table id="basketTable">
    <tr>
    <th width="5%">Lp</th>
    <th width="40%">Nazwa</th>
    <th width="15%">Ilość</th>
    <th width="15%">Wartość</th>
    <th width="10%">&nbsp;</th>
    </tr>
  </table>

  <a href="#" onclick="ClearBasket();" >wyczyść</a>
</div>
     Twój mail:<input type="text" name="mail">
    <input type="hidden" id="zamowienie" name="zamowienie"/>
    <input value="Zamawiam!" type="submit">
    
    </form>

I wreszcie pliczek php...

Kod

Twój mail i rachunek:

<?php

echo $_POST["mail"];
json_decode($_POST["zamowienie"])

?>

Wiecie może gdzie popełniam błąd?? Dzięki i pozdrawiam