# mit Return auf das andere Input-Feld springen



## bergamo (9. Dezember 2003)

Hallo,

möchte bei einem Formular mit Return auf das nächste Eingabefeld springen und nicht das Formular senden.

Wie kann man das mir JS realisieren?

Danke im voraus.

Gruss


----------



## Andreas Gaisbauer (9. Dezember 2003)

Wow... so eine kleine Frage, hat mir jetzt doch ziemlich Kopfzerbrechen bereitet. Gleich vorweg - es geht - es ist nur die Frage ob es nicht auch einfacher geht. Mein Skript ist jetzt doch ziemlich umfangreich geworden...


```
<html>
<head>
    <script type="text/javascript">
      
      var bSubmitted = false;
      
      function check(){
        if(bSubmitted){
          return true;
        }else{
          return false;
        }
      }
      
      
      function getKeyCode(evt){
        if(navigator.appName == "Netscape"){
          var iKeyCode = evt.which;
          return iKeyCode;
        }else if(navigator.appName == "Microsoft Internet Explorer"){
          var iKeyCode = window.event.keyCode;
          return iKeyCode;
        }else{
          return false;
        }
      }
      
      
      function getNextElement(oElement){
        var iElements = oElement.form.length;
        for(x=0;x<iElements;x++){
          if(oElement.form.elements[x].name == oElement.name){
            break;
          }
        }
        return ++x;
      }
      
      
      function next(oElement, evt){
        var iKeyCode = getKeyCode(evt);
        if(iKeyCode==13){
          var iNext = getNextElement(oElement);
          var oForm = oElement.form;
          oForm.elements[iNext].focus();
          if(iNext==oForm.length-1){
            bSubmitted = true;
            return true;
          }else{
            return false;
          }
        }
      }
    </script>
</head>
<body>
<form name="test" onsubmit="return check()">
    <input type="text" name="one" onkeydown="return next(this, event)"><br>
    <input type="text" name="two" onkeydown="return next(this, event)"><br>
    <input type="text" name="three" onkeydown="return next(this, event)"><br>
    <input type="text" name="four" onkeydown="return next(this, event)"><br>
    <input type="text" name="five" onkeydown="return next(this, event)"><br>
    <input type="submit">
</form>
</body>
</html>
```
Manche Sachen gehen nicht - das liegt aber an Javascript allgemein, da einige Elemente keine "Onkeydown" Events verarbeiten können...

Hoffe du kannst damit was anfangen.

ciao


----------



## Fabian H (9. Dezember 2003)

Ich hab mich auch mal rangesetzt, und rausgekommen ist das hier:

```
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
		<title>Weiter mit Return</title>

		<script type="text/javascript">
		var sActive, bSubmit = false;

		function goOn( a_sFormName )
		{
			if (sActive != "submit") {
	            iNewId = getNextElement( a_sFormName, sActive );
	            if (iNewId != false) {
	                window.document[a_sFormName].elements[iNewId].focus();
	                return false;
	            } else {
	                alert("Am letzen Feld angekommen");
	                return true;
	            }
			} else {
				alert("Submit-Button gedrückt. Formular wird abgeschickt");
			}
		}

		function sendForm( a_sFormName )
		{
			window.document[a_sFormName].submit();
        	return false;
		}

        function getNextElement( a_sFormName, a_sElementName )
		{
        	var iElements = window.document[a_sFormName].elements.length;
        	for(i=0; i<iElements; i++) {
				if ( (window.document[a_sFormName].elements[i].name == a_sElementName) &&
				     (window.document[a_sFormName].elements[i].type == "text" )) {
					if ( (i < (iElements - 1)) &&
					     (window.document[a_sFormName].elements[i+1].type == "text")) {
	                    return i + 1;
					}
				}
        	}
        	return false;
      	}

		function markInputs()
		{
        	aInputs = window.document.getElementsByTagName("input");
			for (i=0; i<aInputs.length; i++) {
				if (aInputs[i].type == "text") {
					window.document.getElementsByTagName("input")[i].onfocus
					  = new Function("sActive=this.name;");
				} else if (aInputs[i].type == "submit") {
					window.document.getElementsByTagName("input")[i].onfocus
					  = new Function("sActive='submit';");
				}
			}
		}
		</script>
	</head>
	<body onLoad="markInputs();">
		<h2>Markiere das erste Feld und drücke Enter um weiter zu kommen</h2>
		<form name="oForm" action="datei.php" onSubmit="return goOn(this.name);">
			<input type="text" name="oIrgendwas" style="width:150px;">
			<br>
			<input type="text" name="oHund" style="width:150px;">
			<br>
			<input type="text" name="oKatze" style="width:150px;">
			<br>
			<input type="text" name="oFisch" style="width:150px;">
			<br>
			<br>
			<input type="submit" value=" Abschicken ">
		</form>
	</body>
</html>
```
Was dir besser gefällt, musst du entscheiden.


----------



## bergamo (11. Dezember 2003)

*mit Enter auf nächste Feld springen*

danke für die Hilfe,

habe den ersten Vorschlag benutzt.


----------



## djm03 (2. Oktober 2004)

Hallo,

kam man den Code von Andreas so anpassen, das nur bestimmte Felder angesprungen bzw. bestimmte übersprungen werden? Also alle Felder die z.Bsp. mit "a" beginnen. So könnte man zwischen Pflichtfeldern und Optionalen trennen.

Danke, Mario


----------

