Run function from form text input on Enter

[Andrew Poulos]

I have a form that looks something like the following:

<form">
<div id="pg0">
<!-- more HTML here -->
<input type="text" name="f0_0" >
</div>

<div id="pg1" style="display: none;">
<!-- more HTML here -->
</div>

<div id="pg2" style="display: none;">
<!-- more HTML here -->
<input type="submit" name="finish" value="Finish">
</div>
</form>

The form has 3 pages. You fill in details on each page and click a
'continue' button to go to (reveal) the next page. It all works fine
except that when focus is in the text input "f0_0" and the user presses
the Enter key I want to update the information on the current page.

Currently its causing the form to be submitted.

How can I override this behaviour so that the Enter key does not submit
the form when the text input has focus but instead runs one of my functions?

Andrew Poulos

[Evertjan.]

Re: Run function from form text input on Enter

Andrew Poulos wrote on 23 jun 2008 in comp.lang.javas cript:

I have a form that looks something like the following:
>
<form">
<div id="pg0">
<!-- more HTML here -->
<input type="text" name="f0_0" >
</div>
>
<div id="pg1" style="display: none;">
<!-- more HTML here -->
</div>
>
<div id="pg2" style="display: none;">
<!-- more HTML here -->
<input type="submit" name="finish" value="Finish">
</div>
</form>
>
The form has 3 pages. You fill in details on each page and click a
'continue' button to go to (reveal) the next page. It all works fine
except that when focus is in the text input "f0_0" and the user
presses the Enter key I want to update the information on the current
page.
>
Currently its causing the form to be submitted.
>
How can I override this behaviour so that the Enter key does not
submit the form when the text input has focus but instead runs one of
my functions?
>
Andrew Poulos

var ready = false;
.....
<function onsubmit='if (!ready) OneOfYourFuncti ons(); return ready;'
............
<input type="submit" name="finish" value="Finish"
onclick='ready= true;'>








--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[SAM]

Re: Run function from form text input on Enter

Evertjan. a écrit :

Andrew Poulos wrote on 23 jun 2008 in comp.lang.javas cript:
>

>I have a form that looks something like the following:
>>
><form">
> <div id="pg0">
> <!-- more HTML here -->
> <input type="text" name="f0_0" >
> </div>
>>
> <div id="pg1" style="display: none;">
> <!-- more HTML here -->
> </div>
>>
> <div id="pg2" style="display: none;">
> <!-- more HTML here -->
> <input type="submit" name="finish" value="Finish">
> </div>
></form>
>>
>The form has 3 pages. You fill in details on each page and click a
>'continue' button to go to (reveal) the next page. It all works fine
>except that when focus is in the text input "f0_0" and the user
>presses the Enter key I want to update the information on the current
>page.
>>
>Currently its causing the form to be submitted.
>>
>How can I override this behaviour so that the Enter key does not
>submit the form when the text input has focus but instead runs one of
>my functions?
>>
>Andrew Poulos

>
>
var ready = false;
....
<function onsubmit='if (!ready) OneOfYourFuncti ons(); return ready;'

Probably :

<form onsubmit='if (!ready) OneOfYourFuncti ons(); return ready;'

...........
<input type="submit" name="finish" value="Finish"
onclick='ready= true;'>

--
sm

[Evertjan.]

Re: Run function from form text input on Enter

SAM wrote on 23 jun 2008 in comp.lang.javas cript:

Evertjan. a écrit :

>Andrew Poulos wrote on 23 jun 2008 in comp.lang.javas cript:
>>

>>I have a form that looks something like the following:
>>>
>><form">
>> <div id="pg0">
>> <!-- more HTML here -->
>> <input type="text" name="f0_0" >
>> </div>
>>>
>> <div id="pg1" style="display: none;">
>> <!-- more HTML here -->
>> </div>
>>>
>> <div id="pg2" style="display: none;">
>> <!-- more HTML here -->
>> <input type="submit" name="finish" value="Finish">
>> </div>
>></form>
>>>
>>The form has 3 pages. You fill in details on each page and click a
>>'continue' button to go to (reveal) the next page. It all works fine
>>except that when focus is in the text input "f0_0" and the user
>>presses the Enter key I want to update the information on the current
>>page.
>>>
>>Currently its causing the form to be submitted.
>>>
>>How can I override this behaviour so that the Enter key does not
>>submit the form when the text input has focus but instead runs one of
>>my functions?
>>>
>>Andrew Poulos

>>
>>
>var ready = false;
>....
><function onsubmit='if (!ready) OneOfYourFuncti ons(); return ready;'

>
>
Probably :
>
<form onsubmit='if (!ready) OneOfYourFuncti ons(); return ready;'

So true !!!!!

>...........
><input type="submit" name="finish" value="Finish"
>onclick='ready =true;'>

>
>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Thomas 'PointedEars' Lahn]

Re: Run function from form text input on Enter

Andrew Poulos wrote:

I have a form that looks something like the following:
>
<form">
<div id="pg0">
<!-- more HTML here -->
<input type="text" name="f0_0" >
</div>
>
<div id="pg1" style="display: none;">
<!-- more HTML here -->
</div>
>
<div id="pg2" style="display: none;">
<!-- more HTML here -->
<input type="submit" name="finish" value="Finish">
</div>
</form>
>
The form has 3 pages. You fill in details on each page and click a
'continue' button to go to (reveal) the next page. It all works fine
except that when focus is in the text input "f0_0" and the user presses
the Enter key I want to update the information on the current page.
>
Currently its causing the form to be submitted.
>
How can I override this behaviour so that the Enter key does not submit
the form when the text input has focus but instead runs one of my functions?

Start with Valid HTML. Then try this quickhack:

<script type="text/javascript">
function submitCheck(f)
{
var me = arguments.calle e;
if (typeof me.event != "undefined" )
{
var e = me.event;
var t = e.target || e.srcElement;
if (t && typeof t.name != "undefined"
&& /(^|\s)foo(\s|$)/i.test(t.name))
{
return false;
}
}

return true;
}
</script>

<form action="..."
onkeydown="if (typeof event != 'undefined') submitCheck.eve nt = event"
onsubmit="retur n submitCheck(thi s)">
...
<input type="..." name="foo" ...>
...
<input type="submit" ... onclick="delete submitCheck.eve nt">
...
</form>

I think I have posted a similar solution before here.


PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee