adding onkeyup to input field

[Lee]

I have this function that doesn't work. I pass it the td element and
an id, and it makes an input field inside the td. That part workds.
What doesn't work is that I want to add an "onkeyup" on the input
field. Any help? Please??? I don't get any error on my javascript
console in firefox, and I am not seeing any errors in IE.

// makes an input field that submits itself using setCalendarValue()
when it's blurred (it will be blurred if [enter] is pressed)
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active, then don't let it be
activated again
if(thisCalendarInputField==id){
return false;
}
else{
thisCalendarInputField=id;
}
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;
el.innerHTML='';
var inputField = "<input type='text' value='" + value + "'
name='inputField' id='inputField' "
+ " onBlur='setCalendarValue(this,\"" + id + "\");'
class='calendarInputField' />"
+ "<input type='hidden' name='" + whichField + "' id='" +
whichField + "' value='" + which + "' />"
+ "<input type='hidden' name='" + hoursIdField + "' id='" +
hoursIdField + "' value='" + hoursId + "' />"
+ "";
// change the innerHTML of this td into this input field
el.innerHTML = inputField;
document.getElementById('inputField').focus();

el.onKeyUp="alert('hi')";

return;
}

 

[RobG]

I have this function that doesn't work. I pass it the td element and
an id, and it makes an input field inside the td. That part workds.
What doesn't work is that I want to add an "onkeyup" on the input
field. Any help? Please??? I don't get any error on my javascript
console in firefox, and I am not seeing any errors in IE.

// makes an input field that submits itself using setCalendarValue()
when it's blurred (it will be blurred if [enter] is pressed)
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active, then don't let it be
activated again

Do not allow posted code to auto-wrap, it nearly always introduces more
errors. Manually wrap code at about 70 characters and use 2 spaces for
indents, not tabs.

if(thisCalendarInputField==id){

I guess the value of - thisCalendarInputField - is set elsewhere.

return false;
}
else{

There is no need for an else after a conditional return.

thisCalendarInputField=id;
}
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;
el.innerHTML='';
var inputField = "<input type='text' value='" + value + "'
name='inputField' id='inputField' "
+ " onBlur='setCalendarValue(this,\"" + id + "\");'
class='calendarInputField' />"

The use of mixed-case attribute names in the source markup is a bad
habit, use all lower case (even though HTML doesn't care about case).

Your tag syntax indicates XHTML, but your attribute names appear to
require HTML. The use if innerHTML also infers the use of HTML (though
there is no standard to indicate whether that is a reasonable inference
or not).

Use HTML 4.01, there are no practical benefits to using XHTML on the
web.

+ "<input type='hidden' name='" + whichField + "' id='" +
whichField + "' value='" + which + "' />"
+ "<input type='hidden' name='" + hoursIdField + "' id='" +
hoursIdField + "' value='" + hoursId + "' />"
+ "";
// change the innerHTML of this td into this input field
el.innerHTML = inputField;
document.getElementById('inputField').focus();

el.onKeyUp="alert('hi')";

Javascript is case sensitive:

el.onkeyup = "alert('hi')";

The use of all lower case attribute names (and tag names too) is a good
habit to get into, especially if you really do intend to use XHTML.

 

[Lee]

Do not allow posted code to auto-wrap, it nearly always introduces more

errors. Manually wrap code at about 70 characters and use 2 spaces for
indents, not tabs.

ok I hope I got it not wrapping, because I really do appreciate the
help. I've changed things as I've understood them (I really don't
understand XHTML/HTML, so I hope it's besides the point). After I
changed the function, it still works as always.

I realized I didn't use the correct element for "onkeyup," but it's
still not working. Still no javascript errors. Any further help is
really appreciated. Thanks on everything so far!

// makes an input field that submits itself using
// setCalendarValue() when it's blurred (it will be blurred if [enter]
is pressed)
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active,
// then don't let it be activated again
if(thisCalendarInputField==id){
return false;
}
thisCalendarInputField=id;
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;
el.innerHTML='';
var inputField =
"<input type='text' value='" + value
+ "' name='inputField' id='inputField' "
+ " onblur='setCalendarValue(this,\"" + id
+ "\");' class='calendarInputField' />"
+ "<input type='hidden' name='" + whichField
+ "' id='" + whichField + "' value='" + which + "' />"
+ "<input type='hidden' name='" + hoursIdField + "' id='"
+ hoursIdField + "' value='" + hoursId + "' />"
+ "";
// change the innerHTML of this td into this input field
el.innerHTML = inputField;

var inputEl=document.getElementById('inputField');
inputEl.focus();

inputEl.onkeyup = "alert('hi')";

return;
}

 

[Lee]

By the way, I am going to use a separate library that adds onkeyup in
this fashion, and I'm just using alert to test things out in the
meantime. The library works perfectly elsewhere on an input field that
is already defined when the page loads.

 

[ASM]

Lee a écrit :

