Enter as tab then submits form [Archive]

IxxI

03-13-2003, 07:50 AM

Is there an easy way of making it so when a user presses enter in a form (of 4 input boxes) it moves to the nest one (as if they were pressing tab) but with the last one it submits it. At the moment even if you have an onSubmit command in the <form> heading nothing happens when you press return...
Cheers,
IxxI

gil davis

03-13-2003, 08:19 AM

You might get some insight from this discussion:

http://forums.webdeveloper.com/showthread.php?s=&threadid=5307

The title is misleading, but it discusses the tab part of your request.

IxxI

03-13-2003, 09:31 AM

Thanks for the response - the link was verey useful. The problem I'm now having is that instead of a submit button I have a button that calls a javascript function which then generates some code based on the user input in the form and pastes it back in a textbox. How would I go about mdifying it so that if it "shouldsubmit" then it calls another function?
Thanks again,
IxxI

IxxI

03-13-2003, 09:54 AM

I think I've got round that but the problem I'm having now is that whatever key I press it moves onto the next box, whereas I just want it to move when I press enter.. any ideas why??
Thanks
IxxI

gil davis

03-13-2003, 10:12 AM

It's all in your code - post it, and someone is bound to be able to help.

IxxI

03-13-2003, 11:02 AM

Here it is:

<HTML>
<HEAD>
<TITLE> Search Code Generator </TITLE>

<style type="text/css">
.boxes{
padding: 10px;
}
</style>

<script>
nextfield = ""
var shouldSubmit = false;
function setNextField(val){
nextfield = val;
}
function keyUP(e) {
k = (document.all) ? window.event.keyCode : e.which ;
if ((k == 13 || k == 9) && nextfield=="done") { // enter key pressed
getcode();
return true;
} else{
var field = eval('document.form.' + nextfield)
if(document.all){
field.focus();
}else if(k==13) { // we're not done yet, send focus to next box
field.focus();
}
}
return false;
}

function validateSubmit(){
if(shouldSubmit){
return true;
}
return false;
}
if (!document.all) document.captureEvents(Event.KEYUP);
document.onkeydown = keyUP;

function getcode() {
var number=document.form.number.value;
var title=document.form.title.value;
var desc=document.form.desc.value;
var links=document.form.links.value;
var code=new String ('title['+number+']="'+title+'"');
var code1=new String ('desc['+number+']="'+desc+'"');
var code2=new String ('links['+number+']="'+links+'"');
var code3=new String ('matched['+number+']=0');
var product=(code + "\n" + code1 + "\n" + code2 + "\n" + code3);
/*document.getElementById("mainbox").innerHTML=code;*/
document.form.output.value=product;
document.form.number.value="";
document.form.title.value="";
document.form.desc.value="";
document.form.links.value="";
document.form.number.focus();
}
</script>

<BODY BGCOLOR="#000000" topmargin=0 leftmargin=0 TEXT="#0F0000" ALINK="#FF66FF" VLINK="#FFFFCC" LINK="#CCFFFF" topmargin=0 leftmargin=0>

<A NAME="top"></A>

<BR><BR><BR><BR>

<CENTER><FONT FACE="Arial, Helvetica, sans-serif" SIZE="+1" COLOR="#66CCFF"><B> Search Code Generator </B></FONT>

<BR><BR>

<font face ="arial, helvetica,sans-serif" color="white" size="-1">

<form name="form" onsubmit="return validateSubmit();">

<table width="75%" height="60" border="1">
<tr>
<td><div align="center"><font face ="arial, helvetica,sans-serif" color="white" size="-1">Number:</font></div></td>
<td><div align="center"><font face ="arial, helvetica,sans-serif" color="white" size="-1">Description:</font></div></td>
<td><div align="center"><font face ="arial, helvetica,sans-serif" color="white" size="-1">Keywords:</font></div></td>
<td><div align="center"><font face ="arial, helvetica,sans-serif" color="white" size="-1">URL:</font></div></td>
</tr>
<tr>
<td><div align="center">
<input name="number" type="text" id="number" onFocus="setNextField('desc');">
</div></td>
<td><div align="center">
<input name="desc" type="text" id="desc" onFocus="setNextField('title');">
</div></td>
<td><div align="center">
<input name="title" type="text" id="title" onFocus="setNextField('links');">
</div></td>
<td><div align="center">
<input name="links" type="text" id="links" onFocus="setNextField('done');">
</div></td>
</tr>
</table>

<br>
<input type="button" value="Generate Code" onclick="getcode()">

<BR><BR><BR>

<input type="button" value="Select All" OnClick="document.form.output.select()">
<br><br>

<textarea name="output" cols="50" rows="6">Code Generated here.</textarea>
</form>
</font>
</center>
</BODY>
</HTML>

and the problem I'm having is it doesn't let me type text in anyother box than the last one. Anyone know why? It's probably a misuse of Khalids code (in fact I know it is because I bodged a bit), but I don't really know why its doing what it does.
IxxI

gil davis

03-13-2003, 11:49 AM

Maybe Khalid will respond. Otherwise I have attached my answer to that other post, with the modification you requested (if last field, enter will submit).

IxxI

03-14-2003, 05:01 AM

Thanks Gil - it worked perfectly!!
IxxI