Trabajar con Vanilla JS hay una "manera" en la que esencialmente podría event.preventDefault mientras refleja la URL en el formulario. Quiero darles a las personas la opción de copiar y pegar el enlace y compartirlo con sus amigos. Mi código javascript está haciendo algo como
searchKeywordForm.addEventListener('submit', async (event) => { event.preventDefault(); //Clear all courseItems and start from scratch courseItems = []; courseContainerElement.innerHTML = ""; let searchInput = document.getElementById("keywords"); await fetchDataByKeywords(searchInput.value); }) Al hacerlo, no se refleja en la URL que puedo hacer file:///C:/Users/bobby/Desktop/twitdemy/index.html?keywords=cas . Ya he realizado algunas comprobaciones para queryString, por lo que esencialmente funciona.
En este momento, dado que existe event.preventDefault la URL es básicamente estática en file:///C:/Users/bobby/Desktop/twitdemy/index.html
Puede usar history.pushState() para modificar la URL actual sin recargar la página
const searchKeywordForm = document.forms.keyform searchKeywordForm.addEventListener('submit', (e) => { e.preventDefault(); const searchInput = document.getElementById("keywords"), newUrl = `${searchKeywordForm.action}?key=${searchInput.value}`; history.pushState(null, null, newUrl) // log current location to see changes console.log(location.href) }) <form id="keyform" action="/formsubmiturl"> <input id="keywords" value="foo" /> <button>Submit</button> </form>