making dynamically created checkboxes check on value change?

[LRW]

I have no idea if this is more a PHP question or Javascript question,
because my problem hinges equally on both.

I have a PHP script that queries a database and creates a list of rows
for each item, each with their own checkbox one can select to do stuff
later. The PHP script this form posts to creates an array of all the
selected checkboxes and does stuff.

But, on the form, I want to be able to have the checkboxes auto-check
when someone changes the value of a textfield on that row.

With some stuff cut out, here's what I have on the form:

<!-- Begin
function NotEmpty() {
if (document.f.trackno$oim.value!=\"\") {
document.f.remship.checked = true ;
}
}
// End -->

<form name=\"f\" id=\"f\" method=\"post\"
action=\"trackpareportproc.bkk\">
<input name=\"remship[]\" type=\"checkbox\" value=\"$oim\"
class=\"remship\">
<input type=\"text\" name=\"trackno$oim\" size=\"40\"
onBlur=\"NotEmpty();\">

Obviously I think the problem rests in how do I get the JavaScript to
know which checkbox to check. I can't make the NAME for each checkbox
unique otherwise that would mess up the array that's created later
based on which checkboxes are selected.

Thanks for any suggestions!
Liam

 

[Michael Winter]

[how to get current event target]

In intrinsic events, the 'this' operator contains a reference to the
element receiving the event. You can use that to access the object and its
properties:

function checkUsed(e) {
if(e.value.length) {e.checked = true;}
}

<input ... onblur="checkUsed(this)">

By the way, I would have thought that the change event was more
appropriate than blur. Their behaviour is similar; change is only fired if
the value has actually between getting and losing focus, rather than every
time focus is lost.

Hope that helps,
Mike

 

[LRW]

[how to get current event target]

In intrinsic events, the 'this' operator contains a reference to the
element receiving the event. You can use that to access the object and its
properties:

function checkUsed(e) {
if(e.value.length) {e.checked = true;}
}

<input ... onblur="checkUsed(this)">

By the way, I would have thought that the change event was more
appropriate than blur. Their behaviour is similar; change is only fired if
the value has actually between getting and losing focus, rather than every
time focus is lost.

Hope that helps,
Mike

Hi, thanks for the reply.
I still don't get how this would solve my problem. See, the script
generates dozens, sometimes hundreds of rows based on a database
query. That's dozens of checkboxes all names the same thing:

<input name=\"shipsel[]\" type=\"checkbox\" value=\"$oim\"
class=\"accship\">
Dozens of check boxes named shipsel[]. They HAVE to be named that so
that an array can be made to process each selected checkbox on
submission.

So, how does
{e.checked = true;} know to check the one box for the (e.value.length)
that it's related to?
I tried the code you suggested, but it didn't work. And unless I'm
missing something, it's because the javascript still doesn't know
which checkbox to check upon onChange/onBlur(whichever) of one of
dozens of textfields.

Thanks for help!
Liam

 

[LRW]

(My mail reader keeps crashing upon posting a reply...so if there's
more than one duplicate, VERY sorry!)

[how to get current event target]

In intrinsic events, the 'this' operator contains a reference to the
element receiving the event. You can use that to access the object and its
properties:

function checkUsed(e) {
if(e.value.length) {e.checked = true;}
}

<input ... onblur="checkUsed(this)">

By the way, I would have thought that the change event was more
appropriate than blur. Their behaviour is similar; change is only fired if
the value has actually between getting and losing focus, rather than every
time focus is lost.

Hope that helps,
Mike

Hi, thanks for the reply.
I still don't get how this would solve my problem. See, the script
generates dozens, sometimes hundreds of rows based on a database
query. That's dozens of checkboxes all names the same thing:

<input name=\"shipsel[]\" type=\"checkbox\" value=\"$oim\"
class=\"accship\">
Dozens of check boxes named shipsel[]. They HAVE to be named that so
that an array can be made to process each selected checkbox on
submission.

So, how does
{e.checked = true;} know to check the one box for the (e.value.length)
that it's related to?
I tried the code you suggested, but it didn't work. And unless I'm
missing something, it's because the javascript still doesn't know
which checkbox to check upon onChange/onBlur(whichever) of one of
dozens of textfields.

