how to move focus on next dynamic (uncheked) checkbox element afteronclick event

B

bokswagen

Hi everyone,

Here's my little problem,

I have couple of checkboxes on my page which are dynamically
generated. Some of these Checkboxes are checked and some aren't. How
can i move the focus on the next unchecked CheckBox.

This is basically an admin form that approves different content
submitted by users.

thank you very much.
 
D

David Mark

Hi everyone,

Here's my little problem,

I have couple of checkboxes on my page which are dynamically
generated. Some of these Checkboxes are checked and some aren't. How
can i move the focus on the next unchecked CheckBox.
Click to expand...

On click? Don't do it.
This is basically an admin form that approves different content
submitted by users.
Click to expand...

The design is bad in any context.

[snip]
 
S

SAM

Le 12/2/08 9:54 PM, (e-mail address removed) a écrit :
Hi everyone,

Here's my little problem,

I have couple of checkboxes on my page which are dynamically
generated. Some of these Checkboxes are checked and some aren't. How
can i move the focus on the next unchecked CheckBox.

This is basically an admin form that approves different content
submitted by users.
Click to expand...

And then what the admin will do with next checkbox focused ?
(the mouse pointer is yet over the actual button if nothing scroll)

And what about label ?
thank you very much.
Click to expand...

<script type="text/javascript">

function getNextCB( what )
{
if(typeof what.form != 'null') {
var f = what.form.elements,
n = f.length,
k = false;
if(n) {
for(var i=0; i<n; i++) {
if(f == what) k=i;
if( k && i>k && f.type == 'checkbox' && !f.checked)
{
f.focus();
break;
}
}
}
}
}
</script>
</head>
<body>

<form>
<p>case 1 : <input type="checkbox" onclick="getNextCB(this)">
case 2 : <input type="checkbox" onclick="getNextCB(this)">
<p>case 3 : <input type="checkbox" onclick="getNextCB(this)">
</form>


You'll can see how it is of no utility.
(and while there is no label to disturb !)
 
B

bokswagen

Hi everyone,
Click to expand...
Here's my little problem,
Click to expand...
I have couple of checkboxes on my page which are dynamically
generated. Some of these Checkboxes are checked and some aren't. How
can imovethefocuson thenextunchecked CheckBox.
Click to expand...

On click?  Don't do it.


This is basically an admin form that approves different content
submitted by users.
Click to expand...

The design is bad in any context.

[snip]
Click to expand...
thanks for the comment david, but I need to do this so my admin staff
can easily jump to approve each of the user submitted content. Forgot
to mention that they either use the mouse or the keyboard, (space bar)
to check these boxes.

What would be your suggestion?
 
B

bokswagen

Merci beaucoup Sam, but it doesnt work. I even took out the spacing on
the getNextCB(what) and no luck....mais, I see where you are going
with this.

BTW, After the focus changes, my admin staff either checks the boxes
with the mouse click or the space bar to toggle.

merci encore!
 
D

David Mark

On Dec 2, 3:54 pm, (e-mail address removed) wrote:
Click to expand...
On click?  Don't do it.
Click to expand...
The design is bad in any context.
Click to expand...
[snip]
Click to expand...

thanks for the comment david, but I need to do this so my admin staff
can easily jump to approve each of the user submitted content. Forgot
to mention that they either use the mouse or the keyboard, (space bar)
to check these boxes.

What would be your suggestion?
Click to expand...

Focus the first checkbox at the outset, regardless of its value. The
user may wish to clear it, rather than set it. After that, let them
handle the focus.
 
S

SAM

Le 12/3/08 7:28 PM, (e-mail address removed) a écrit :
Merci beaucoup Sam, but it doesnt work.
Click to expand...

comment ça ? it doesn't work ?
I think I tested it.

I even took out the spacing on
the getNextCB(what) and no luck....mais, I see where you are going
with this.
Click to expand...

For instance there (tested in FF3) :


<script type="text/javascript">

function getNextCB( what ) {
if(typeof what.form != 'null') {
var f = what.form.elements,
n = f.length,
k;
if(n) {
for(var i=0; i<n; i++) {
if(f === what) k=i;
if(typeof k == 'number' && i>k &&
f.type == 'checkbox' &&
!f.checked )
{
f.focus();
break;
}
}
}
}
}
</script>
</head>
<body>

<form>
<p>case 1 : <input type="checkbox" onclick="getNextCB(this)">
case 2 : <input type="checkbox" onclick="getNextCB(this)">
<p>case 3 : <input type="checkbox" onclick="getNextCB(this)">
<p>case 4 : <input name="c4" type="checkbox" onclick="getNextCB(this)">
<p>case 5 : <input name="c5" type="checkbox" onclick="getNextCB(this)">
<p>case 6 : <input name="c6" type="checkbox" onclick="getNextCB(this)">
<div>
<button id="but">test</button>
</div>
BTW, After the focus changes, my admin staff either checks the boxes
with the mouse click or the space bar to toggle.
Click to expand...

not really to toggle (on/off/on) as he can't go more on a checked box.
merci encore!
Click to expand...

Je ne connaissais pas le coup de la barre-espace.
I didn't know the space-bar for clicking.


and now ... how to check/uncheck back (to up) ? ;-)
 
B

bokswagen

Merci beaucoup encore une fois Sam, il a travaillé magnifiquement.

I was wondering why you have set the first one for K=false. I guess
you had to check if it was boolean or not.

anyways, greatly appreciate it!

SAM bon travail!
 
B

bokswagen

BTW, I added this css style just to make sure my users see where the
focus is.

/*FOR CHECKBOX HIGHLIGHTING on CONTENT APPROVAL*/

*:focus
{
-moz-outline: 3px solid #FFFF00 !important;
-moz-outline-offset: 1px !important;
-moz-outline-radius: 5px !important;
}

input:focus
{
-moz-outline-offset: -1px !important;
}

input[type="checbox"]:focus
{
-moz-outline-radius: 12px !important;
-moz-outline-offset: 0px !important;
}

Merci encore pour votre aide
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How can I hide a div using an event listener on multiple checkboxes? 6
Centering picture element for larger screen sizes 2
Move focus to next element 6
Checkbox Validation on Dynamic ASP Checkboxes 34
Here is how I would move forward on this endeavor. 0
how to move on to next url if current one is a dud 2
asp Checkbox on click event 1
LazyTree converted to a Checkbox Tree, but checkbox clear? 0

Members online

No members online now.
Total: 38 (members: 0, guests: 38)
Robots: 202

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,144
Latest member
KetoBaseReviews

Latest Threads

Top