How do I send form name variable?

How do I send form name variable?

I am jQuery/Javascript-noob and farily good at PHP. I would like to make a generel Jquery function where when I enter something in a form-field (text, textarea, etc.) and leave form-field, e.g click outside formfield the function sends data from form field to  PHP. My problem is that all examples allready have form-name in the jQuery-function which is annoying!

example....I could in same screen have:

<input type="text" name="firstname" value="">
<input type="text" name="lastname" value="">
<input type="text" name="whatever" value="">

When I click and fill firstname and click outside form-field it should send form "name" and form "value" to backend (PHP). I would like to get something like $_POST['name'] and $_POST['value'] on the PHP-side. Then I do all my PHP stuff. Perhaps it would be need to send back a return-message - but lets solve one problem at a time :)

Here is my code which is made up by tutorial - so please split it apart! :)
Hope someone is able to help me out there.....


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Get Reverse IP</title>
    <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#ajaxInputVal').change(function(){
                $.ajax({
   
                    type: "GET",
                    url: "ajax.php",
                    // data: 'value=' + $('#ajaxInputVal').val(),
                    data: 'value=' + $('#ajaxInputVal').val(),
                    success: function(msg){
                        $('#ajaxOutputVal').html(msg);
                    }
   
                }); // Ajax Call
            }); //event handler
        }); //document.ready
    </script>
</head>
<body>

    <input type="text" name="test" value="" id="ajaxInputVal">
    <div id="ajaxOutputVal"></div>
   
</body>
</html>