Working with vanilla JS is there a "way" where i could essentially event.preventDefault while reflecting the URL on the form. I want to give people the choice to copy and paste the link and share to their friends.
My javascript code is doing something like
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);
})
In so doing it's not reflected in the url that i can do file:///C:/Users/bobby/Desktop/twitdemy/index.html?keywords=cas
I have already did some checks for queryString so essentially it works.
Right now since there is event.preventDefault the url is basically static at file:///C:/Users/bobby/Desktop/twitdemy/index.html
You can use history.pushState() to modify the current url without reloading page
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>