自动复制和粘贴-Ajax / JS

Question

I trying to make a cool kind of auto IMDB ID grabber that auto grabs the ID while you type the TV Show name, So far all I have gotten was it to check fi the field is empty if its not empty it would show a button you press that brings you to a page with the ID which you manually copy and paste into a field.

Is it possible to make it so it automatically grabs whatever you type in the field, in real time, put it at the end of a link for example: http://example.com?show=<UserEnteredShow> which it automatically goes to in the background and copies all browser see-able text and then puts it into another field.

I know this is pretty much overboard but I really want to see this happen. I have no idea where to start for this.

Answer 1

Just get the value of the PHP file using AJAX. If you're really new to AJAX, I recommend using $.ajax() which requires jQuery.

Whenever the user types something into the first <input>, we just send an AJAX request to the server and put the response in the second input.

I don't think Stack Overflow allows for AJAX in code snippets, so put the following code snippet in an HTML file and test it on your Web site:

//Our <input> elements
var toLink = document.getElementById("put-at-end-of-link");
var fromAjax = document.getElementById("copy-from-ajax-request");

//When the value of toLink changes, update fromAjax:
toLink.addEventListener("input", function () {
    //Send an AJAX request to /id.php:
    $.ajax({
        url: "/id.php",
        //This is a GET request:
        type: "GET",
        //We do not want to cause the user lag while we're sending this request, so set async to true:
        async: true,
        data: {name: toLink.value},
        success: function(response) {
            //Once we're done with the response, put it into fromAjax:
            fromAjax.value = response;
        }
    });
});

/* Make the input takes up the full screen width and give them some vertical space: */
input {
    width: 100%;
    margin: 1em 0;
}

<!--Remember to include the jQuery!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--The input elements:-->
<input type="text" id="put-at-end-of-link" placeholder="This is where the user enters the value to be sent to /id.php."/>
<input type="text" id="copy-from-ajax-request" placeholder="This is where we output the response from /id.php."/>

</div>