# Dashboard Template next field on enter

**URL:** <https://discourse.nodered.org/t/dashboard-template-next-field-on-enter/39425>\
**Category:** Dashboard\
**Created:** [20 January 2021 10:20 UTC](https://discourse.nodered.org/t/dashboard-template-next-field-on-enter/39425 "2021-01-20T10:20:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JamesMcBride](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@JamesMcBride](https://discourse.nodered.org/u/JamesMcBride)\
**Post date:** [20 January 2021 10:20 UTC](https://discourse.nodered.org/t/dashboard-template-next-field-on-enter/39425/1 "2021-01-20T10:20:33Z")

</div>

Hi,  
I have a simple dashboard template table that I use for entering data from a barcode scanner (that emulates a keyboard)

The barcode scanner enters the scanned code, followed by enter

I'd like to be able to have the focus shifted to the next field (and then hit the submit button when I get to the end) automatically when each item is scanned.

Here's what the existing table looks like:

```auto
<table cellspacing="0" cellpadding="0">

    <tr >
        <td>Customer ID</td>
        <td>Customer</td>
        <td>Model</td>
        <td>IMEI</td>
        <td>ICCID</td>
        <td>Add</td>
    </tr>
   <tr>
        <td><input type="text" ng-model="message.customerID" ></td>
        <td><input type="text" ng-model="message.customer"></td>
        <td><input type="text" ng-model="message.model"></td>
        <td><input type="text" ng-model="message.imei"></td>
        <td><input type="text" ng-model="message.iccid"></td>
        <td><md-button ng-click="send({payload: {
         customerID: message.customerID,
         customer : message.customer,
         model : message.model,
         imei : message.imei,
         iccid : message.iccid,
         action : 'add'
                                            
                                            }})" >
                Add
            </md-button></td>
    
    </tr>
   
</table>

```

Any advice would be greatly appreciated 🙂

James

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [20 January 2021 11:53 UTC](https://discourse.nodered.org/t/dashboard-template-next-field-on-enter/39425/2 "2021-01-20T11:53:17Z")

</div>

Hi James, try this...

```auto
<script>
(function(scope) {
    console.log("in scope (this log entry helps us finding the code in devtools :)");
    document.querySelectorAll('#myInputTable1 input').forEach( el => {
        el.addEventListener('keydown', e => {
            if(e.keyCode === 13) {
                let nextCol = el.parentNode.nextElementSibling;
                if (!nextCol) return;
                let nextEl = nextCol.firstElementChild;
                if (!nextEl) return;
                if(nextEl.nodeName === 'INPUT') {
                    nextEl.focus();
                } else if(nextEl.nodeName === 'BUTTON') {
                    $(nextEl).click();//operate the button
                    $('#myInputTable1 input[ng-model]').val('');//clear the fields
                    $('#myInputTable1 input[ng-model="message.customerID"]').focus();//go back to 1st input
                }
            }
        })
    })
})(scope);
</script>

<table cellspacing="0" cellpadding="0" id="myInputTable1">

    <tr >
        <td>Customer ID</td>
        <td>Customer</td>
        <td>Model</td>
        <td>IMEI</td>
        <td>ICCID</td>
        <td>Add</td>
    </tr>
   <tr>
        <td><input type="text" ng-model="message.customerID" ></td>
        <td><input type="text" ng-model="message.customer"></td>
        <td><input type="text" ng-model="message.model"></td>
        <td><input type="text" ng-model="message.imei"></td>
        <td><input type="text" ng-model="message.iccid"></td>
        <td>
            <md-button ng-click="send({payload: {
                 customerID: message.customerID,
                 customer : message.customer,
                 model : message.model,
                 imei : message.imei,
                 iccid : message.iccid,
                 action : 'add' }})" > Add
            </md-button></td>
    </tr>
</table>

```

connect a debug node to the output of the ui\_template

---

<div class="post-metadata">

**Author:** ![JamesMcBride](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@JamesMcBride](https://discourse.nodered.org/u/JamesMcBride)\
**Post date:** [20 January 2021 12:07 UTC](https://discourse.nodered.org/t/dashboard-template-next-field-on-enter/39425/3 "2021-01-20T12:07:22Z")

</div>

> [@Steve-Mcl](#):
>
> `$('#myInputTable1 input[ng-model]').val('');//clear the fields`

Thanks Steve, exactly what I wanted, will make my life so much easier!

I modified what you posted slightly, but worked perfectly

```auto
<script>
(function(scope) {
    console.log("in scope (this log entry helps us finding the code in devtools :)");
    document.querySelectorAll('input').forEach( el => {
        el.addEventListener('keydown', e => {
            if(e.keyCode === 13) {
                let nextCol = el.parentNode.nextElementSibling;
                if (!nextCol) return;
                let nextEl = nextCol.firstElementChild;
                if (!nextEl) return;
                if(nextEl.nodeName === 'INPUT') {
                    nextEl.focus();
                } else if(nextEl.nodeName === 'BUTTON') {
                    $(nextEl).click();//operate the button
                    $('#myInputTable1 input[ng-model="message.imei"]').val('');//clear field
                    $('#myInputTable1 input[ng-model="message.iccid"]').val('');//clear field
                    $('#myInputTable1 input[ng-model="message.imei"]').focus();//go back to 1st input
                }
            }
        })
    })
})(scope);
</script>

```

---

<div class="post-metadata">

**Author:** ![jlespinosa1968](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jlespinosa1968/32/37171_2.png) [@jlespinosa1968](https://discourse.nodered.org/u/jlespinosa1968)\
**Post date:** [14 February 2021 08:29 UTC](https://discourse.nodered.org/t/dashboard-template-next-field-on-enter/39425/4 "2021-02-14T08:29:05Z")

</div>

Hi  
How do you set focus at the first field when the tab is open?  
With severals simple ui\_text\_input's in a tab, How do you can shift the focus to a desired text input or next one ?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 March 2021 08:29 UTC](https://discourse.nodered.org/t/dashboard-template-next-field-on-enter/39425/5 "2021-03-16T08:29:54Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.