Aktualizacja w bazie danych

Question

Cześć!

Mam prostą bazę danych składającą się z ilości danej rzeczy, obecnie pobieram dane tak:

while($row = mysqli_fetch_assoc($result)) {
                                                    echo '<tr>';
                                                    echo '<td>'.$row['id'].'</td>';
                                                    echo '<td class="txt-oflo">'.$row['czesc'].'</td>';
                                                    echo '<td>'.$row['ilosc'].'</td>';
                                                    echo '<td>
                                                    <input type="text" name="ilosc"  
                                                    placeholder="'.$row['ilosc'].'" 
                                                    style="width:40px;">
                                                    </td>';
                                                    echo '</tr>';
                                                    }

Jednak w miejsce edytuj potrzebuje wypisać mały input, który będzie pobierał wartość z ilości.

Niestety o ile jestem w stanie wypisać sam input jako formularz do każdego wiersza, nie bardzo wiem jak odesłać do ajaxa zmianę, jakieś podpowiedzi?

Answer 1

Propozycja.

Dodałbym id do nazwy 

input, który będzie pobierał wartość z ilości.

  echo '<table>';
  while($row = mysqli_fetch_assoc($result)) {
    echo ' 
          <tr>
            <td>'.$row['id'].'</td>
            <td class="txt-oflo">'.$row['czesc'].'</td>
            <td>'.$row['ilosc'].'</td>
            <td>
              <input type="text" name="ilosc-'.$row['id'].'" placeholder="'.$row['ilosc'].'" style="width:40px;">
            </td>
          </tr>
         ';
  }
  echo '</table>';

a na końcu generowanej strony w kodzie js-a, żeby ustawić event "change" na te input-y, taki querySelector

const ilosc_input = document.querySelectorAll('input[name^="ilosc-"]');

 

cały przykład

index.php

<?php
  // symulacja danych zwróconych z bazy danych
  $db = [
    [
          'id' => 'id1',
       'czesc' => 'czesc1',
       'ilosc' => '1'
    ],
    [
          'id' => 'id2',
       'czesc' => 'czesc2',
       'ilosc' => '1'
    ],
    [
          'id' => 'id3',
       'czesc' => 'czesc3',
       'ilosc' => '1'
    ],
    [
          'id' => 'id4',
       'czesc' => 'czesc4',
       'ilosc' => '1'
    ]          
  ];
      
  echo '<table>';
  //while($row = mysqli_fetch_assoc($result)) {
  foreach ($db as $row) {
    echo ' 
          <tr>
            <td>'.$row['id'].'</td>
            <td class="txt-oflo">'.$row['czesc'].'</td>
            <td>'.$row['ilosc'].'</td>
            <td>
              <input type="text" name="ilosc-'.$row['id'].'" placeholder="'.$row['ilosc'].'" style="width:40px;">
            </td>
          </tr>
         ';
  }
  echo '</table>';
?>
    <pre id="ajax-message"></pre><!-- dla demonstracji -->
    <script>
      window.addEventListener('load', load);

      function load() {
        const ilosc_input = document.querySelectorAll('input[name^="ilosc-"]');
        for (const ilosc of ilosc_input)
          ilosc.addEventListener('change', updateQuantity);
        
        function updateQuantity(e) {
          if (e.target.value) {
            const id = e.target.name.split('-')[1];
            const quantity = e.target.value;

            const formatted_data = new FormData();
                  formatted_data.append('id', id);
                  formatted_data.append('ilosc', quantity);
            postData(formatted_data);
          }
        }

        async function postData(formatted_data) {
          try {
            const response = await fetch('update_quantity.php', {
              method: 'POST',
              body: formatted_data
            });

            const data = await response.text();
            if (data) {
              document.querySelector('#ajax-message').innerHTML = data;
            }
          } catch(err) {
            console.warn('postData:\n' + err);
          }
        }
      }
    </script>
  </body>
</html>

przykładowy kod html wygenerowany z pliku index.php powyżej

<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <td>id1</td>
        <td class="txt-oflo">czesc1</td>
        <td>1</td>
        <td>
          <input type="text" name="ilosc-id1" placeholder="1" style="width:40px;">
        </td>
      </tr>

      <tr>
        <td>id2</td>
        <td class="txt-oflo">czesc2</td>
        <td>1</td>
        <td>
          <input type="text" name="ilosc-id2" placeholder="1" style="width:40px;">
        </td>
      </tr>

      <tr>
        <td>id3</td>
        <td class="txt-oflo">czesc3</td>
        <td>1</td>
        <td>
          <input type="text" name="ilosc-id3" placeholder="1" style="width:40px;">
        </td>
      </tr>

      <tr>
        <td>id4</td>
        <td class="txt-oflo">czesc4</td>
        <td>1</td>
        <td>
          <input type="text" name="ilosc-id4" placeholder="1" style="width:40px;">
        </td>
      </tr>        
    </table>

    <pre id="ajax-message"></pre><!-- dla demonstracji -->
    <script>
      window.addEventListener('load', load);

      function load() {
        const ilosc_input = document.querySelectorAll('input[name^="ilosc-"]');
        for (const ilosc of ilosc_input)
          ilosc.addEventListener('change', updateQuantity);

        function updateQuantity(e) {
          if (e.target.value) {
            const id = e.target.name.split('-')[1];
            const quantity = e.target.value;

            const formatted_data = new FormData();
            formatted_data.append('id', id);
            formatted_data.append('ilosc', quantity);
            postData(formatted_data);
          }
        }

        async function postData(formatted_data) {
          try {
            const response = await fetch('update_quantity.php', {
              method: 'POST',
              body: formatted_data
            });

            const data = await response.text();
            if (data) {
              document.querySelector('#ajax-message').innerHTML = data;
            }
          } catch(err) {
            console.warn('postData:\n' + err);
          }
        }
      }
    </script>  
  </body>
</html>

przykładowy plik do przetwarzania danych z ajax-a

update_quantity.php

<?php
  if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    printf(var_dump($_POST));
    // $id = $_POST['id'] ?? null;
    // $ilosc = $_POST['ilosc'] ?? null;

    /*if ($id && $ilosc) {
        // UPDATA w bazie danych;
        // echo 'Dane zostały zaktualizowane';
      }*/
  } else {
    header('Location: index.php');
    exit();
  }
?>

 

gdy wpiszesz jakąś wartość do

<input type="text" name="ilosc-id1" placeholder="1" style="width:40px;">

np.: 0, 1, 5 itp. i naciśniesz Enter wywołasz akcję ajax-a.

 

 

P.S.  What does double question mark (??) operator mean in PHP ?

Comments

Dziękuję, siądę dzisiaj i sprawdzę :)

---

@VBService, po sklejeniu wszystkiego działa jak marzenie! Dzięki Wielkie! :)