Automatically focus cursor on first field... inline edit report datapage

[blarney]

I'm using a barcode reader to scan an order in a form, passing parameters to another form that scans the product sku, and the 2nd form opens itself up after each sku for however many skus are related to the order. It works well.

 

The sum of the skus scanned by product are in another report datapage that updates on the same page the 2nd form is on. The report queries both the table used to scan skus for a sum by product, and a table containing data from shipping software that contains what should be shipped within it's table....

 

The only issue with this setup is that I'd prefer to get rid of the 2nd form, and just scan the order# , then pass parameters to the report page and use inline edit to scan skus.... the barcode reader hits enter itself with each scan and I have the button hidden...  

 

I can't get this done BECAUSE I can't get the cursor to focus on the inline edit field for skus when the first page opens the report.

 

I think there should be an option for this like there is for forms....but since there isn't, I've been trying a bunch of scripts....here's my latest.... 

Footer:

<script>
{
document.getElementsByName('EditRecordInlineAddlineItemsku').focus();
document.getElementsByName('EditRecordInlineAddlineItemsku').select();
}
</script>

 

Any ideas how I might fix this???

 

[Ba2sai]

Hi Blarney,

 

Try this:

If your fieldname is "lineitemsku" and you want to focus on this Inline Insert field, try the code below.

<script>
{
document.getElementsByName('InlineAddlineItemsku')[0].focus();
}
</script>

[blarney]

On 4/4/2017 at 0:46 AM, Ba2sai said:

Hi Blarney,

 

Try this:

If your fieldname is "lineitemsku" and you want to focus on this Inline Insert field, try the code below.

<script>
{
document.getElementsByName('InlineAddlineItemsku')[0].focus();
}
</script>

Wow...that worked.

 

I could've sworn that I had tried this already.... but I may have put the [0] in the wrong place. Thank you!!!!!!!!!!!!!!!!!!!!!

[smcdonald83]

This code works great for initial load but does anyone know how to make it focus on the form field after each data submission? I need to be able to scan and submit multiple barcodes into a datapage set and it will do it for the first one but not for subsequent ones.

Thanks!

[Franchiser]

 

Hi smcdonald83,

Can you try this:

<script>
function SetFocus()
{
    if (!document.getElementById)
    {
        return;
    }

    var nameofthefirsttextfield = document.getElementById("nameofthefirsttextfield");

    if (nameofthefirsttextfield != null)
    {
        nameofthefirsttextfield.focus();
    }
}
SetFocus();
</script>

 

-Franchiser-

[valentid]

@FranchiserHello, I am looking to do something very similar to this and I wondered if you could please help me? I went to the configure results page and added an HTML block and in the script I wrote:

(my first field is WristbandID)

<script>
function SetFocus()
{
    if (!document.getElementById)
    {
        return;
    }

    var WristbandID = document.getElementById("WristbandID");

    if (WristbandID != null)
    {
        WristbandID.focus();
    }
}
SetFocus();
</script>

 

But nothing seems to happen as a result. Have I done something wrong there or does anyone have any other suggestions?

 

Thanks,

Dawn

[Vitalikssssss]

Hi @valentid,

Try this code:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

    document.querySelector('input[id*="InlineAddWristbandID"]').focus();

});
</script>

Regards,

vitalikssssss

[Nancy]

This is what I want to do on a submission form. Where would this code go on a submission form?

[Kurumi]

Hi @Nancy - you may try to insert this in the Footer. Add a Header and Footer in your configuration fields. You may check these links for reference:
https://howto.caspio.com/datapages/datapage-components/datapage-header-and-footer/
https://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/
https://howto.caspio.com/faq/caspio-bridge-8-4/inserting-code-in-html-blocks-and-header-footer/