W
wolfgang wagner
Hi all!
i have a big porblem with my dynamic HTML code. I got a webform in which
HTML code (table with input fields) should be added by clicking a button.
This runs good so far. But this dynamically added code schould call a
JavaScript function when focus is lost.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
..style1 {
color: #FF0000;
font-style: italic;
}
-->
</style>
<script src="datumsformat.js"></script>
<script type="text/javascript" language="JavaScript1.2">
<!--
var anzahlReisen = 1;
//mitfahrer hinzufuegen
function addReise()
{
anzahlReisen += 1;
//set tableObject and attributes
[snip]
//=================================================================
//inputelemente
//=================================================================
trReiseInput = document.createElement("TR");
tbodyObj.appendChild(trReiseInput);
//reiseantrittdatum td
tdReiseantrittInput = document.createElement("TD");
tdReiseantrittInput.className = "tbln";
tdReiseantrittInput.setAttribute("width", "22%");
trReiseInput.appendChild(tdReiseantrittInput);
tdReiseantrittInput.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="ra_datum_' + anzahlReisen + '" size="10" onBlur="checkDate(this)">');
//reiseantrittuhrzeit
tdUhrzeit = document.createElement("TD");
tdUhrzeit.className = "tbln";
tdUhrzeit.setAttribute("width", "22%");
trReiseInput.appendChild(tdUhrzeit);
tdUhrzeit.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="ra_zeit_' + anzahlReisen + '" size="10" onBlur="checkTime(this)">');
//reiseendedatum
tdReiseendeDatum = document.createElement("TD");
tdReiseendeDatum.className = "tbln";
tdReiseendeDatum.setAttribute("width", "22%");
trReiseInput.appendChild(tdReiseendeDatum);
tdReiseendeDatum.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="re_datum_' + anzahlReisen + '" size="10" onBlur="checkDate(this)">');
//reiseendeuhrzeit
tdUhrzeitEnde = document.createElement("TD");
tdUhrzeitEnde.className = "tbln";
tdUhrzeitEnde.setAttribute("width", "22%");
trReiseInput.appendChild(tdUhrzeitEnde);
tdUhrzeitEnde.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="re_zeit_' + anzahlReisen + '" size="10" onBlur="checkTime(this)">');
//uebernachtung
tdUebernachtungCheck = document.createElement("TD");
tdUebernachtungCheck.className = "tbln";
tdUebernachtungCheck.setAttribute("width", "18%");
trReiseInput.appendChild(tdUebernachtungCheck);
//verdrehen der uebertragenen werte, weil frage nach uebernachtung = nein
==> taegliche rueckkehr = ja
tdUebernachtungCheck.insertAdjacentHTML("BeforeEnd", '<input type="radio"
name="taegl_rueckkehr_' + anzahlReisen + '" value="nein"> ja');
tdUebernachtungCheck.insertAdjacentHTML("BeforeEnd", '<input type="radio"
name="taegl_rueckkehr_' + anzahlReisen + '" checked value="ja"> nein');
//====================================================================
// ende inputelemente
//====================================================================
reiseadd.appendChild(tableObj);
}
function checkDate(toCheck)
{
alert("date: "+ toCheck.value);
if (!ValidateDate(toCheck.value))
{
alert('Bitte geben Sie ein gültiges Datum im Format TT.MM.JJJJ oder
TT.MM.JJ ein!');
toCheck.focus();
return false;
}
return true;
}
function checkTime(toCheck)
{
alert("time: "+ toCheck.value);
if (!ValidateTime(toCheck.value))
{
alert('Bitte geben Sie eine gültige Uhrzeit im Format SS.MM oder SS:MM
oder SS,MM ein!');
toCheck.focus();
return false;
}
}
function getAnzahlReisen()
{
return anzahlReisen;
}
function doSubmit()
{
document.getElementsByName("anzahl_reisen")[0].value=window.anzahlReisen;
if (checkValues(window.formular)) formular.submit();
}
//-->
</script>
</head>
<body>
<table align="center" border="0" cellpadding="2" cellspacing="1"
width="90%">
<tr>
<td class="tblb" width="100%" bgcolor="#c0c0c0" colspan="5"><font
size="3">1.
Reise</font></td>
</tr>
<tr>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Reiseantrittdatum<br>
(z.B. 01.01.2003)</td>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Uhrzeit<br>
(z.B. 08.00)</td>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Reiseendedatum<br>
(z.B. 01.01.2003)</td>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Uhrzeit<br>
(z.B. 15.00)</td>
<td class="tblb" width="18%" bgcolor="#c0c0c0">Übernachtung</td>
</tr>
<tr>
<td class="tbln" width="22%"><input type="text" name="ra_datum_1"
size="10" onBlur="document.getElementsByName('re_datum_1')[0].value =
document.getElementsByName('ra_datum_1')[0].value"></td>
<td class="tbln" width="22%"><input type="text" name="ra_zeit_1"
size="10" onBlur="checkTime(this)"></td>
<td class="tbln" width="22%"><input type="text" name="re_datum_1"
size="10" onBlur="checkDate(this)"></td>
<td class="tbln" width="22%"><input type="text" name="re_zeit_1"
size="10" onBlur="checkTime(this)"></td>
<td class="tbln" width="18%"><input type="radio" value="ja"
name="taegl_rueckkehr_1">
ja
<input type="radio" name="taegl_rueckkehr_1" checked value="nein">
nein</td>
</tr>
<tr>
<td class="tblb" height="20"></td>
</tr>
</table>
<div id="reiseadd"></div>
<table align="center" border="0" cellpadding="2" cellspacing="1"
width="90%">
<tr>
<td class="tbln" width="90%" height="25" colspan ="6">
<p align="right">
<INPUT TYPE="hidden" name="anzahl_reisen">
<INPUT NAME="doAction" TYPE="hidden" VALUE="reisen">
<!-- hinzufuegen einer weiteren reise --->
<INPUT TYPE="button" value="weitere Reisen abrechnen"
onClick="addReise()" name=""> <input name="gogogo" type="button"
value="weiter" onClick="doSubmit()">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
I dont know why but when focus is lost in one of the dynamically added
fields, the checkTime() and the checkDate() functions are called. this
results in hanging up the browser. My debugging tells me, that if i'm in a
datefield and klick into a timefield, the checkDate() is called, the the
checkTime() with the value of the timefield. My mechanism works well in the
statical fields, but not the dynamically added ones...
I hope someone could help.
thx in advance
wolfgang wagner
i have a big porblem with my dynamic HTML code. I got a webform in which
HTML code (table with input fields) should be added by clicking a button.
This runs good so far. But this dynamically added code schould call a
JavaScript function when focus is lost.
Here is my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
..style1 {
color: #FF0000;
font-style: italic;
}
-->
</style>
<script src="datumsformat.js"></script>
<script type="text/javascript" language="JavaScript1.2">
<!--
var anzahlReisen = 1;
//mitfahrer hinzufuegen
function addReise()
{
anzahlReisen += 1;
//set tableObject and attributes
[snip]
//=================================================================
//inputelemente
//=================================================================
trReiseInput = document.createElement("TR");
tbodyObj.appendChild(trReiseInput);
//reiseantrittdatum td
tdReiseantrittInput = document.createElement("TD");
tdReiseantrittInput.className = "tbln";
tdReiseantrittInput.setAttribute("width", "22%");
trReiseInput.appendChild(tdReiseantrittInput);
tdReiseantrittInput.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="ra_datum_' + anzahlReisen + '" size="10" onBlur="checkDate(this)">');
//reiseantrittuhrzeit
tdUhrzeit = document.createElement("TD");
tdUhrzeit.className = "tbln";
tdUhrzeit.setAttribute("width", "22%");
trReiseInput.appendChild(tdUhrzeit);
tdUhrzeit.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="ra_zeit_' + anzahlReisen + '" size="10" onBlur="checkTime(this)">');
//reiseendedatum
tdReiseendeDatum = document.createElement("TD");
tdReiseendeDatum.className = "tbln";
tdReiseendeDatum.setAttribute("width", "22%");
trReiseInput.appendChild(tdReiseendeDatum);
tdReiseendeDatum.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="re_datum_' + anzahlReisen + '" size="10" onBlur="checkDate(this)">');
//reiseendeuhrzeit
tdUhrzeitEnde = document.createElement("TD");
tdUhrzeitEnde.className = "tbln";
tdUhrzeitEnde.setAttribute("width", "22%");
trReiseInput.appendChild(tdUhrzeitEnde);
tdUhrzeitEnde.insertAdjacentHTML("BeforeEnd", '<input type="text"
name="re_zeit_' + anzahlReisen + '" size="10" onBlur="checkTime(this)">');
//uebernachtung
tdUebernachtungCheck = document.createElement("TD");
tdUebernachtungCheck.className = "tbln";
tdUebernachtungCheck.setAttribute("width", "18%");
trReiseInput.appendChild(tdUebernachtungCheck);
//verdrehen der uebertragenen werte, weil frage nach uebernachtung = nein
==> taegliche rueckkehr = ja
tdUebernachtungCheck.insertAdjacentHTML("BeforeEnd", '<input type="radio"
name="taegl_rueckkehr_' + anzahlReisen + '" value="nein"> ja');
tdUebernachtungCheck.insertAdjacentHTML("BeforeEnd", '<input type="radio"
name="taegl_rueckkehr_' + anzahlReisen + '" checked value="ja"> nein');
//====================================================================
// ende inputelemente
//====================================================================
reiseadd.appendChild(tableObj);
}
function checkDate(toCheck)
{
alert("date: "+ toCheck.value);
if (!ValidateDate(toCheck.value))
{
alert('Bitte geben Sie ein gültiges Datum im Format TT.MM.JJJJ oder
TT.MM.JJ ein!');
toCheck.focus();
return false;
}
return true;
}
function checkTime(toCheck)
{
alert("time: "+ toCheck.value);
if (!ValidateTime(toCheck.value))
{
alert('Bitte geben Sie eine gültige Uhrzeit im Format SS.MM oder SS:MM
oder SS,MM ein!');
toCheck.focus();
return false;
}
}
function getAnzahlReisen()
{
return anzahlReisen;
}
function doSubmit()
{
document.getElementsByName("anzahl_reisen")[0].value=window.anzahlReisen;
if (checkValues(window.formular)) formular.submit();
}
//-->
</script>
</head>
<body>
<table align="center" border="0" cellpadding="2" cellspacing="1"
width="90%">
<tr>
<td class="tblb" width="100%" bgcolor="#c0c0c0" colspan="5"><font
size="3">1.
Reise</font></td>
</tr>
<tr>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Reiseantrittdatum<br>
(z.B. 01.01.2003)</td>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Uhrzeit<br>
(z.B. 08.00)</td>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Reiseendedatum<br>
(z.B. 01.01.2003)</td>
<td class="tblb" width="22%" bgcolor="#c0c0c0">Uhrzeit<br>
(z.B. 15.00)</td>
<td class="tblb" width="18%" bgcolor="#c0c0c0">Übernachtung</td>
</tr>
<tr>
<td class="tbln" width="22%"><input type="text" name="ra_datum_1"
size="10" onBlur="document.getElementsByName('re_datum_1')[0].value =
document.getElementsByName('ra_datum_1')[0].value"></td>
<td class="tbln" width="22%"><input type="text" name="ra_zeit_1"
size="10" onBlur="checkTime(this)"></td>
<td class="tbln" width="22%"><input type="text" name="re_datum_1"
size="10" onBlur="checkDate(this)"></td>
<td class="tbln" width="22%"><input type="text" name="re_zeit_1"
size="10" onBlur="checkTime(this)"></td>
<td class="tbln" width="18%"><input type="radio" value="ja"
name="taegl_rueckkehr_1">
ja
<input type="radio" name="taegl_rueckkehr_1" checked value="nein">
nein</td>
</tr>
<tr>
<td class="tblb" height="20"></td>
</tr>
</table>
<div id="reiseadd"></div>
<table align="center" border="0" cellpadding="2" cellspacing="1"
width="90%">
<tr>
<td class="tbln" width="90%" height="25" colspan ="6">
<p align="right">
<INPUT TYPE="hidden" name="anzahl_reisen">
<INPUT NAME="doAction" TYPE="hidden" VALUE="reisen">
<!-- hinzufuegen einer weiteren reise --->
<INPUT TYPE="button" value="weitere Reisen abrechnen"
onClick="addReise()" name=""> <input name="gogogo" type="button"
value="weiter" onClick="doSubmit()">
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
I dont know why but when focus is lost in one of the dynamically added
fields, the checkTime() and the checkDate() functions are called. this
results in hanging up the browser. My debugging tells me, that if i'm in a
datefield and klick into a timefield, the checkDate() is called, the the
checkTime() with the value of the timefield. My mechanism works well in the
statical fields, but not the dynamically added ones...
I hope someone could help.
thx in advance
wolfgang wagner