How can I save each input value of a jquery keyup() in MySQL database?

Question

I am creating a study for my university and want to save each input value a user types in a password field into a database.

For example: A user types "hello" as a password. I want to save 'h', 'he', 'hel', 'hell' and at least 'hello'. If he deletes a character like the last one I want to save this as well: 'hell'.

Currently I am saving the last value 'hello' like this:

startpage.php:

<form action="?atn=validatePassword" method="post" class="form mg_top">
   <label id="enterPW" for="inp_list_generatedPassword">Select or enter Password:</label>
   <input id="inp_list_generatedPassword" name="password" value="" type='password' class="form-control talign_center input" placeholder="Select or enter password">
</form>

ViewController.php:

private function validatePassword(){        
  $password = $_POST["password"];
}

To get the inputs I have a js file where I am using the keyup event:

startpage.js:

$('#inp_list_generatedPassword').keyup(function() {
var input = this.value;
$('#output').val(input);
$.ajax({
    url: "startpage.php",
    data: {
        'keyValue' : input
    },
    dataType: 'json',
   });
});

In the ViewController.php I am adding this line $currentPW = $_GET["keyValue"]; But it doesn't work. I am getting an error: Undefined index: keyValue in ViewController.php

In addition this won't save each input. It just saves the last entered string when the button is pressed: <button id="matchPassword" class="btn btn-primary form-control">Submit</button>

How can I save all steps? And is there a mistake in my code or rather in the Ajax call?

Answer 1

Of course, this will give your database an immense overload if someone types really weird stuff.

You need to use a cache in your PHP-Script, but that is not really part of the Question.

To the Solution:

I tried it and it worked with this:

$(document).on('keyup', '#inp_list_generatedPassword', function() {
    var input = this.value;
    $('#output').text(input);
});

Seeing here: https://jsfiddle.net/cj1367eo/

Now you can use your "input" variable just as you want. I also would prefer using "$.post" as seen here: http://api.jquery.com/jquery.post/

Attention, untested code:

$.post( "api.php", { data: input } );

Now you can use the $_POST["data"] to get your input.

Additional Information:

But as i told before: Use a cache!

Else your system can get in real trouble.

It is really enough to use a global PHP variable that you write every N Minutes or Entries into your database.