We Keep Coding

to get <input> autofocussed so that a barcode scanner could input the productcode and my ajax function could handle it

I have the following code :
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" onChange="ajaxrequest_provideProductListOnHit('protected/snippet/snippet_provideProductListOnHit.php', 'ajaxOnProductHit'); return false;" required="required" autofocus />
The problem is that :
The autofocus is not working, I'm using it in this input box only.
Actually the purpose of this input box is to get the field autofocussed so that a barcode scanner could input the productCode.
Now as you can see, my onChange event handler is not going to work here since the barcode scanner apart from the product code, inputs too.
So I need a solution here which autofocuses and once the barcode scanner inputs value in the field, calls for the mentioned ajax function.

html:
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" required="required" autofocus />
js:
var pc = document.getElementById('productCode');
pc.onblur = function () {
ajaxrequest_provideProductListOnHit(
'protected/snippet/snippet_provideProductListOnHit.php',
'ajaxOnProductHit'
);
}
pc.focus();
i use onblur, because onchange would trigger after EVERY change you make (e.g. typing into the text-field will trigger after every key).
you could also provide some custom-logic, e.g. recognize a certain length

Yes you where right, the problem was that I was using autofocus on a different preceding form field which made this particular field of this particular form non-autofocus. So I learned that in a page with multiple forms loaded in to the DOM, only the first one with auto-focus will work. Fool of me to think otherwise.

How to repeat the tabindex from 1 after it has gone to the last element with a tabindex?

So, for example, here's a script:
<!-- Random content above this comment -->
<input type="text" tabindex="1" />
<input type="text" tabindex="2" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<!-- Nothing underneath this comment -->
So, when the user presses tab and goes through the six textboxes, reaches the last one and then presses tab, it would go to the content above the first comment, right? Well, how do I make it start from tabindex="1" again?

Unfortunately, you can't do that without javascript. You can listen to a TAB (and make sure it's not SHIFT+TAB) key press on your last element and manually set the focus to your first element inside the handler. However, binding this logic to keyboard events (i.e. specific input method) is not universal and may not work when using:
A mobile browser
Some other entertainment device (smart tv, gaming console, etc. - they typically use a D-Pad for jumping between focusable elements)
An accessibility service
I suggest a more universal approach which is agnostic of how the focus is changed.
The idea is that you surround your form elements (where you want to create a "tabindex loop") with special "focus guard" elements that are focusable too (they have a tabindex assigned). Here is your modified HTML:
<p>Some sample content here...</p>
<p>Like, another <input type="text" value="input" /> element or a <button>button</button>...</p>
<!-- Random content above this comment -->
<!-- Special "focus guard" elements around your
if you manually set tabindex for your form elements, you should set tabindex for the focus guards as well -->
<div class="focusguard" id="focusguard-1" tabindex="1"></div>
<input id="firstInput" type="text" tabindex="2" class="autofocus" />
<input type="text" tabindex="3" />
<input type="text" tabindex="4" />
<input type="text" tabindex="5" />
<input type="text" tabindex="6" />
<input id="lastInput" type="text" tabindex="7" />
<!-- focus guard in the end of the form -->
<div class="focusguard" id="focusguard-2" tabindex="8"></div>
<!-- Nothing underneath this comment -->
Now you just listen to focus events on those guard elements and manually change focus to the appropriate field (jQuery used for the sake of simplicity):
$('#focusguard-2').on('focus', function() {
// "last" focus guard got focus: set focus to the first field
$('#firstInput').focus();
});
$('#focusguard-1').on('focus', function() {
// "first" focus guard got focus: set focus to the last field
$('#lastInput').focus();
});
As you see, I also made sure that we snap back to the last input when the focus moves backwards from the first input (e.g. SHIFT+TAB on the first input). Live example
Note that the focus guards are assigned a tabindex value too to make sure they are focused immediately before/after your input fields. If you don't manually set tabindex to your inputs, then both focus guards can just have tabindex="0" assigned.
Of course you can make this all work in a dynamic environment as well, when your form is generated dynamically. Just figure out your focusable elements (less trivial task) and surround them with the same focus guards.
Hope that helps, let me know if you have any issues.
UPDATE
As nbro pointed out, the above implementation has the unwanted effect of selecting the last element if one hits TAB after the page loads (as this would focus the first focusable element which is #focusguard-1, and that would trigger focusing the last input. To mitigate that, you can specify which element you want initially focused and focus it with another little piece of JavaScript:
$(function() { // can replace the onload function with any other even like showing of a dialog
$('.autofocus').focus();
})
With this, just set the autofocus class on whatever element you want, and it'll be focused on page load (or any other event you listen to).

Here my solution where you no need any other elements. As you can see elements will be looping inside <form> elements.
$('form').each(function(){
var list = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex < b.tabIndex ? -1 : 1; }),
first = list.first();
list.last().on('keydown', function(e){
if( e.keyCode === 9 ) {
first.focus();
return false;
}
});
});

Here is my solution, considering the first input has the "autofocus" attribute set:
Add this after your form element (with HTML5 it can be any tag):
<div tabindex="6" onFocus="document.querySelector('[autofocus]').focus()"></div>

