Append form data to a URL

appendFormDataToUrl.js

/**
 * Append form data to URL
 * Henry Bley-Vroman, 2021
 *
 * Takes a URL and a form, returns a URL
 * Use case: handling form submission with JS
 * 
 * `url = (form.action, form)` and then use `url`
 * `url = (url, form)` and then use `url`
 * 
 * 
 * @param url 
 * @param form 
 * @returns
 */

export default function(url, form) {
  const reendcodeURI = (uri) {
    return encodeURI(decodeURI(uri))
  }

  const formData = new FormData(form)
  const searchParams = new URLSearchParams(formData)

  const search = [reendcodeURI(url.search), reendcodeURI(searchParams.toString())]
    .filter(v => v)
    .join('&')

  url.search = search

  return url
}

It feels like the "right" solution should involve URLSearchParams.keys() and URLSearchParams.append() but I found simply working with strings more reliable for cases where there are array params (e.g. <input name="q[]" …). The "re-encoding" is aimed at times where you can't be certain whether or not your string is encoded; it may not support all edges.