Append input text to action URI on form submission

[eSite]

Hello,

I'm trying to make a form that has just a visible text input field and no visible submit button.
What form should do is : when I type a keyword in the field and press Enter, it should send me to a new URI with the keyword appended to it.
For example if the keyword is foo I should be sent to http://example.com/foo/
I would like the code to be as compact as possible, using JS but without <script type="text/javascript"></script>

Notes :
- this is not for the main navigation
- I can't use server side programming in my case
- I tried to do it taking example on similar forms but I'm getting nowhere.

Thanks by advance.

[kaled]

Try this...

<input type="submit" onsubmit="beforeSubmit(this);return true;" style="height:0px">

function beforeSubmit(form){
form.action = "page.html?" + form.inputA.value;
}

Where "inputA" is the name of the text input box.

Kaled.

[eSite]

What a strange code...

I tried it :

<form>
<input type="text" name="inputA" value="" />
<input type="submit" onsubmit="beforeSubmit(this);return true;" style="height:0px" />
</form>
<script type="text/javascript">
function beforeSubmit(form){
form.action = "page.html?" + form.inputA.value;
}
</script>

But all it does it append?inputA=foo to the current URI

I should have said hidden submit button, I'm not looking for a trick here, it's just that I prefer to press Enter on the KB than click a button on the screen.
If no submit buton is needed at all to for the form to be valid XHTML then it's even beter.

Isn't there a way to move all the JS function in the form?

[kaled]

I was half asleep. I think this is what you want...

<input type="submit" onsubmit="beforeSubmit(this);return false;" style="width:0px" />

function beforeSubmit(form){
document.location.href = "http://www.example.com/" + form.inputA.value;
}

If I understand you correctly, I don't think there is any way to avoid javascript. Avoiding a submit button is probably possible but simply hiding it as suggested should be the simplest and most reliable method.

Kaled.

[daveVk]

<input type="text" name="inputA" value="" onchange="document.href='/'+this.value+'/'" />

Its a bit crude, this.value should be checked, and will fire on events other then enter.

[eSite]

kaled, it didn't work until I moved

onsubmit="beforeSubmit(this);return false;" 

in the form tag.

I don't mean avoiding JS, I mean combining

function beforeSubmit(form){
document.location.href = "http://www.example.com/" + form.inputA.value;
}

to the form so I can get rid of the script tags, is it possible?

[kaled]

Yes, it's the form's onsubmit event that must be assigned - my brain still isn't working properly!

I think you might be able to do this...

<form onsubmit="document.location.href=this.inputA.value; return false;">

Kaled.

[eSite]

hm but where did http://www.example.com/ go?

I tried
<form onsubmit="document.location.href='http://www.example.com/'this.inputA.value; return false;">
but it just append?inputA=foo to the current URI

[kaled]

<form onsubmit="document.location.href='http://www.example.com/' + this.inputA.value; return false;">

Brain just isn't working today!

Kaled.

[eSite]

Great! thanks!
Please have some rest :p