Yes, after tabbing through the inputs it will jump on suitable elements that do not have a tab order specified. But also, after tabbing all "tabbable" elements, the focus will jump "outside" your page content, onto the browser's UI elements (tabs, menus, bookmarks, etc)
I think the easiest way is to handle the keyup event on the last input and intercept TAB usage (and SHIFT+TAB for that matter)

I wd suggest you to increase your tabindex ie. >100
and also give the tabIndex to your "content" container div
please note that your content container must have tabindex less than input boxes for ex.99 .
when you press tab on last input box manually set focus on your content div using javascript (you can use keypress handlers for tab key)
document.getElementById("content").focus();
you must giv tabindex to your "content" to set focus to it.
now if you press tab focus will automatically shift to first input box.
hope this will help.
Thank you

Refresh value in text field with JavaScript/jquery

I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre

You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}

I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))

Use onchange or onblur instead of onfocus!

use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">

First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp

All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>

javascript sometimes fails to enable/disable textarea controls

oi. i generate html and javascript for use within a c# webbrowser, and i'm debugging it with firebug via firefox.
function able(id,ckd) {
if(document.getElementById) {
var el = document.getElementById("answer"+id);
el.disabled = ckd;
el = document.getElementById("comment"+id);
el.disabled = ckd;
}
}
for use against
<html><head><style type="text/css"></style></head><body><form>
<table>
<tr>
<td><input name="asked" id="asked1" type="checkbox" checked onchange="able('1',!this.checked);" /> Active</td>
<td><textarea name="answer" id="answer1">Some big, fat answer.</textarea></td>
<td><textarea name="comment" id="comment1">Some snarky comment.</textarea></td>
</tr>
<tr>
<td><input name="asked" id="asked2" type="checkbox" onchange="answer2.disabled=!this.checked;comment2.disabled=!this.checked;" /> Active</td>
<td><textarea name="answer" id="answer2" disabled></textarea></td>
<td><textarea name="comment" id="comment2" disabled></textarea></td>
</tr>
</table>
<input name="save" type="button" onclick="window.external.UpdateCandidateQuestions();" value="save" />
<input name="reset" type="reset" value="reset" />
</form></body></html>
the real generated html is LONG but well-formed, and i was careful to avoid cached pages while testing. the second method (asked2.onchange uses inline javascript) works less well than the first method (asked1.onchange calls javascript function defined in the head). the id counter (ie, asked"1", asked"2", asked"3", et al) and the answer and comment innertext values are either from a database or entered via webbrowser. there is a consistent fail point, and firebug walks through it as if it works, but it fails. if i remove table rows before and/or after the full data fail point, the fail point moves. once it fails, the remainder of the page fails as well.
please advise on where else i might debug this pima.

It is rarely a good idea to use the change event with radio buttons. According to the W3C HTML 4.01 specification the onchange event:
...occurs when a control loses the
input focus and its value has been
modified since gaining focus.
http://www.w3.org/TR/html401/interact/scripts.html#adef-onchange
IE works that way for all form controls - you need to modify the control, then click elsewhere to make it lose focus so a change event is dispatched (if the state changed). Other browsers will dispatch a change event if a click changes a button's status, it doesn't need to lose focus.
It is much better to user an onclick listener and do some action based on whether the control is checked or not.
The above may or may not fix your issue. As far as I can see, there is no reason why the able() function should not work, just change onchange to onclick.

How to skip fields using javascript?

I have a form like this:
<form name="mine">
<input type=text name=one>
<input type=text name=two>
<input type=text name=three>
</form>
When user types a value in 'one', I sometimes want to skip the field 'two', depending on what he typed. For example, if user types '123' and uses Tab to move to next field, I want to skip it and go to field three.
I tried to use OnBlur and OnEnter, without success.
Try 1:
<form name="mine">
<input type=text name=one onBlur="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=two>
<input type=text name=three>
</form>
Try 2:
<form name="mine">
<input type=text name=one>
<input type=text name=two onEnter="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=three>
</form>
but none of these works. Looks like the browser doesn't allow you to mess with focus while the focus is changing.
BTW, all this tried with Firefox on Linux.

Try to attach tabindex attribute to your elements and then programmaticaly (in javaScript change it):
<INPUT tabindex="3" type="submit" name="mySubmit">

You could use the onfocus event on field two, which will be called when it receives focus. At that point, field 1's value should be updated and you can perform your check then.

If you used the method you describe, and they worked, the focus would also change when the user clicks on the field, instead of tabbing to it. I can guarantee you that this would result in a frustrated user. (Why exactly it doesn't work is beyond me.)
Instead, as said before, change the tabindex of the appropriate fields as soon as the content of field one changes.

<form name="mine">
<input type="text" name="one" onkeypress="if (mine.one.value == '123') mine.three.focus();" />
<input type="text" name="two">
<input type="text" name="three">
</form>

Try onkeypress instead of onblur. Also, on the onfocus of field two is where you should be sending to three. I'm assuming you don't want them typing in two if one is 123 so you can just check that on two's onfocus and send on to three.