I have this function that doesn't work. I pass it the td element and
an id, and it makes an input field inside the td. That part workds.
What doesn't work is that I want to add an "onkeyup" on the input
field. Any help? Please??? I don't get any error on my javascript
console in firefox, and I am not seeing any errors in IE.

I do not understand,
you can add a onblur :
+ " onBlur='setCalendarValue(this
and can't add a onkeyup ?

Why ?


In your function, from where comes 'thisCalendarInputField' ?

It certainly would have been better to use createElement + appendChild
instead to use innerHTML ...

 

[ASM]

Lee a écrit :

I realized I didn't use the correct element for "onkeyup," but it's
still not working. Still no javascript errors. Any further help is
really appreciated. Thanks on everything so far! ....
function makeCalendarInputField(el,hoursId,which){
var id=el.id;

// if this input field is already active,
// then don't let it be activated again

from where comes this 'thisCalendarInputField' ?
what is it ?

if(!thisCalendarInputField.disabled)
{
thisCalendarInputField.disabled=true;
return;
}

if(thisCalendarInputField==id){
return false;
}
thisCalendarInputField=id;
var value = el.innerHTML;
// remember the original value just in case
originalValue=value;

// variante :
while(el.firstChild) el.removeChild(el.firstChild);
var field = document.createElement('input');
field.name = 'inputField';
field.id = 'inputField';
field.onblur = function() { setCalendarValue(this,'id'); }
el.appendChild(field);
field = document.createElement('input');
field.name = whichField; // don't know from where 'whichField' comes
field.id = whichField;
field.value = which;
field.setAttribute = ('type', 'hidden');
el.appendChild(field);
field = document.createElement('input');
field.type = 'hidden';
field.name = hoursIdField;
field.id = hoursIdField;
field.value = hoursId;
el.appendChild(field);

var inputEl=document.getElementById('inputField');
inputEl.focus();

inputEl.onkeyup = function() { alert('hi'); };

 

[Lee]

Thanks, I think it will take me a little while to understand the child
functions and everything, but it looks like it might work.

 

[ASM]

Lee a écrit :

Thanks, I think it will take me a little while to understand the child
functions and everything, but it looks like it might work.

the important corrections where :

 

[Lee]

Thanks! But I'm so confused.
Why does this work
inputEl.onkeyup = function() { alert('hi'); };
instead of
inputEl.onkeyup="alert('hi')";

Also, I don't know if this will help me in the long run, since I'm
trying to use a library's class in order to do what I need. The syntax
will be: (and it works elsewhere)

var input=value;
var options2 = {
script:"employeeSuggestion.php?",
varname:"input",
minchars:1
};
// add autosuggest
var inputFieldAs = new AutoSuggest(inputEl.id, options2);

 

[Lee]

Actually in the object itself it's using that function technique... I
bet that the real problem arises because I am puting in the <input>
after the page loads. How do I manually insert it into the DOM? Do
you think this is really my problem?

 

[ASM]

Lee a écrit :

Thanks! But I'm so confused.
Why does this work
inputEl.onkeyup = function() { alert('hi'); };

it works because it works

Also, I don't know if this will help me in the long run, since I'm
trying to use a library's class in order to do what I need. The syntax
will be: (and it works elsewhere)

var input=value;
var options2 = {
script:"employeeSuggestion.php?",
varname:"input",
minchars:1
};

that is equal to :

var options2 = new Object();
options2.script = 'employeeSuggestion.php?';
options2['varname'] = 'input';
options2.minchars = 1;

options2['varname'] is same as options2.varname

see :
http://www.javascriptkit.com/javatutors/oopjs.shtml

// add autosuggest
var inputFieldAs = new AutoSuggest(inputEl.id, options2);

I suppose you can try :
inputEl.onkeyup = function() {new AutoSuggest(this.id, options2);}

 

[Lee]

it works! Thanks!

 

[ASM]

Lee a écrit :

it works! Thanks!

Splendid ! Wonderful ! Marvelous !

I hate to work with libraries.

 

[RobG]

Thanks! But I'm so confused.

Please don't top-post here.

Why does this work
inputEl.onkeyup = function() { alert('hi'); };

Here you use standard javascript to assign a reference to an anonymous
function object to a property of a DOM object. The DOM object is a
host object, and therefore can behave anyway it wants. However,
browser developers have universally decided that when functions are
attached this way, they will be called as a method of the DOM object.

It's very convenient, but it doesn't work with all host-provided
objects (e.g. XMLHttpRequest)

instead of
inputEl.onkeyup="alert('hi')";

This follows the syntax for adding script within HTML, where the value
of the onkeyup attribute is passed to the script engine as-is:

<input ... onkeyup="alert('hi');" ...>

Which effectively gives the same result as your first effort above.

It may seem inconsistent that in one case you assign a reference to a
function object, in the other you supply some script which is used to
create a function object, but it is very useful to have two methods to
achieve the same result.

e.g. you can easily attach functions defined elsewhere:

function foo (){...}

inputEl.onkeyup = foo;