how do you set an onclick event to a dynamic textbox [Archive]

View Full Version : how do you set an onclick event to a dynamic textbox

landon11

03-20-2003, 09:46 PM

I create an array of textboxes and I would like to have an onclick event for only one of them. is there a way to set the event like this in the head:

<script>
Form1.txtText1(0).onclick = alert("hello");
<script>

cheesebagpipe

03-20-2003, 09:53 PM

Not entirely clear what an 'array of textboxes' means...so I'll assume you're giving them the same name ("txtText1"):

<form.........>
.........
.........
</form>
<script type="text/javascript">

document.Form1.txtText1[0].onclick = function() {
alert("hello");
}

<script>

That'll register the first one in your source code. Need to do this after the relevant HTML has been parsed. You can set it 'from the head' like so:

<script type="text/javascript">

onload = function() {
document.Form1.txtText1[0].onclick = function() {
alert("hello");
}
}

<script>

landon11

03-20-2003, 10:05 PM

Thank you, but they didn't work for me. The txtText[0] is not created when the page is loaded it is created later if that helps.

cheesebagpipe

03-20-2003, 10:11 PM

Why all the mystery? Explain what's going on....:confused:

landon11

03-20-2003, 10:23 PM

I have a page that you put in your age and click a button that creates a textbox for 100 - your age like this:

x = 100 - age;
str = "<input name=\"txtText\"><br>";
for(i=0; i < x; i++){
str += str;}
document.getElementById("whatever").insertAdjacentHTML ("AfterEnd", str);

and I want the to set an onfocus event on the first textbox

cheesebagpipe

03-21-2003, 12:17 AM

Well...for starters, might want to look up the += operator; this:

for(i=0; i < x; i++){
str += str;}

...will give you the worlds longest string (if the user is young enough). The only reason I can think of for using the .insertAdjacentHTML() method is to support IE4, which has shabby DOM support; it also has fewer users now than NS4, according to the numbers I've seen recently so, probably OK to ignore it. Try this:

<html>
<head>
<script type="text/javascript">

function addFields(age) {
var el, oForm, x = 100 - Number(age);
for (var i=1; i<=x; i++) {
el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtText');
el.setAttribute('size', '12');
if (i == 1) el.setAttribute('onfocus', function() {alert("Hello!")});
oForm = document.getElementById('myForm');
oForm.appendChild(document.createElement('br'));
oForm.appendChild(el);
}
}

</script>
</head>
<body>
<form id="myForm">
<input type="text" name="age" size="3">____enter your age
<input type="button" value="Next" onclick="addFields(age.value)">
</form>
</body>
</html>

Just a guess. Hope there's a reason for the same names.

landon11

03-21-2003, 01:45 PM

thanks, but for starters I didn't write the code, I only was told to complete the task mentioned. Thanks for rewriting the code but that was no help....I figured it out myself.

cheesebagpipe

03-21-2003, 10:09 PM

Thank you, landon11...it's people like you that make spending time posting to this board an always rewarding experience.