Thanks for help!
Liam

 

[LRW]

(My mail reader keeps crashing upon posting a reply...so if there's
more than one duplicate, VERY sorry!)

[how to get current event target]

In intrinsic events, the 'this' operator contains a reference to the
element receiving the event. You can use that to access the object and its
properties:

function checkUsed(e) {
if(e.value.length) {e.checked = true;}
}

<input ... onblur="checkUsed(this)">

By the way, I would have thought that the change event was more
appropriate than blur. Their behaviour is similar; change is only fired if
the value has actually between getting and losing focus, rather than every
time focus is lost.

Hope that helps,
Mike

Hi, thanks for the reply.
I still don't get how this would solve my problem. See, the script
generates dozens, sometimes hundreds of rows based on a database
query. That's dozens of checkboxes all names the same thing:

<input name=\"shipsel[]\" type=\"checkbox\" value=\"$oim\"
class=\"accship\">
Dozens of check boxes named shipsel[]. They HAVE to be named that so
that an array can be made to process each selected checkbox on
submission.

So, how does
{e.checked = true;} know to check the one box for the (e.value.length)
that it's related to?
I tried the code you suggested, but it didn't work. And unless I'm
missing something, it's because the javascript still doesn't know
which checkbox to check upon onChange/onBlur(whichever) of one of
dozens of textfields.

Thanks for help!
Liam

 

[Michael Winter]

[snip]

I still don't get how this would solve my problem.

My apologies. I my first suggestion wasn't appropriate at all.

Still, it's not difficult, the approach is just different.

[snip]

/* e - A reference to the textbox element. */
function checkUsed(e) {
/* If the string is not empty. */
if(e.value.length) {
/* Look through the list of form elements
* and find the ordinal for the textbox, e. */
for(var c = e.form.elements, i = 0, n = c.length; i < n; ++i) {
if(e == c) {
/* The associated textbox is the element before e. */
c[i - 1].checked = true;
break;
}
}
}
}

<input type="text" ... onchange="checkUsed(this);">

Alternatively,

/* e - A reference to the textbox element.
* i - The ordinal number of the checkbox
* associated with the textbox, e. */
function checkUsed(e, i) {
if(e.value.length) {
e.form.elements.checked = true;
}
}

<input type="text" ...
onchange="checkUsed(this, <SERVER-SUPPLIED-NUMBER>);">

If the form is large, the first version is potentially slow, but it
requires little effort to use. Moreover, if, for some reason, the user
agent decides not to add all of the form controls to the elements
collection in document order, the function will fail (I don't see that
happening, though).

The second version avoids the problems of the first, but requires you to
keep track of how many controls have been added to the form. The formula
for <SERVER-SUPPLIED-NUMBER> is simple, though.

ssn = (i * 3) + 1

where i is the row number starting from 0. This assumes that the first row
is the first set of elements in the form, and no other elements interrupt
the sequence. Even if there are are interruptions, as long as there's a
pattern, SSN is easy enough to calculate.

Hope you have better luck this time,
Mike

 

[LRW]

[snip]

I still don't get how this would solve my problem.

My apologies. I my first suggestion wasn't appropriate at all.

Still, it's not difficult, the approach is just different.

[snip]

/* e - A reference to the textbox element. */
function checkUsed(e) {
/* If the string is not empty. */
if(e.value.length) {
/* Look through the list of form elements
* and find the ordinal for the textbox, e. */
for(var c = e.form.elements, i = 0, n = c.length; i < n; ++i) {
if(e == c) {
/* The associated textbox is the element before e. */
c[i - 1].checked = true;
break;
}
}
}
}

<input type="text" ... onchange="checkUsed(this);">

Holy wow! That worked! And seeing WHY it works makes sense. The only
way possible to do it would be to go by placement, and not name. I
just would have had no idea how to do it.
Although if I had been told "focus on how MANY fields there are, not
what they're named, I may have been able to find the answer on my own.
But I really appreciate your help!!
Thanks!
Liam