Jquery input value to url on submit question

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:

The .toLowerCase isn't working
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>

Dexter · Accepted Answer · 2011-02-20 14:59:42Z

4

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.

edited Feb 20, 2011 at 14:59

answered Feb 19, 2011 at 22:32

Dexter

18.5k4 gold badges47 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Natetronn Over a year ago

Thanks everyone for the quick replies! This seems to be working great.

Stofke Over a year ago

Why do both click() and submit()? You can do just submit() see solution below.

Natetronn Over a year ago

I tried with just the submit() and it didn't work. I did however try the above solution without the submit() using just the click and it still worked in my case. Thanks!

Stofke Over a year ago

the return false with .click may also work to stop the submit action but I find it more logic to replace .click() with .submit() as it runs when an actual submit of data takes place vs a click event. That's probably only a semantic difference in reality but still. $(document).ready(function() { $('#tag-search').submit(function() { goUrl = 'mysite.com' + $('#keyword').val().toLowerCase(); window.location = goUrl; return false; }); });

Natetronn Over a year ago

Stofke it does work though as Dexter had it setup where it was on the #tagForm form element versus having it on the #tag-search. Maybe this is due to the fact that it's a button and not an input? I understand now why it should be with .submit() as Stofke suggested and Dexter elaborated upon the reasoning why in regards to if a user hits enter versus clicks. The combined efforts of everyone has helped me a great deal so, I thank you all again!

KeatsKelleher · Accepted Answer · 2011-02-19 22:31:19Z

1

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

answered Feb 19, 2011 at 22:31

KeatsKelleher

10.3k4 gold badges49 silver badges53 bronze badges

Comments

Rian Schmits · Accepted Answer · 2011-02-19 22:31:07Z

0

Put quotes around the url like so:

'http://mysite.com/'

answered Feb 19, 2011 at 22:31

Rian Schmits

3,2264 gold badges30 silver badges45 bronze badges

Comments

nickmoriarty · Accepted Answer · 2011-02-19 22:32:00Z

0

You are missing the quotes around the first part of the URL Try

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

});

answered Feb 19, 2011 at 22:32

nickmoriarty

1,26319 silver badges23 bronze badges

Comments

Stofke · Accepted Answer · 2011-02-21 13:05:48Z

0

Use .submit() rather than .click() and return false; to prevent the form doing it's default behavior which is doing a GET request. No need to do both.

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

edited Feb 21, 2011 at 13:05

answered Feb 19, 2011 at 23:08

Stofke

2,9682 gold badges24 silver badges29 bronze badges

Collectives™ on Stack Overflow

Jquery input value to url on submit question

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related