By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,452 Members | 989 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,452 IT Pros & Developers. It's quick & easy.

Run function from form text input on Enter

P: n/a
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
Jun 27 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Andrew Poulos wrote on 23 jun 2008 in comp.lang.javascript:
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) OneOfYourFunctions(); 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)
Jun 27 '08 #2

P: n/a
SAM
Evertjan. a écrit :
Andrew Poulos wrote on 23 jun 2008 in comp.lang.javascript:
>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) OneOfYourFunctions(); return ready;'

Probably :

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

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

--
sm
Jun 27 '08 #3

P: n/a
SAM wrote on 23 jun 2008 in comp.lang.javascript:
Evertjan. a écrit :
>Andrew Poulos wrote on 23 jun 2008 in comp.lang.javascript:
>>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) OneOfYourFunctions(); return ready;'


Probably :

<form onsubmit='if (!ready) OneOfYourFunctions(); 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)
Jun 27 '08 #4

P: n/a
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.callee;
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.event = event"
onsubmit="return submitCheck(this)">
...
<input type="..." name="foo" ...>
...
<input type="submit" ... onclick="delete submitCheck.event">
...
</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
Jun 27 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.