css - Javascript / PHP check the data onLeave of Inputfield and save it for "after click button"

Hello community Stackoverflow,

i recently begun again to make some experiments with web developing and I would appreciate it, if you could help me with the following issue:

I'm trying to save the string of each input in the following pictured form in a database, after the mouse cursor had left the textBox (OnLeave), this string will be called from the database, after the user clicked on the button "save". I need to check this string before the data being saved after clicking on "save"

Exemple:

step 1: a user types his Name = 'Stackoverflower' in the inputfield and then moves the mouse cursor outside the the inputfiel;

step 2: by leaving the inputfiel occurs the following event, in the background: a php code will save that input (the name: 'Stackoverflower') in the database;

step 3: after the user clicked on the button "save", a php code will call that string 'Stackoverflower';

That is a solution, but I don't want to save any data in the database unless the user clicks "save". So how can I save that input temporarily (not in the database - maybe in a hidden dom element ? Or do you maybe have a better idea?).

I'll appreciate your interaction

Friendly regards Reda

Answer

Solution:

PHP only executes on page load, to do this, you will need to use Ajax to execute the save PHP script.

To store the value, you can use a variable.

let fname; // declare the fname value
let lname; // declare the lname value
let bday; // declare the bday value

function mouseLeft() {
  fname = document.getElementById('fname').value; // store the first name value
  lname = document.getElementById('lname').value; // store the last name value
  bday = document.getElementById('bday').value; // store the birthday value
  
  //optional:
  document.getElementById('storedvalues').innerText = "fname=" + fname + ", lname=" + lname + ", bday=" + bday;  
  
  // your ajax script goes here with fname, lname and bday being the values of their respective inputs
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body onmouseleave="mouseLeft();"> <!-- function that executes on mouse leave -->
    <form> <!-- your form goes here, just add the ids to the inputs -->
      <label for="fname">First name:</label>
      <input type="text" id="fname">
      <br>
      <label for="lname">Last name:</label>
      <input type="text" id="lname">
      <br>
      <label for="bday">Birthday:</label>
      <input type="date" id="bday">
    </form>
    
    <!-- optional, just for debug -->
    <p>stored values: <span id="storedvalues">fname=, lname=, bday=</span></p>
  </body>
</html>

Source