Javascript manually set URL

Question

I wrote the following script. It listens on a Search Text Input Field, and takes the value and forwards to my Search Page (at /Home/Search).

<script type="text/javascript">
    $("#search").on('keydown', function (e) {
        var searchVal = $("#search").val();
        if (e.keyCode == 13) {
            var url = '/Home/Search?' + searchVal;
            window.location.href = url;
        }
    });
</script>

For some reason, it is not doing anything. My current page location never changes, and a "?" just gets appended to the end of my current URL.

Was wondering if anyone has any ideas. Thanks!!!

EDIT Here it is in action: https://municipalagenda.com/

The Search Bar across the top + hitting enter in the field triggers the aforementioned JavaScript function.

@Pyromonk I checked `$('#search").val()` via JavaScript alert, it has a value. Also, I removed window. Still not working. — Philip Tenn, May 31 '17 at 23:58
@Lixus Sure thing, thank you. I edited my original post to contain the Web Page and how to run the JavaScript code. — Philip Tenn, May 31 '17 at 23:59
Pressing Enter is submitting your form and doing a full postback before the javascript can run. — kman, Jun 01 '17 at 00:19
@kman I think you're right. I'm going to run down that path. — Philip Tenn, Jun 01 '17 at 00:26
just disable the form event that wraps the '#search' that should do the trick — karthick, Jun 01 '17 at 00:27
@kman you were correct. Could you please post it as an answer so I can accept? — Philip Tenn, Jun 01 '17 at 00:30
Sorry, late to respond but just wanted to add to the couple valid possible solutions already posted here that to keep the Enter key from submitting you could also just add another hidden input. While hacky, it does get you around the issue of a [single input submitting when Enter is pressed](https://stackoverflow.com/questions/1370021/why-does-forms-with-single-input-field-submit-upon-pressing-enter-key-in-input). — kman, Jun 01 '17 at 03:08

Nesar · Accepted Answer · 2017-06-01T02:17:57.643

The reason it's not working is because you are having the input text field inside form element. So when you press enter the form gets submitted before hitting your keydown event.

Change this

<form class="navbar-form navbar-left">
        <i class="fa fa-search"></i>
        <input type="text" id="search" class="form-control" placeholder="Search Municipal Agenda">
</form>

To

<span class="navbar-form navbar-left">
        <i class="fa fa-search"></i>
        <input type="text" id="search" class="form-control" placeholder="Search Municipal Agenda">
</span>

score 1 · Answer 2 · answered Jun 01 '17 at 00:28

The reason why the issue is happening is because your form is trying to post at the same time as you are trying to load the url.

Disable the form's default event then it should work

$('.navbar-form').on('submit', function(e){
    e.preventDefault();
});

Javascript manually set URL

2 Answers2