Reputation: 13
I have multiple search functions/text boxes that I would like to condense into a textbox + dropdown selection.
http://jsfiddle.net/rhnt9vme/3/
<div>
<form>
<input type='text' id='searchOneInput' />
<button type='submit' onclick='searchOne()' target="_blank">Search 1</button>
</form>
</div><br>
<div>
<form>
<input type='text' id='searchTwoInput' />
<button type='submit' onclick='searchTwo()' target="_blank">Search 2</button>
</form>
</div><br>
<div>
<form>
<input type='text' id='searchThreeInput' />
<button type='submit' onclick='searchThree()' target="_blank">Search 3</button>
</form>
</div><br>
function searchOne(){
var searchOneInput = document.getElementById('searchOneInput').value;
window.open("http://one.com/search=" + searchOneInput);
}
function searchTwo(){
var searchTwoInput = document.getElementById('searchTwoInput').value;
window.open("http://two.com/search=" + searchTwoInput);
}
function searchThree(){
var searchThreeInput = document.getElementById('searchThreeInput').value;
window.open("http://three.com/search=" + searchThreeInput);
}
I want to combine these into a dropdown selection single textbox search that looks like this:
<form>
<input type="text" id="userInput" />
<select id="dropdown">
<option value="">Search 1</option>
<option value="">Search 2</option>
<option value="">Search 3</option>
</select>
<button type="submit" onclick="">Search</button>
</form>
Upvotes: 0
Views: 317
Reputation: 206189
"submit"
event using Element.addEventListener()
method<option>
s value
attributedocument.getElementById("searchForm").addEventListener("submit", function(ev) {
ev.preventDefault(); // Comment out if not needed
var dropdownURL = document.getElementById("dropdown").value;
var searchInput = document.getElementById("userInput").value.trim();
var address = dropdownURL + searchInput;
console.log(address);
window.open(address);
});
<form id="searchForm"> <!-- PS: add ID to form -->
<input type="text" id="userInput">
<select id="dropdown">
<option value="http://one.com/?search=">Search 1</option>
<option value="http://two.com/?search=">Search 2</option>
<option value="http://three.com/?search=">Search 3</option>
</select>
<button type="submit">Search</button>
</form>
In case you need a combined URI string with additional suffixed query parameters like
https://example.com/?search=**USERINPUTHERE**&c=%2FDefault.asp
than you could use a placeholder in the set of not URI allowed characters, like |
, and replace it with the user input string using String.prototype.replace()
document.getElementById("searchForm").addEventListener("submit", function(ev) {
ev.preventDefault(); // Comment out if not needed
var dropdownURL = document.getElementById("dropdown").value;
var searchInput = document.getElementById("userInput").value.trim();
// Replace "|" with the user input
var address = dropdownURL.replace(/\|/, searchInput);
console.log(address);
window.open(address);
});
<form id="searchForm"> <!-- PS: add ID to form -->
<input type="text" id="userInput">
<select id="dropdown">
<option value="http://one.com/?search=|">Search 1</option>
<option value="http://two.com/?search=|">Search 2</option>
<option value="http://three.com/?search=|">Search 3</option>
<option value="https://four.com/?search=|&c=%2FDefault.asp">Search 4</option>
</select>
<button type="submit">Search</button>
</form>
PS: since the order of query params is not important, you can always define your string like: https://example.com/?c=%2FDefault.asp&search=
and use the first example anyways.
Upvotes: 1