Как l oop через выбранный элемент (языки) с помощью JavaScript / JQuery?

Question

Я принял список языков как HTTP-запрос, и я вижу, как я могу перевести это oop в приложение Azure logi c. Но прежде чем я это сделаю, мне интересно, как l oop через выбранные языки для обработки в Azure logi c приложении?

Например, если пользователь выбрал Spani sh, как мне обработать 'Spani sh' и отправить его в мое Azure logi c приложение?

Вот мой файл HTML, который я создал с флажками на всех языках:

Язык. html:

<h2>Check Box</h2>

<form>
<input type="checkbox" name="language" value="english"> English<br/>
<input type="checkbox" name="language" value="spanish"> Spanish <br/>
<input type="checkbox" name="language" value="vietnamese"> Vietnamese<br/>
<input type="checkbox" name="language" value="somali"> Somali <br/>
<input type="checkbox" name="language" value="chinese"> Chinese <br/>
<input type="checkbox" name="language" value="amharic"> Amharic <br/>
<input type="checkbox" name="language" value="korean"> Korean <br/>
<input type="checkbox" name="language" value="russian"> Russian <br/>
<input type="checkbox" name="language" value="tagalog"> Tagalog <br/>
<input type="checkbox" name="language" value="arabic"> Arabic <br/>
<input type="checkbox" name="language" value="khmer"> Khmer <br/>
<input type="checkbox" name="language" value="thai"> Thai <br/>
<input type="checkbox" name="language" value="lao"> Lao <br/>
<input type="checkbox" name="language" value="japanese"> Japanese <br/>
<input type="checkbox" name="language" value="deutsch"> Deutsche <br/>
</form>  

Answer 1

ОБНОВЛЕНИЕ после уточнения

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
})  

ul {
  list-style-type: none
}

#chosen {
  text-transform: capitalize
}

<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>

Вы можете сопоставить их, используя document.querySelectorAll:

document.querySelector("form").addEventListener("click", function(e) {
  if (e.target.name && e.target.name === "language")
    document.getElementById("chosen").textContent = [...this.querySelectorAll("[name=language]:checked")].map(chk => chk.value).join(", ");
})

ul {
  list-style-type: none
}

#chosen {
  text-transform: capitalize
}

<h2>Check Box</h2>

<span id="chosen"></span>

<form>
  <ul>
    <li><label><input type="checkbox" name="language" value="english"> English</label></li>
    <li><label><input type="checkbox" name="language" value="spanish"> Spanish</label></li>
    <li><label><input type="checkbox" name="language" value="vietnamese"> Vietnamese</label></li>
    <li><label><input type="checkbox" name="language" value="somali"> Somali</label></li>
    <li><label><input type="checkbox" name="language" value="chinese"> Chinese</label></li>
    <li><label><input type="checkbox" name="language" value="amharic"> Amharic</label></li>
    <li><label><input type="checkbox" name="language" value="korean"> Korean</label></li>
    <li><label><input type="checkbox" name="language" value="russian"> Russian</label></li>
    <li><label><input type="checkbox" name="language" value="tagalog"> Tagalog</label></li>
    <li><label><input type="checkbox" name="language" value="arabic"> Arabic</label></li>
    <li><label><input type="checkbox" name="language" value="khmer"> Khmer</label></li>
    <li><label><input type="checkbox" name="language" value="thai"> Thai</label></li>
    <li><label><input type="checkbox" name="language" value="lao"> Lao</label></li>
    <li><label><input type="checkbox" name="language" value="japanese"> Japanese</label></li>
    <li><label><input type="checkbox" name="language" value="deutsch"> Deutsch</label></li>
  </ul>
</form>

Answer 2

вам нужно оставить атрибут name таким же, как и имя переменной, в которой data/value будет сохранено, когда пользователь установит флажок

<h2>Check Box</h2>

<form>
<input type="checkbox" name="language" value="english"> English<br/>
<input type="checkbox" name="language" value="spanish"> Spanish <br/>
<input type="checkbox" name="language" value="vietnamese"> Vietnamese<br/>
<input type="checkbox" name="language" value="somali"> Somali <br/>
<input type="checkbox" name="language" value="chinese"> Chinese <br/>
<input type="checkbox" name="language" value="amharic"> Amharic <br/>
<input type="checkbox" name="language" value="korean"> Korean <br/>
<input type="checkbox" name="language" value="russian"> Russian <br/>
<input type="checkbox" name="language" value="tagalog"> Tagalog <br/>
<input type="checkbox" name="language" value="arabic"> Arabic <br/>
<input type="checkbox" name="language" value="khmer"> Khmer <br/>
<input type="checkbox" name="language" value="thai"> Thai <br/>
<input type="checkbox" name="language" value="lao"> Lao <br/>
<input type="checkbox" name="language" value="japanese"> Japanese <br/>
<input type="checkbox" name="language" value="deutsche"> Deutsche <br/>
</form>