Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] do [PHP] - Przesłanie tabeli generowanej w JS do PHP
Forum PHP.pl > Forum > PHP
XMajkel
14.04.2014, 10:15:06
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 
  1. <div id="basket">
  2.   <table id="basketTable" name="basketTable">
  3.     <tr>
  4.     <th width="5%">Lp</th>
  5.     <th width="40%">Nazwa</th>
  6.     <th width="15%">Ilość</th>
  7.     <th width="15%">Wartość</th>
  8.     <th width="10%">&nbsp;</th>
  9.     </tr>
  10.   </table>
  11.   <input type="submit"/>
  12.  
  13.  
  14.   <a href="#" onclick="ClearBasket();" >wyczyść</a>
  15. </div>
  16.  
  17.  
  18.  
  19. <div>
  20.   <h1>
  21.  
  22.  
  23. <?php
  24.  
  25.  
  26.  
  27. ?>  
  28.  
[HTML] pobierz, plaintext

Dziękuję za sugestie bądź kody:)
Crozin
14.04.2014, 10:27:49
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
15.04.2014, 15:01:32
Cytat(Crozin @ 14.04.2014, 11:27:49 ) *
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 smile.gif
XMajkel
21.04.2014, 17:56:37
Cytat(Prezi2907 @ 15.04.2014, 16:01:32 ) *
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 smile.gif


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
21.04.2014, 23:21:15
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
XMajkel
25.04.2014, 21:41:50
Cytat(PrinceOfPersia @ 22.04.2014, 00:21:15 ) *
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
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.