471,338 Members | 1,301 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,338 software developers and data experts.

Dynamic CreateElement add onblur?

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 :D

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
Jul 23 '05 #1
2 11011
Ovi
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(n ewDiv);
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[i] == 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(t arget.parentElement)
}
}
}
return true;
}
function load() {
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++) {
x[i].onblur = function (e) {lostFocus(e)};
x[i].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


andyalean wrote:
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 :D

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


Jul 23 '05 #2
andyalean wrote:
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 :D
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.

[...]

--
Rob
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Cindy | last post: by
7 posts views Thread by Cindy | last post: by
1 post views Thread by Tzachi | last post: by
2 posts views Thread by The_Original_MB | last post: by
reply views Thread by rosydwin | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.