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.tra ckno$oim.value! =\"\") {
document.f.rems hip.checked = true ;
}
}
// End -->

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

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]

Re: making dynamically created checkboxes check on value change?

On 16 Aug 2004 08:25:44 -0700, LRW <deja@celticbea r.com> wrote:

[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.leng th) {e.checked = true;}
}

<input ... onblur="checkUs ed(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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

[LRW]

Re: making dynamically created checkboxes check on value change?

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message news:<opsct0w4c ux13kvk@atlanti s>...[color=blue]
> On 16 Aug 2004 08:25:44 -0700, LRW <deja@celticbea r.com> wrote:
>
> [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.leng th) {e.checked = true;}
> }
>
> <input ... onblur="checkUs ed(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[/color]

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(whicheve r) of one of
dozens of textfields.

Thanks for help!
Liam

[LRW]

Re: making dynamically created checkboxes check on value change?

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

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message news:<opsct0w4c ux13kvk@atlanti s>...[color=blue]
> On 16 Aug 2004 08:25:44 -0700, LRW <deja@celticbea r.com> wrote:
>
> [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.leng th) {e.checked = true;}
> }
>
> <input ... onblur="checkUs ed(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[/color]

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(whicheve r) of one of
dozens of textfields.

Thanks for help!
Liam

[LRW]

Re: making dynamically created checkboxes check on value change?

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

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message news:<opsct0w4c ux13kvk@atlanti s>...[color=blue]
> On 16 Aug 2004 08:25:44 -0700, LRW <deja@celticbea r.com> wrote:
>
> [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.leng th) {e.checked = true;}
> }
>
> <input ... onblur="checkUs ed(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[/color]

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(whicheve r) of one of
dozens of textfields.

Thanks for help!
Liam

[Michael Winter]

Re: making dynamically created checkboxes check on value change?

On 17 Aug 2004 09:26:31 -0700, LRW <deja@celticbea r.com> wrote:

[snip]
[color=blue]
> I still don't get how this would solve my problem.[/color]

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.leng th) {
/* 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[i]) {
/* The associated textbox is the element before e. */
c[i - 1].checked = true;
break;
}
}
}
}

<input type="text" ... onchange="check Used(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.leng th) {
e.form.elements[i].checked = true;
}
}

<input type="text" ...
onchange="check Used(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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail

[LRW]

Re: making dynamically created checkboxes check on value change?

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message news:<opscv0le0 rx13kvk@atlanti s>...[color=blue]
> On 17 Aug 2004 09:26:31 -0700, LRW <deja@celticbea r.com> wrote:
>
> [snip]
>[color=green]
> > I still don't get how this would solve my problem.[/color]
>
> 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.leng th) {
> /* 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[i]) {
> /* The associated textbox is the element before e. */
> c[i - 1].checked = true;
> break;
> }
> }
> }
> }
>
> <input type="text" ... onchange="check Used(this);">[/color]

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