I have searched high and low to try and figure out these issues, tested different codes, but am not able to resolve.
On my const I have added a .search to add code to the end of a URL, this works for Google and Amazon examples.
The Google example, the search result adds a "?" to the string and I cannot figure out where this is coming from.
The Amazon example, the search result removes the input result taking you to a black URL without the search result.
const myGoogleUrl = new URL("https://www.google.co.uk");
myGoogleUrl.search = "&source=lnms&tbm=isch&sa=X&ved=";
const myAmazonUrl = new URL("https://www.amazon.co.uk");
myAmazonUrl.search = "&i=instant-video";
const formHandler = (event) => {
event.preventDefault();
let form = event.currentTarget,
format = {
getParameters: function() {
form.submit();
},
rest: function() {
window.open(`${form.action}${form.q.value.trim()}`);
},
googleAttach: function() {
window.open(`${form.action}${form.q.value}${myGoogleUrl.search}`);
},
amazonAttach: function() {
window.open(`${form.action}${form.q.value}${myAmazonUrl.search}`);
},
};
format[form.dataset.searchmethod]();
};
document
.querySelectorAll("form")
.forEach((form) => form.addEventListener("submit", formHandler));<body>
<h1>Hello Test Title</h1>
<form id="google" action="https://www.google.co.uk/search?q=" target="_blank" data-searchmethod="googleAttach">
<input type="text" name="q">
<button>Search Google Images</button>
</form>
<form action="https://en.wikipedia.org/w/index.php?search=" target="_blank" data-searchmethod="rest">
<input type="text" name="q">
<button>Search Wiki</button>
</form>
<form action="https://www.amazon.co.uk/s?k=" target="_blank" data-searchmethod="amazonAttach">
<input type="text" name="q">
<button>Search Amazon Videos</button>
</form>
</body>On a side note, I've been reading How do I ask a good question? as my previous post questions have not been well written. I'm trying to improve this as best I can. I hope this post is more inline with the rules now.