Question

I hoping for a tiny bit of help.

I have setup a form which pulls the value from #keyword and submits it as the url.

The page is http:// mysite.com /tags

I am having two problems:

1. The .toLowerCase isn’t working
2. The url updates though it adds the name of the keyword input (which is keyword) like so: http:// mysite.com/tags?keyword=MYKEYWORD

I would like io to look like this instead:
http:// mysite.com/tags/mykeyword

This is the code I have so far:

$(document).ready(function() {
     $('#tag-search').click(function() {
          goUrl = http://mysite.com/ + $('#keyword').val().toLowerCase();
          window.location = goUrl;
     });
});

and the form:

<form id="tagForm" class="uniForm">
<fieldset class="inlineLabels">
    <div class="ctrlHolder">
        <label for="keyword">Tag Keyword</label>
        <input id="keyword" name="keyword" value="" size="35" class="textInput required" type="text" />
        <p class="formHint">Add your tag keyword and hit submit</p>
        </div>
    <div class="buttonHolder"><button type="submit" id="tag-search" class="primaryAction">Submit</button></div>
</fieldset>
</form>

Answer 1

Your form is currently doing the default behaviour – i.e. GETting the current URL (because you haven’t specified an action or method), with query string parameters pulled from values entered into the form.

To stop the default behaviour, you need to make sure you return false from your events handlers:

$(document).ready(function() {
     $('#tag-search').click(function() {
          goUrl = 'http://mysite.com/' + $('#keyword').val().toLowerCase();
          window.location = goUrl;
          return false;  // Prevent the default button behaviour
     });
     $('#tagForm').submit( function() {
          return false;  // May be necessary to prevent the default form behaviour
     });
});

As others have also identified, you need to wrap the base site url in quotes when you assign it to goUrl, to make sure that it is treated as a string.

Update It is probably advisable to move your redirect logic from the button’s click handler to the form’s submit handler, as Stofke suggests:

$(document).ready(function() {
     $('#tagForm').submit( function() {              
          goUrl = 'http://mysite.com/' + $('#keyword').val().toLowerCase();
          window.location = goUrl;
          return false;  // Prevent the default form behaviour
     });
});

Keep in mind that there are other ways to submit your form besides clicking on the Submit button, such as hitting the Enter key inside a text box – using your implementation, when the user hits Enter inside the Keyword text box, they’ll still end up at http:// mysite.com/tags?keyword=MYKEYWORD rather than http:// mysite.com/tags/mykeyword.