Creating a search form that opens a new url based on search input

Question

I created a form using bootstrap, you can see it below.

I'm trying to figure out how I can have a user enter in a value (5 digits) and when they click on the "Search" button a new window opens displaying the search results. The url would depend on the 5 digits entered into the search bar. The only part of the url that changes for all searches are the numbers added in the search box.

http://monkey=13857&red

So for example, they enter 13857 in the search bar, and when they click on "Search" a new widow opens redirecting them to http://monkey=13857&red. I'm new to javascript but I think I would use it to accomplish this task - any help would be greatly appreciated. Thank you.

--Update-- Hi mwilson (and everyone who helped so quickly), I implemented the code (thank you for the help) and it seems like my code isn't adding in the search numbers to the url. Here is my form code

HTML

<form>
<div class="form-group">
<label for="exampleInputEmail1">WorkFlow by Request ID</label>
<input type="text" class="form-control" id="search" placeholder="Request #">
</div>
<button type="submit" class="btn btn-default" id="WFF">Submit</button>
</form>  

JavaScript

    $('#WFF').on('click', function () {
    var searchInput = $('#search').text();
    var url = "http://monkey=" + searchInput + "&red";
    window.open(url);
});

If I enter 12345 in the search box and click the submit button it opens the site, but without the search entered- http://monkey=&red not http://monkey=12345&red

Answer 1

You can use window.open(<url>) to launch the window. Then it's just a matter of building the proper url string which can be done by creating a variable that holds the search value and the url. Build it how you need to and then pass it to the window.open(<url>) function and you're set.

JQuery

$('#btnSearch').on('click', function () {
    var searchInput = $('#textBoxEl').val();
    var url = "http://monkey=" + searchInput + "&red";
    window.open(url);
});

Just JavaScript

var button = document.getElementById("btnSearch");

button.onclick = function () {
    var text = document.getElementById("textBoxEl").value;
    window.open("http://monkey=" + text + "&red");
}