Dynamic CreateElement add onblur?

andyalean · Apr 16, 2005

Hello javascript coders

,I am trying
to add an [b:be2ca59534]onblur[/b:be2ca59534] event to my code.
This is where I dynamically create a textfield.I want to assign it an
[b:be2ca59534]onblur[/b:be2ca59534] event handler like so.How do I
add a event to a newly created option text field.Thanks

for( ;k < holdHalfHours; k++ ){
timeLog.appendChild(br);
l = k +1;

var newHoldDesc = document.createTextNode( "Hold
Half Hour" + l );

timeLog.appendChild( newHoldDesc );

var inputHoldText =
document.createElement("input");

inputHoldText.type = "text";
inputHoldText.size = "5";
inputHoldText.id = "txtfHolding" + l;
inputHoldText.onblur = "checkValue(this);";

timeLog.appendChild(inputHoldText);

timeLog.appendChild( newSpacer
);

Developers Forum - @ DevPlug.com

Ovi · Apr 16, 2005

I have a nice example which might help you outthere, here goes...

###############################Start

<html>
<head>

<script>
function newInput(name, prevId) {
var id = 1 + prevId;
var newDiv = document.createElement('div');
var newInput = document.createElement('input');
newInput.name = name;
newInput.id = id;
newDiv.appendChild(newInput);
document.getElementById('inputList').appendChild(newDiv);
newInput.focus();
load();
}
function move(element, distance) {
var parent = element.parentElement;
var index = 0;
for (var i = 0; i < parent.children.length; i++) {
if (parent.children == element) {
index = i;
}
}
if (element.value != '') {
if (index == parent.children.length - 1) {
if (distance > 0) {
return true;
} else {
newInput(element.name, element.id);
}
}
if (parent.children[index + distance].value != '' && index + distance >
0) {
parent.removeChild(element);
parent.insertBefore(element, parent.children[index + distance]);
parent.children[index + distance].focus();
}
}
}
function keyPressed(e) {
if (!e) {
e = window.event;
var target = e.srcElement;
var key = e.keyCode;
} else {
var target = e.target;
var key = e.which;
}
var div = target.parentElement;
if (key == 38) {
move(div, -1);
} else if (key == 40) {
move(div, 1);
}
return true;
}
function lostFocus(e) {
if (!e) {
e = window.event;
var target = e.srcElement;
} else {
var target = e.target;
}
if (target.type == 'text') {
var id = 0;
var inputs = document.getElementsByTagName('input');
if (inputs[inputs.length - 1] == target) {
if (target.value.length > 0) {
newInput(target.name, target.id);
}
} else {
if (target.value.length == 0) {
document.getElementById('inputList').removeChild(target.parentElement)
}
}
}
return true;
}
function load() {
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++) {
x.onblur = function (e) {lostFocus(e)};
x.onkeyup = function (e) {keyPressed(e)};
}
}
</script>

</head>
<body onload="newInput('test', 0); load();">
<form name="whatever" ID="Form1">
<input type="submit" value="Save" NAME="submit" ID="Submit1">
<div id="inputList">
</div>
</form>
</body>
</html>

###############################End

Hello javascript coders ,I am trying
to add an [b:be2ca59534]onblur[/b:be2ca59534] event to my code.
This is where I dynamically create a textfield.I want to assign it an
[b:be2ca59534]onblur[/b:be2ca59534] event handler like so.How do I
add a event to a newly created option text field.Thanks

for( ;k < holdHalfHours; k++ ){
timeLog.appendChild(br);
l = k +1;

var newHoldDesc = document.createTextNode( "Hold
Half Hour" + l );

timeLog.appendChild( newHoldDesc );

var inputHoldText =
document.createElement("input");

inputHoldText.type = "text";
inputHoldText.size = "5";
inputHoldText.id = "txtfHolding" + l;
inputHoldText.onblur = "checkValue(this);";

timeLog.appendChild(inputHoldText);

timeLog.appendChild( newSpacer
);

Developers Forum - @ DevPlug.com

Click to expand...

RobG · Apr 17, 2005

andyalean said:
Hello javascript coders ,I am trying
to add an [b:be2ca59534]onblur[/b:be2ca59534] event to my code.
This is where I dynamically create a textfield.I want to assign it an
[b:be2ca59534]onblur[/b:be2ca59534] event handler like so.How do I
add a event to a newly created option text field.Thanks

When posting code, do not use tabs. Replace them with two or four
spaces and manually wrap code at about 70 character to allow a couple
of re-posts without automatic wrapping.

for( ;k < holdHalfHours; k++ ){
timeLog.appendChild(br);
l = k +1;

var newHoldDesc = document.createTextNode( "Hold
Half Hour" + l );

timeLog.appendChild( newHoldDesc );

var inputHoldText =
document.createElement("input");

inputHoldText.type = "text";
inputHoldText.size = "5";

Creating inputs using DOM methods can be problematic in some
browsers, test thoroughly.

inputHoldText.id = "txtfHolding" + l;
inputHoldText.onblur = "checkValue(this);";

Guessing that 'chekValue()' is a function defined elsewhere, then:

inputHoldText.onblur = function () {checkValue(this)};

should do the trick.

[...]

Anomaly: onblur handling AND advice on validation	1	Jan 29, 2008
onfocus, onblur on dynamic input box.	1	Sep 19, 2004
calculations using createElement input text boxes in a table	2	Dec 5, 2006
Javascript and Dynamic Table	2	May 27, 2009
Internet Explorer, createElement and draggable boxes	2	Mar 24, 2005
dynamic row table option problem	2	Sep 26, 2009
Creating Table with Javascript abd Adding Events dynamically to each	0	Jul 15, 2008
calculating in table made by createElement and appendChild	25	Sep 9, 2003

Dynamic CreateElement add onblur?

andyalean

Ovi

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads