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.]

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;'>

 

[SAM]

Evertjan. a écrit :

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



var ready = false;
....
<function onsubmit='if (!ready) OneOfYourFunctions(); return ready;'

Probably :

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

 

[Evertjan.]

SAM wrote on 23 jun 2008 in comp.lang.javascript:

Evertjan. a écrit :


Probably :

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

So true !!!!!

 

[Thomas 'PointedEars' Lahn]

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