Use output from "form" in HTML in an API link-CodePudding

I have been working on a very simple YouTube Downloader on my GitHub website based off of the loader.to api. This is what I have so far:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    </head>
    <body>

    <p>
        <form>
            <label for="theurl">Youtube URL:</label><br>
            <input type="text" id="theurl" name="theurl"><br>
            <input type="submit" value="Ok">
        </form>
    </p>

        <iframe 
            style="width:800px;height:250px;border:0;overflow:hidden;" 
            scrolling="no" src="https://loader.to/api/card/?url=https://www.youtube.com/watch?v=dQw4w9WgXcQ">
        </iframe>
        
        <p><a href="https://replit.com/@Pufferfishe/YoutubeDownloader">replit code</a></p>
        <p><a href="https://youtubedownloader.pufferfishe.repl.co">replit website</a></p>
    </body>
</html>

This essentially a webpage that displays a form box with a submit button, and then a pre-defined loader.to block, that only links to one download (in this case, Never Gonna Give You Up). How could I make it so that the YouTube url that you enter into the form box would generate the relevant loader.to card?

CodePudding user response：

Using JavaScript you can:

Listen for the "submit" event on the form
Stop the form from refreshing the page
Get the YouTube URL from the input
Set the "src" attribute on the iframe using the YouTube URL

See below for working example.

// Listen for the "submit" event on the form
document.querySelector('form').addEventListener('submit', event => {

  // Stop the form from refreshing the page
  event.preventDefault() 
  
  // Get the YouTube URL from the input
  const youtubeUrl = document.querySelector('[name="theurl"]').value
  
  // Set the "src" attribute on the iframe using the YouTube URL
  document.querySelector('iframe').setAttribute('src', 'https://loader.to/api/card/?url='   youtubeUrl)
})

        <form>
            <label for="theurl">Youtube URL:</label><br>
            <input type="text" id="theurl" name="theurl"><br>
            <input type="submit" value="Ok">
        </form>

        <iframe 
            style="width:800px;height:250px;border:0;overflow:hidden;" 
            scrolling="no" src="https://loader.to/api/card/?url=https://www.youtube.com/watch?v=dQw4w9WgXcQ">
        </iframe>
        
        <p><a href="https://replit.com/@Pufferfishe/YoutubeDownloader">replit code</a></p>
        <p><a href="https://youtubedownloader.pufferfishe.repl.co">replit website</a></p>