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

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

CodePudding user response：

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 onm ouseleave="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>

You can learn about variables here.

Here's an example GET request with AJAX, which you can adapt to fit your code:

var objXMLHttpRequest = new XMLHttpRequest();
objXMLHttpRequest.onreadystatechange = function() {
  if(objXMLHttpRequest.readyState === 4) {
    if(objXMLHttpRequest.status === 200) {
          alert(objXMLHttpRequest.responseText);
    } else {
          alert('Error Code: '    objXMLHttpRequest.status);
          alert('Error Message: '   objXMLHttpRequest.statusText);
    }
  }
}
objXMLHttpRequest.open('GET', 'request_ajax_data.php');
objXMLHttpRequest.send();

You can learn how to use and adapt this code here.

You could also programmatically execute a form that opens in a new tab instead of using AJAX, which is the easier route in my opinion.

// use vars, put in function under variables being  set

document.getElementById('fnamef2input').value = fname;
document.getElementById('lnamef2input').value = lname;
document.getElementById('bdayf2input').value = bday;

// submit form, put in function:

document.getElementById('mySecondForm').submit();

<form action="..." method="GET" id="mySecondForm">
  <input type="hidden" name="fname" id="fnamef2input">
  <input type="hidden" name="lname" id="lnamef2input">
  <input type="hidden" name="bday" id="bdayf2input">
</form>