[Resolved] some cool javascript code

flientje

I found some cool javascript code on www.w3schools.com :p
This script automatically jumps to the next input field when the current field's maxlength has been reached.

<html>
<head>
<script type="text/javascript">
function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if (next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>
</head>

<body>
<p>This script automatically jumps to the next input field when the current field's maxlength has been reached.</p>
<form>
<input size="3" tabindex="1" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="2" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="toUnicode(this,this.value)">
</form>
</body>

</html>

now.. I would like to use this.. but I don't know how many fields I'll have.. so I tried to put a variable in tabindex like:
tabindex="<?echo $i?>"
aparantly somethings wrong because nothing happens.. it doesn't jump anymore.. 🙁
does someone have a clue why? 😕

tnx anyway

Flientje

mrhappiness

Is this the code from w3schools or the data your php script sends to your browser?

if it's not the later one please post your html

flientje

no that was the w3schools code..

the same scripts as w3schools..
...
<input size="2" tabindex="6" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj0" value="<?echo $datumtotj0?>">
...

for($i=1;$i<=$aantal;$i++){ $spring=(6*$i+1);?>

		<td>	<label>van:&nbsp;</label> 
			<input size="2" tabindex="<?echo $spring1 ?>" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumd<?echo $i?>" value="<?echo $_POST["datumd$i"];?>">
			<input size="2" tabindex="<?echo ($spring+1) ?>" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumm<?echo $i?>" value="<?echo $_POST["datumm$i"];?>">
			<input size="2" tabindex="<?echo ($spring+2) ?>" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumj<?echo $i?>" value="<?echo $_POST["datumj$i"];?>">
			<label>tot:&nbsp;&nbsp;</label>	
			<input size="2" tabindex="<?echo ($spring+3) ?>" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotd<?echo $i?>" value="<?echo $_POST["datumtotd[$i"];?>">
			<input size="2" tabindex="<?echo ($spring+4) ?>" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotm<?echo $i?>" value="<?echo $_POST["datumtotm[$i"];?>">
			<input size="2" tabindex="<?echo ($spring+5) ?>" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj<?echo $i?>" value="<?echo $_POST["datumtotj[$i"];?>">
		</td>

<?}?>

this is what i was trying..

mrhappiness

Originally posted by mrhappiness
please post your html

i really meant html and not "php producing your html"... 😉

flientje

:eek: ooh?? i'm sorry.. here's the html code..

<SCRIPT language="JavaScript">
function submitform()
{
document.form1.submit();
}

function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if (next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>

	<table>		
	  <tr><td>*&nbsp;Datum(dd mm jj):</td> 	

		<td>	<label>van:&nbsp;</label> 
			<input size="2" tabindex="1" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumd0" value="">
			<input size="2" tabindex="2" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumm0" value="">
			<input size="2" tabindex="3" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumj0" value="">
			<label>tot:&nbsp;&nbsp;</label>	
			<input size="2" tabindex="4" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotd0" value="">
			<input size="2" tabindex="5" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotm0" value="">
			<input size="2" tabindex="6" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj0" value="">

			<input type="hidden" name="aantal" value="2">
		</td>


		<td><A class="one" href="toevoegen.php?extra=extra&aantal=2&tijd=	">Extra&nbspdag</A></td>
		<td><A class="one" href="toevoegen.php?min=min&aantal=2">Verwijder&nbspdag</A></td>

		<td><input type="hidden" name="aantal" value="2"></td>

	  </tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Uur(hh mm):</td> 	
		<td>	<label>van:&nbsp;</label>	<input type="text" name="tijd0" 	value="" 	size="20">
			<label>tot:&nbsp;&nbsp;</label>	<input type="text" name="tijdtot0"	value="" 	size="20">
		</td>


	</tr>

		<tr>	<td>*&nbsp;Datum(dd mm jj):</td> 
		<td>	<label>van:&nbsp;</label> 
			<input size="2" tabindex="7" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumd1" value="">
			<input size="2" tabindex="8" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumm1" value="">
			<input size="2" tabindex="9" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumj1" value="">
			<label>tot:&nbsp;&nbsp;</label>	
			<input size="2" tabindex="10" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotd1" value="">
			<input size="2" tabindex="11" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotm1" value="">
			<input size="2" tabindex="12" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj1" value="">
		</td>


		</tr>

	  	<tr>	<td>&nbsp;&nbsp;&nbsp;Uur(hh:mm):</td> 	
		<td>	<label>van:&nbsp;</label>	<input type="text" name="tijd1" 	value="" 		size="20">
			<label>tot:&nbsp;&nbsp;</label>	<input type="text" name="tijdtot1"	value="" 		size="20">
		</td>



		</tr>

		<tr>	<td>*&nbsp;Datum(dd mm jj):</td> 
		<td>	<label>van:&nbsp;</label> 
			<input size="2" tabindex="13" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumd2" value="">
			<input size="2" tabindex="14" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumm2" value="">
			<input size="2" tabindex="15" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumj2" value="">
			<label>tot:&nbsp;&nbsp;</label>	
			<input size="2" tabindex="16" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotd2" value="">
			<input size="2" tabindex="17" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotm2" value="">
			<input size="2" tabindex="18" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj2" value="">
		</td>

...

Flientje

mrhappiness

i don't see no form-tag? 😕

flientje

I didn't think you'd need to see that..

<html><head>
<title> EVENEMENTEN</title>
<style type="text/css">
<!--
BODY {color: black; font-family:verdana; font-size:10 pt}
DIV#optie{visibility: hidden}
H1 {margin-top: 10; color:white; font-family:arial; font-size:12 pt}
H2 {margin-bottom: -10; color:black; font-family:verdana; font-size:18 pt}
A:link {color:#000080;border-style: text-decoration:none}
.roll {}
A.roll:hover {color:#008080;border-style:}
a:visited {color:#000080;border-style:}
a:active {color:#000080;border-style:}

a.one:link {padding-left: 20px; padding-right: 20px; padding-top: 2px; padding-bottom: 2px; color:black; font-family:verdana; font-size:10 pt; border: 2px; border-style: outset; background: buttonface; cursor:default; text-decoration:none}
a.one:hover {padding-left: 20px; padding-right: 20px; padding-top: 2px; padding-bottom: 2px; color:black; font-family:verdana; font-size:10 pt; border: 2px; border-style: outset; background: buttonface; cursor:default; text-decoration:none}
a.one:visited {padding-left: 20px; padding-right: 20px; padding-top: 2px; padding-bottom: 2px; color:black; font-family:verdana; font-size:10 pt; border: 2px; border-style: outset; background: buttonface; cursor:default; text-decoration:none}
a.one:active {padding-left: 20px; padding-right: 20px; padding-top: 2px; padding-bottom: 2px; color:black; font-family:verdana; font-size:10 pt; border: 2px; border-style: inset; background: buttonface; cursor:default; text-decoration:none}
-->
</style>

</head>
<body>

<SCRIPT language="JavaScript">
function submitform()
{
document.form1.submit();
}

function toUnicode(elmnt,content)
{
if (content.length==elmnt.maxLength)
{
next=elmnt.tabIndex
if (next<document.forms[0].elements.length)
{
document.forms[0].elements[next].focus()
}
}
}
</script>

<form action="toegevoegd.php" name="form1" method="POST" >
<table border=0 cellpadding=0 width=100%>
<tr>
<td bgcolor="f0f8ff" align=center valign=top width=17%>
  <table cellpadding=5 width=100%>
  <tr align=center>
    <td bgcolor="#000080">
    <h1>Nieuwe evenementen</h1>
    </td>
  </tr></table>
  <br>

  	<A href="index.php"><b>Home</b></A><BR>
	<BR><BR>
	<A href="keuzeoverzicht.php?type=2" class="roll"><B>Overzicht</B></A><BR>
  	<A href="toevoegen.php" class="roll"><B>Toevoegen</B></A><BR>
  	<A href="opzoeken.php?type=2" class="roll"><B>Wijzigen&nbsp;&&nbsp;Verwijderen</B></A><BR>
  	<A href="doel.php?type=2" class="roll"><B>Doel</B></A>
	  <BR><BR>
</td>
<td bgcolor=#ffffff align=left valign=top width=83%>
  <table width=100% cellpadding=15>
    <tr><td align=left valign=middle>
    <h2><font color="#000080">Toevoegen van een evenement </h2></font><BR></td></tr>
    <tr><td width=50% align=left>

	<table>		
	  <tr><td>*&nbsp;Datum(dd mm jj):</td> 	

		<td>	<label>van:&nbsp;</label> 
			<input size="2" tabindex="1" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumd0" value="">
			<input size="2" tabindex="2" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumm0" value="">
			<input size="2" tabindex="3" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumj0" value="">
			<label>tot:&nbsp;&nbsp;</label>	
			<input size="2" tabindex="4" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotd0" value="">
			<input size="2" tabindex="5" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotm0" value="">
			<input size="2" tabindex="6" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj0" value="">

			<input type="hidden" name="aantal" value="2">
		</td>


		<td><A class="one" href="toevoegen.php?extra=extra&aantal=2&tijd=	">Extra&nbspdag</A></td>
		<td><A class="one" href="toevoegen.php?min=min&aantal=2">Verwijder&nbspdag</A></td>

		<td><input type="hidden" name="aantal" value="2"></td>

	  </tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Uur(hh mm):</td> 	
		<td>	<label>van:&nbsp;</label>	<input type="text" name="tijd0" 	value="" 	size="20">
			<label>tot:&nbsp;&nbsp;</label>	<input type="text" name="tijdtot0"	value="" 	size="20">
		</td>


	</tr>

		<tr>	<td>*&nbsp;Datum(dd mm jj):</td> 
		<td>	<label>van:&nbsp;</label> 
			<input size="2" tabindex="7" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumd1" value="">
			<input size="2" tabindex="8" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumm1" value="">
			<input size="2" tabindex="9" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumj1" value="">
			<label>tot:&nbsp;&nbsp;</label>	
			<input size="2" tabindex="10" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotd1" value="">
			<input size="2" tabindex="11" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotm1" value="">
			<input size="2" tabindex="12" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj1" value="">
		</td>


		</tr>

	  	<tr>	<td>&nbsp;&nbsp;&nbsp;Uur(hh:mm):</td> 	
		<td>	<label>van:&nbsp;</label>	<input type="text" name="tijd1" 	value="" 		size="20">
			<label>tot:&nbsp;&nbsp;</label>	<input type="text" name="tijdtot1"	value="" 		size="20">
		</td>



		</tr>

		<tr>	<td>*&nbsp;Datum(dd mm jj):</td> 
		<td>	<label>van:&nbsp;</label> 
			<input size="2" tabindex="13" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumd2" value="">
			<input size="2" tabindex="14" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumm2" value="">
			<input size="2" tabindex="15" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumj2" value="">
			<label>tot:&nbsp;&nbsp;</label>	
			<input size="2" tabindex="16" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotd2" value="">
			<input size="2" tabindex="17" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotm2" value="">
			<input size="2" tabindex="18" maxlength="2" onkeyup="toUnicode(this,this.value)" name="datumtotj2" value="">
		</td>


		</tr>

	  	<tr>	<td>&nbsp;&nbsp;&nbsp;Uur(hh:mm):</td> 	
		<td>	<label>van:&nbsp;</label>	<input type="text" name="tijd2" 	value="" 		size="20">
			<label>tot:&nbsp;&nbsp;</label>	<input type="text" name="tijdtot2"	value="" 		size="20">
		</td>



		</tr>

	  <tr><td>*&nbsp;Naam evenement:</td>		<td><input type="text" name="naam" 		value=""		size="61"></td></tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Uitvoerder:</td> 	<td><input type="text" name="uitvoerder" 	value=""	size="61"></td></tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Organisator:</td> 	<td><input type="text" name="organisator" 	value=""	size="61"></td></tr>
	  <tr><td>*&nbsp;Naam locatie:</td>		<td><input type="text" name="locatie" 		value=""	size="61"></td></tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Straat + nr:</td>	<td><input type="text" name="adres" 		value=""		size="61"></td></tr>
	  <tr><td>*&nbsp;Gemeente:</td>			<td><select name="gemeente" >
		<option value="">-------------------------------------------------------------------------------------------

			<option value="Aarschot" 	>Aarschot				<option value="Begijnendijk" 	>Begijnendijk				<option value="Bekkevoort" 	>Bekkevoort			</select></td>
	  </tr>

	  <tr><td>&nbsp;&nbsp;&nbsp;Prijs:</td>		<td><input type="text" name="prijs" 		value=""		size="61"></td></tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Telefoon:</td>	<td><input type="text" name="telefoon" 		value=""	size="61"></td></tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Email:</td>		<td><input type="text" name="email" 		value=""		size="61"></td></tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Website:</td>	<td><input type="text" name="website" 		value=""	size="61"></td></tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Bron:</td>		<td><input type="text" name="bron" 		value="intern" size="61"></td></tr>

	  <tr><td>*&nbsp;Categorie:</td>		<td><select name="categorie">
		<option value="">-------------------------------------------------------------------------------------------

			<option value="Beurzen en Markten" 	>Beurzen en Markten				<option value="Film" 	>Film				<option value="Hobby en Spel" 	>Hobby en Spel				<option value="Jongeren en Fuiven" 	>Jongeren en Fuiven				<option value="Lezingen en Cursussen" 	>Lezingen en Cursussen				<option value="Literatuur en Voordracht" 	>Literatuur en Voordracht				<option value="Muziek" 	>Muziek				<option value="Natuur en Wandelingen" 	>Natuur en Wandelingen				<option value="Podiumkunsten" 	>Podiumkunsten				<option value="Senioren" 	>Senioren				<option value="Sport" 	>Sport				<option value="Tentoonstellingen" 	>Tentoonstellingen				<option value="Varia" 	>Varia				<option value="(Eet-)Feesten" 	>(Eet-)Feesten			</select></td>
	  </tr>
	  <tr><td>&nbsp;&nbsp;&nbsp;Omschrijving:</td>		<td><textarea name="omschrijving" cols=46 rows=10></textarea></td>
	  </tr>

	  <tr><td><input type="submit" name="toevoegen" value="Element Toevoegen" size=27></td></tr>


	  <tr></tr><tr></tr>
	  <tr><td><p>* verplichte velden</p></td></tr>
	</table><BR>
    </td></tr>
  </table>
</td></tr></table>

grz Flientje

mrhappiness

well, it'works but...

you have some hidden input fields which of course can't receive the focus

and you did not giv all your input fields a tabindex so it jumps from field datumd1 with tabindex 7 to field tijdtot0 which is the 7th element (remember 0 is the number for the first element)

why not using an id like "field1" to "field12" and doing docuemnt.getElementById("field"+somenumber).focus(); ?

flientje

well the problem is that I don't know from the beginning how many fields there are going to be..

It's like this: it's a form for activities.. and such an activity can take place on several days. So there's a link in the form to add days.

Now.. I'd like just the inputfields of the dates to jump.. just jump from day to month to year.. this way they don't have to put '-' or '/' between the dates..

I just started coding PHP a month ago and I didn't learn javascript yet (although it's on my priority-list) so I just stumbled upon this code.. and it seemed to work fine untill I added an extra date.

grz Flientje

mrhappiness

try

id="jump<?echo $spring1 ?>"

and as javascript use

function toUnicode(elmnt,content) {
	if (content.length == elmnt.maxLength) {
		//calc new id
		next = "jump" + (Math.max(elmnt.id.replace(/jump/, ""), 0) + 1);
		if (document.getElementById(next))
		//only jump if the target element exists
			document.getElementById(next).focus();
	}
}

flientje

THANK YOU!!!!!

It works perfect!!!! 🙂

mrhappiness

I live to please 🙂

p.s. don't forget to remark this thread as resolved

flientje

I will

Thanks again, i really appreciate it!! I was struggling with this for days..

grz Flientje