Question

This is what I’m trying to do:

I have some pages on a website (an offline demo)
When you type ‘Contact’ in the input field and click ‘submit’, I want
to go to contact.htm.

I found something similar here (credits)

jQuery:

jQuery(function() {
    $(document).ready(function() {
        function goTo() {
            window.location = where.value + '.htm';
            return false;
        }
    });

html:

 <form action="" method="post" onsubmit="return goTo()">
    <input type="text" name="where" value="looking for"
    onfocus="if(this.value == this.defaultValue) this.value = '';
    "onblur="if(this.value == '') this.value = this.defaultValue;">
    <input type="submit" value="Go">
 </form>

My question to you is; After I submit the input, this code doesn’t navigate at all.

Is this the right way to do it? : window.location = where.value + '.htm';

Answer 1

Change your HTML to this ->

<form action="" method="post" onsubmit="return goTo()">
  <input type="text" id="where" name="where" value="looking for" //added id attribute
  onfocus="if(this.value == this.defaultValue) this.value = '';"
  onblur="if(this.value == '') this.value = this.defaultValue;">
  <input type="submit" value="Go">
</form>

and your JavaScript to this :

function goTo() {
    window.location = $('#where').val() + '.htm';
    return false;
}