Behavior of Enter key in an "ajaxified" input field

68 views
Skip to first unread message

Vincent Borghi

unread,
May 27, 2009, 5:03:10 AM5/27/09
to web...@googlegroups.com
Hello,

In the following form (essentially taken from web2py examples),
the "Enter" key does not work as expected, I am obliged
to click on the submit button.

=== test1/views/default/searchform.html ===
{{extend 'layout.html'}}
<p>Type something and press the button.</p>
<form>
<INPUT type="text" id='q' value=""/>
<INPUT type="button" value="submit"
onclick="ajax('{{=URL(r=request,f='search')}}',['q'],'target');"/>
</form>
<br/>
<div id="target"></div>

=== test1/controllers/default.py ===
#[...]
def searchform():
return dict()
#
def search():
chars = ""
if request.vars.q:
chars = request.vars.q # (to do: sanitize chars)
rows = db(db.contact.site_code.like('%'+chars+'%')|db.contact.customer_rsa.like('%'+chars+'%')).select()
return SQLTABLE(rows, truncate=48)

==========================

In my http://127.0.0.1:8000/test1/default/searchform page,
once the input field is filled with something, then:
- if I press enter, my browser (Firefox 3) apparently does
a GET of the same current URL ("searchform"), without passing parameters.
This is not what i expect.
- if I click on the submit button, i obtain the expected behavior,
i.e. the browser does a "POST /test1/default/search" passing
appropriately the "q=xxx" param.

How to obtain the same behavior whether the user hits Enter or he
clicks Submit?

Thanks

mdipierro

unread,
May 27, 2009, 7:19:51 AM5/27/09
to web2py Web Framework
Try

<form onSubmit="ajax('{{=URL(r=request,f='search')}}',
['q'],'target');">
<INPUT type="text" id='q' value=""/>
<INPUT type="submit" value="submit" />
</form>

Vincent Borghi

unread,
May 27, 2009, 7:46:15 AM5/27/09
to web...@googlegroups.com
On Wed, May 27, 2009 at 1:19 PM, mdipierro <mdip...@cs.depaul.edu> wrote:
>
> Try
>
> <form onSubmit="ajax('{{=URL(r=request,f='search')}}',
> ['q'],'target');">
> <INPUT type="text" id='q' value=""/>
> <INPUT type="submit" value="submit" />
> </form>

Thanks for the prompt suggestion, but it does not work.
With this code, both Enter key and submit button have the same bad
behavior: they just run a GET of the same current URL ("searchform"),
without passing parameters...

Other idea?

Horst Herb

unread,
May 27, 2009, 8:19:03 AM5/27/09
to web...@googlegroups.com
On Wed, May 27, 2009 at 9:46 PM, Vincent Borghi
<vincent....@gmail.com> wrote:
> Thanks for the prompt suggestion, but it does not work.
> With this code, both Enter key and submit button have the same bad
> behavior: they just run a GET of the same current URL ("searchform"),
> without passing parameters...
>
> Other idea?

Had the same problem, this worked for me:
<form id="testform" onsubmit="return false">
Search for: <INPUT type="text" id='searchfor' value="" onchange="ajax('.....

That way, the form does not submit when enter is pressed, but onchange
triggers the ajax function and you get what you want

Horst

Vincent Borghi

unread,
May 27, 2009, 8:42:55 AM5/27/09
to web...@googlegroups.com
Thanks, the workaround you suggest works!
Reply all
Reply to author
Forward
0 new messages