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

Solution

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");
}

Comments

[user1]

I think you should add javascript code for the OP. Since OP is new to Javascript, may have hard time getting into jquery

[Fabian]

Hi mwilson, I implemented your 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

[mwilson]

Do you have a reference to jQuery in your HTML? If not, your code will not work. You will need to use the 'Just JavaScript' example.

[Fabian]

I have added jQuery. I just added it and tested it, it works but this is the first real non-test command I'm trying out.