2

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.

Improve this question

2 Answers 2

Reset to default
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".

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

4 Comments

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.
well, i think it is the form submit lead to the situation, i think it can be fixed like this: <form onsubmit="foo();return false" ...>
@Marcus That worked! Please put that in another answer (or work it into your answer) so I can accept it.
@Hassan, i had update my answer, is that ok? i am new to stackoverflow :)
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>
Improve this answer

3 Comments

@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, for setting the value only.
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;
@AlexW thanks Alex and sorry about the typo. I just edited that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.