Map enter key to <button> element?

[Br3nn4n]

I'm putting together a site and I have a search page. Using mod_rewrite my URL to run a search looks like so:

http://www.example.com/search/this is your query

So, if I submit a form, using either get or post, I'd have to reveal my actual index.php?page=search....blah URL. Which, honestly, I just don't want to do :D

I came up with a great fix -- make a <button> element and do an onclick="window.location='/search/' + document.getElementById('search').value"; It works wonderfully...

...if I click the button.

But if I hit "enter" (the key) it submits the form to my ugly URL. Should I just remove the action= part of the form element? That will still allow it to submit though.

I want to be able to hit enter and have it trigger that button, but I can't think how.

Any ideas?

Thanks!

[whoisgregg]

Try an onsubmit on the <form> element. :)

Also, you could have your search page do a 301 redirect from the ugly URL to the rewritten URL.

[rocknbil]

First, do not use button. Button has no inherent action and requires Javascript or other scripting to perform actions. If JS is disabled, it won't work. Use submit, and return false from the onSubmit handler assigned to the form as whoisgregg suggests. Returning false will allow JS to manage the form submit, but if JS is disabled, it will still work. Example:

<form method="post" action="your_friendly_url" onSubmit="return yourScript(this);">
....
<input type="submit" value="Search">
</form>
....
function yourScript(form) {
var msg='';
// your validations, etc.
// populate msg on any errors
if (msg=='') { form submit(); }
else { alert(msg); }
return false;
}

Second, note that I've set the action to post, not get. Get is the default for a form, but ordinary query strings are also the get method.

It's using GET because your Javascript is setting window/document.location, which is a get query string. You'll have to change this approach as above, doing the form.submit() in Javascript. If you have no "validations" for the form, you don't even need Javascript; just eliminate the onSubmit altogether.

This will stop the ugly query string. If you use the method above (form.submit() instead of location) it will post the form via post method.

You'll have to change your PHP script to get data from $_POST instead of $_GET.

[Br3nn4n]

Alright guys, thanks for the help.

So you're suggesting that I set my form action to /search/? I have no validation (it's just a book search LOL, nothin super important), so I can leave the onsubmit handler alone I presume, don't even need it right?

I'll give this a shot right now :)

EDIT: Okay, that seems to work but my url stays at /search/

I kinda wanted it to show the query in the URL, like /search/harry potter

Any way of doing this? ;)

[rocknbil]

I kinda wanted it to show the query in the URL, like /search/harry potter

Okay, to do this, you're going to have to think it through somehow. You can still use Javascript to do window/document.location, but even if you do that you will need something on your server side to manage the URL properly. So I still think document.location is not necessary (and, if JS is disabled . . . yeah.)

How I'd do this is:

Set up your .htaccess to manage queries to ^.*/search/.*$ to your script.

On search, print a location header, redirect to /search/harry potter

In your script, now actually perform the search.

Be careful with this one, I see a potential for creating a recursive loop (.htaccess->script->back to .htaccess again) which will kill your server.