Using HTML and JavaScript, how can I store a user's selection and pass those values as an input parameter?

Question

I am creating a custom web page, which contains a list of check boxes for a user to select the language(s) they want for translating text. The problem I am having is, how can I store the language(s) that the user has chosen and pass it as an input in my Azure Logic App query?

Answer 1

It might depend on your needs. However, a straight way of doing this is taking advantage of default HTML resources, and using the less javascript as possible:

HTML:

<form id="form-id">
  <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>
  <button type="submit">Submit</button>
</form>

Javascript:

const form = document.getElementById('form-id')

form.addEventListener('submit', ev => {
  ev.preventDefault()

  const formData = new FormData(document.getElementById('form-id'));  
  const url = 'https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index'
  fetch(url, {
    method: 'POST',
    body: formData
  })
})

If you try to send and check on you browser console, you'll see that it tries to send properly:

Now, its only a matter of handling this on the backend side.

Also, if you need to collect the data to send in a custom way, you can use this function to do that:

const checkedOptions = []
document.querySelectorAll('input[name="language"]').forEach(item => {
  if(item.checked) {
    checkedOptions.push(item.value)
  }
})

The whole selected data will be inside this array, and you can use methods like .join() to concatenate them on your url.

EDIT:

If you need to send data with GET method, you can follow this as an example:

const form = document.getElementById('form-id')

form.addEventListener('submit', ev => {
  ev.preventDefault()

  const formData = new FormData(document.getElementById('form-id'));
  const languages = new URLSearchParams(formData).toString()
  const reTranslate = 'someValue'
  const anotherValue = 'anotherValue'
  const url = `https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?${languages}&reTranslate=${reTranslate}&anotherValue=${anotherValue}`

  console.log(url)
  // output: https://api.videoindexer.ai/location/Accounts/accountId/Videos/videoId/Index?language=khmer&language=lao&reTranslate=someValue&anotherValue=anotherValue
  fetch(url, { method: 'GET '})

})

But I feel like you need to understand a couple of things first:

1. The difference between POST and GET;
2. How to send data to the server (using fetch api, axios, xhr request, etc) and deal with the response from server;
3. Discover which contract the API expects you to send

Cheers,