Search code examples
azure-functions-core-tools

JavaScript code not returning an expected URL as response

I am trying to get [this][1] HTML and JavaScript code to work locally but I am not have success. For example, if you run their code snippet and choose a language such as "English United States" and click 'Submit" you should being see a response.

Solution

  • The script tag in your code is placed above the closing tag of the Form.

        <script>
  document.querySelector("form").addEventListener("submit",function(e) {
  e.preventDefault(); // stop submission
  const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
  const language = document.getElementById("language").value;
  url.searchParams.set("language",language);
  console.log(url); // change to a fetch or similar
})
  </script>
</form>

    Move the entire script section just above the closing of the body tag.

     <!DOCTYPE html>
<html>
<body>
<form>
  <select name="language" id="language">
    <option value="en-GB">Please select language (Default en-GB</option> 
    <option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
    <option value="sr-Latn-RS">Serbian (Latin)</option>
    <option value="bs-Latn">Bosnian</option>
    <option value="zh-Hans">Chinese (Simplified)</option>
    <option value="zh-Hant">Chinese (Traditional)</option>
    <option value="fil-PH">Filipino</option>
    <option value="en-GB">English United Kingdom</option>
    <option value="en-FJ">Fijian</option>
    <option value="en-AU">English Australia</option>
    <option value="en-WS">Samoan</option>
    <option value="en-US">English United States</option>
    <option value="el-GR">Greek</option>
    <option value="es-ES">Spanish</option>
    <option value="et-EE">Estonian</option>
    <option value="fa-IR">Persian</option>
    <option value="fi-FI">Finnish</option>
    <option value="fr-FR">French</option>
    <option value="fr-HT">Haitian</option>
    <option value="af-ZA">Afrikaans</option>
    <option value="ar-SY">Arabic Syrian Arab Republic</option>
    <option value="ar-EG">Arabic Egypt</option>
    <option value="da-DK">Danish</option>
    <option value="de-DE">German</option>
    <option value="bg-BG">Bulgarian</option>
    <option value="bn-BD">Bangla</option>
    <option value="mg-MG">Malagasy</option>
    <option value="ms-MY">Malay</option>
    <option value="mt-MT">Maltese</option>
    <option value="ca-ES">Catalan</option>
    <option value="cs-CZ">Czech</option>
    <option value="nl-NL">Dutch</option>
    <option value="nb-NO">Norwegian</option>
    <option value="id-ID">Indonesian</option>
    <option value="it-IT">Italian</option>
    <option value="lt-LT">Lithuanian</option>
    <option value="lv-LV">Latvian</option>
    <option value="ja-JP">Japanese</option>
    <option value="ur-PK">Urdu</option>
    <option value="uk-UA">Ukrainian</option>
    <option value="hi-IN">Hindi</option>
    <option value="he-IL">Hebrew</option>
    <option value="hu-HU">Hungarian</option>
    <option value="hr-HR">Croatian</option>
    <option value="ko-KR">Korean</option>
    <option value="vi-VN">Vietnamese</option>
    <option value="tr-TR">Turkish</option>
    <option value="ta-IN">Tamil</option>
    <option value="th-TH">Thai</option>
    <option value="to-TO">Tongan</option>
    <option value="ru-RU">Russian</option>
    <option value="ro-RO">Romanian</option>
    <option value="pt-BR">Portuguese</option>
    <option value="pl-PL">Polish</option>
    <option value="sv-SE">Swedish</option>
    <option value="sw-KE">Kiswahili</option>
    <option value="sl-SI">Slovenian</option>
    <option value="sk-SK">Slovak</option>
  </select>
  <input type="submit" />
</form>
<script>
      document.querySelector("form").addEventListener("submit",function(e) {
      e.preventDefault(); // stop submission
      const url = new URL("https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=...&reTranslate=...&includeStreamingUrls=...&accessToken=...");
      const language = document.getElementById("language").value;
      url.searchParams.set("language",language);
      console.log(url); // change to a fetch or similar
    })
      </script>
</body>
</html>

    Since you have the script within the form, The code does not know what to do when it is submitted.

    As you want the result below the form and not on the console, you will have to create a DOM element inside the html body and then using the selector change the content of the element, Something like this, 

       <div>
<form>
  <select name="language" id="language">
    <option value="en-GB">Please select language (Default en-GB</option> 
    <option value="sr-Cyrl-RS">Serbian (Cyrillic)</option>
    <option value="sr-Latn-RS">Serbian (Latin)</option>
    <option value="bs-Latn">Bosnian</option>
    <option value="zh-Hans">Chinese (Simplified)</option>
    <option value="zh-Hant">Chinese (Traditional)</option>
    <option value="fil-PH">Filipino</option>
    <option value="en-GB">English United Kingdom</option>
    <option value="en-FJ">Fijian</option>
    <option value="en-AU">English Australia</option>
    <option value="en-WS">Samoan</option>
    <option value="en-US">English United States</option>
    <option value="el-GR">Greek</option>
    <option value="es-ES">Spanish</option>
    <option value="et-EE">Estonian</option>
    <option value="fa-IR">Persian</option>
    <option value="fi-FI">Finnish</option>
    <option value="fr-FR">French</option>
    <option value="fr-HT">Haitian</option>
    <option value="af-ZA">Afrikaans</option>
    <option value="ar-SY">Arabic Syrian Arab Republic</option>
    <option value="ar-EG">Arabic Egypt</option>
    <option value="da-DK">Danish</option>
    <option value="de-DE">German</option>
    <option value="bg-BG">Bulgarian</option>
    <option value="bn-BD">Bangla</option>
    <option value="mg-MG">Malagasy</option>
    <option value="ms-MY">Malay</option>
    <option value="mt-MT">Maltese</option>
    <option value="ca-ES">Catalan</option>
    <option value="cs-CZ">Czech</option>
    <option value="nl-NL">Dutch</option>
    <option value="nb-NO">Norwegian</option>
    <option value="id-ID">Indonesian</option>
    <option value="it-IT">Italian</option>
    <option value="lt-LT">Lithuanian</option>
    <option value="lv-LV">Latvian</option>
    <option value="ja-JP">Japanese</option>
    <option value="ur-PK">Urdu</option>
    <option value="uk-UA">Ukrainian</option>
    <option value="hi-IN">Hindi</option>
    <option value="he-IL">Hebrew</option>
    <option value="hu-HU">Hungarian</option>
    <option value="hr-HR">Croatian</option>
    <option value="ko-KR">Korean</option>
    <option value="vi-VN">Vietnamese</option>
    <option value="tr-TR">Turkish</option>
    <option value="ta-IN">Tamil</option>
    <option value="th-TH">Thai</option>
    <option value="to-TO">Tongan</option>
    <option value="ru-RU">Russian</option>
    <option value="ro-RO">Romanian</option>
    <option value="pt-BR">Portuguese</option>
    <option value="pl-PL">Polish</option>
    <option value="sv-SE">Swedish</option>
    <option value="sw-KE">Kiswahili</option>
    <option value="sl-SI">Slovenian</option>
    <option value="sk-SK">Slovak</option>
  </select>
  <input type="submit" />
</form>
<p id="result" />
  <script>
  document.querySelector("form").addEventListener("submit",function(e) {
  e.preventDefault(); // stop submission
  const language = document.getElementById("language").value;
  const url = `https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=${language}&reTranslate=...&includeStreamingUrls=...&accessToken=...`;
  //url.searchParams.set("language",language);
  console.log(url); // change to a fetch or similar
  document.getElementById('result').innerHTML = url
})
  </script>
</div>