src attribute not working in iframe tag in html

I am trying to convert the youtube video to audio using a API here is the API syntax is

<iframe id="buttonApi" src="https://yt-download.org/api/button/mp3?url=https://www.youtube.com/watch?v=zvrMzRVtj1s" width="100%" height="100%" allowtransparency="true" scrolling="no" style="border:none"></iframe>

JavaScript
​x
 
<iframe id="buttonApi" src="https://yt-download.org/api/button/mp3?url=https://www.youtube.com/watch?v=zvrMzRVtj1s" width="100%" height="100%" allowtransparency="true" scrolling="no" style="border:none"></iframe>
​

and the src syntax is

https://yt-download.org/api/button/{FTYPE}?url={VIDEO_URL}

so what i am doing is within a form create a search bar and a submit button and there once the user enters the youtube video link in the search bar onclick of search button it should get connected to the url= part in the api code,but all i am getting is a blank screen

which should ideally look like this and it works only if i directly enter the youtube url into the src=””

heres the html and js code

<html>
<body>
<script>
    const f = document.getElementById('form');
    const q = document.getElementById('query');
    const site = 'https://yt-download.org/api/button/mp3?url=';

    function apiworks(){
      const url = site + q.value;
      document.getElementById('buttonApi').src = url;

    }
    f.addEventListener('submit',apiworks);
</script>

    <form id="form" role="search">
      <input type="search" id="query" name="q"
       placeholder="Search..."
       aria-label="Search through site content">
      <button onclick="apiworks()">Search</button>
    </form>
      
    <iframe id="buttonApi" src="" width="100%" height="500px" allowtransparency="true" scrolling="no" style="border:none"></iframe>      
  </body>
  </html>

JavaScript
 
<html>
<body>
<script>
    const f = document.getElementById('form');
    const q = document.getElementById('query');
    const site = 'https://yt-download.org/api/button/mp3?url=';
​
    function apiworks(){
      const url = site + q.value;
      document.getElementById('buttonApi').src = url;
​
    }
    f.addEventListener('submit',apiworks);
</script>
​
    <form id="form" role="search">
      <input type="search" id="query" name="q"
       placeholder="Search..."
       aria-label="Search through site content">
      <button onclick="apiworks()">Search</button>
    </form>
      
    <iframe id="buttonApi" src="" width="100%" height="500px" allowtransparency="true" scrolling="no" style="border:none"></iframe>      
  </body>
  </html>
​

would really appreciate if anybody helps me out..!

Answer

thanks to all those who tried to help me out,just a single change of line fixed my problem

<form id="form" role="search" onsubmit="event.preventDefault()";>

JavaScript
 
<form id="form" role="search" onsubmit="event.preventDefault()";>
​

onsubmit attribued saved all my default values so the work done by javascript remains intact even after form submission

Advertisement

Answer