How can I get an HTML form's values into a "custom" URL?

Question

On my site, I can access a search function by going to "mysite.com/search/search_term", where "search_term" is the term the user entered. I'm trying to get a simple one-input form to format the URL that way. One way that I can do it is make a PHP script that would redirect to the proper place. So if you navigate to "search_redirect.php?term=search_term", it would just redirect you to "/search/search_term". I want to avoid doing this, as it seems kind of redundant. If I don't find a better answer, that's probably what I'll end up doing. Now, here's what I tried so far:

I tried setting an onsubmit on the form like this:

<form onsubmit="search_navigate()" id="navbar_form">
    <input type="search" placeholder="Search Articles..." id="navbar_search"></input>
    <input id="navbar_submit" type="submit" value=">"/>
</form>

... which, onsubmit calls this function:

function search_navigate(){
    alert("well hey there");
    window.location = ("http://www.google.com");
}

When I click on the submit button, I can see the alert, but instead of taking me to Google as you'd expect, it takes me to the same page I'm on (whatever that page might be).

This is the problem I'm faced with when implementing it this way. If you have another way entirely, I'd still like to hear it.

Marcus · Accepted Answer · 2012-10-12T09:23:40.497

5

function search_navigate() {
    var obj = document.getElementById("navbar_search");
    var keyword = obj.value;
    var dst = "http://yoursite.com/search/" + keyword;
    window.location = dst;
}

may this work for you?

further more, to stop the form submit doing its origin function, append "return false" to the function call, that is, onsubmit="foo();return false".

edited Oct 12 '12 at 09:23

answered Jun 08 '12 at 02:49

Marcus

6,701
4
19
28

No I already tried that. The issue isn't building the URL, it's that the redirect from this particular function isn't working at all. – Jun 08 '12 at 02:51
well, i think it is the form submit lead to the situation, i think it can be fixed like this:
– Marcus Jun 08 '12 at 02:55
@Marcus That worked! Please put that in another answer (or work it into your answer) so I can accept it. – Jun 08 '12 at 02:58
@Hassan, i had update my answer, is that ok? i am new to stackoverflow :) – Marcus Jun 08 '12 at 03:02

score 2 · Answer 2 · answered Jun 08 '12 at 03:01

2

Usually when you encounter weird behaviour like this, it has something to do with the <form>. Try this:

<script type="text/javascript">
function search_navigate() {
    var obj = document.getElementById("navbar_search");
    var keyword = obj.value;
    var dst = "http://yoursite.com/search/" + keyword;
    window.location = dst;
}
</script>

<span id="navbar_form">
    <input type="search" placeholder="Search Articles..." id="navbar_search" />
    <input type="button" id="navbar_submit" value="Submit" onClick="search_navigate()" />
</span>

answered Jun 08 '12 at 03:01

Alex W

37,233
13
109
109

@Hooman Be careful. `window` is not plural. Also, there is a SO discussion about this and it basically comes down to preference. However, it seems in some cases `window.location` allows you to [bypass the same origin policy](http://stackoverflow.com/questions/2383401/javascript-setting-location-href-versus-location#comment-38068799), for setting the value only. – Alex W Apr 29 '15 at 15:16
Edited: For the sake of generalization it's more appropriate to use `window.location.href` as our base url, so it should be something like `var dst = window.location.href + "/" + keyword;` – Yar Apr 29 '15 at 18:33
@AlexW thanks Alex and sorry about the typo. I just edited that. – Yar Apr 29 '15 at 18:34

How can I get an HTML form's values into a "custom" URL?

2 Answers2

Linked