Modify a database with a button

[Diche]

Hello,

I need help modifying a database.

It turns out that I have to code a "myaccount" page where a user's information will be displayed by retrieving it from my database (this part works). Where I'm stuck is that I want to be able to modify this information by clicking on a "modify" button and then save this modified information in my database using a "save" button. I'm stuck on the "save" button and I need your help!

Here is my code:

My script for the buttons:

<script>
    function toggleEditMode(isEditMode) {
      var fields = document.querySelectorAll('.editable-field');
      var editButton = document.getElementById('edit-btn');
      var saveButton = document.getElementById('save-btn');
      
      if (isEditMode) {
        fields.forEach(field => {
          var input = document.createElement('input');
          input.type = 'text';
          input.name = field.dataset.name;
          input.value = field.textContent;
          field.textContent = '';
          field.appendChild(input);
        });
        
        editButton.style.display = 'none';
        saveButton.style.display = 'inline-block';
      } else {
        fields.forEach(field => {
        var input = field.querySelector('input');
        field.textContent = input.value;
      });
      
      editButton.style.display = 'inline-block';
      saveButton.style.display = 'none';
    }
  }
  
  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('edit-btn').addEventListener('click', () => {
      toggleEditMode(true);
    });
    
    document.getElementById('save-btn').addEventListener('click', () => {
      document.getElementById('accountForm').submit();
    });
  });
  </script>

My PHP to retrieve the info in my database:

<?php
require_once "myFunctions.php";
$mysqli = getDatabase();

if ($mysqli->connect_error) {
    die('Connect Error (' . $mysqli->connect_errno . ') '
        . $mysqli->connect_error);
}
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit'])) {
  $firstname = $_POST['firstname'];
  $lastname = $_POST['lastname'];
  $email = $_POST['email'];
  $phone = $_POST['phone'];
  $password = $_POST['password'];

  $sql = "UPDATE seller SET Fname = '$firstname', Lname = '$lastname', mail = '$email', phone = '$phone', password = '$password' WHERE login = '".$_SESSION['login']."'";
  
  if ($mysqli->query($sql) === TRUE) {
    $_SESSION['Fname'] = $firstname;
    $_SESSION['Lname'] = $lastname;
    $_SESSION['mail'] = $email;
    $_SESSION['phone'] = $phone;
    $_SESSION['password'] = $password;

    header('Location: myaccount.php');
  } else {
    $updateError = "Erreur lors de la mise à jour des informations";
  }
}
?>

My form with information and buttons:

<div class="parent-container"> 
    <div class="container">
      <h1>Mon compte</h1>
      <form id="accountForm" method="post">
        <div class="account-info">
          <label>Username:</label>
          <span class="editable-field" data-name="username"><?php echo $_SESSION['login']; ?></span>
        </div>
        <div class="account-info">
          <label>First name:</label>
          <span class="editable-field" data-name="firstname"><?php echo $_SESSION['Fname']; ?></span>
        </div>
        <div class="account-info">
          <label>Last name:</label>
          <span class="editable-field" data-name="lastname"><?php echo $_SESSION['Lname']; ?></span>
        </div>
        <div class="account-info">
          <label>Email :</label>
          <span class="editable-field" data-name="email"><?php echo $_SESSION['mail']; ?></span>
        </div>
        <div class="account-info">
          <label>Téléphone :</label>
          <span class="editable-field" data-name="phone">0601020304</span>
        </div>
        <div class="account-info">
          <label>Password:</label>
          <span class="editable-field" data-name="password"><?php echo $_SESSION['password']; ?></span>
        </div>
        <div class="btn-container">
          <button type="button" id="edit-btn">Modifier</button>
          <button type="submit" name="submit"  id="save-btn" style="display: none;">Enregistrer</button>
        </div>
      </form>
    </div>

Thank you in advance for your help.

[ginerjm]

May I ask - Why all the JS?  Why is your approach not a simple php script wihtha simple html form that has the data fields and a Save button once the user has clicked on the Modify button?

[Barand]

I'd do a print_r($_POST) when the post data is received to check what is being posted. (comment out the header() line so you see the array output)