Focus() an input box on click of a button -- IN Repeat region

Wappler General How To
#1

i have tried tierleslly to focus() a input box using a a button, it works perfectly without repeat region, however once i have multipe input boxes in repeat region, i can not set focus.

have used dmx-bind:id="‘inputBox’+$index" for the ID’s if the input boxed in repeat.
but can not seem get the click trigger to focus the element.

<div class="d-flex">
  <button class="btn" dmx-on:click="inputbox1.focus()">Button</button>
  <div id="record" is="dmx-repeat" dmx-bind:repeat="jsonDS1.data"><input type="text" class="form-control" name="jhq" dmx-bind:name="record" dmx-bind:value="jsonDS1.data.Question" aria-describedby="inp_Question_help" placeholder="Enter Question" dmx-bind:id="'inputbox'+$index">
  </div>
</div>

Can someone please help pleasee…

i am aware of the auto focus option, hower that doesnt solve my issue.

im trying to create a application form, with a next button, on every click of the next button it needs to go to the next input box in the repeat region.

@patrick @psweb

#2

This works:

image
image.png1090×242 16.9 KB

1 Like
#3

Hi ben, Thanks for your update, i could not get this to work iether, im using a onclick, update a variable called “myvariable” - the first index is in focus using what u mentioned above, however the next button click updates the myvariable value to 2 the input box with index2 does not focus —i have used

dmx-bind:autofocus “$index == myvariable”

“myvariable” increments by 1 on every click of the button

#4

What you need is the Data Iterator as can be seen in this video https://www.youtube.com/watch?v=UCdGraIw0yU.

#5

I also struggled a lot with repeat region and unfortunately I have to confirm to you that wappler at the moment does not allow the control and manipulation of the input box in the repeat region or repeat children.

#6

Hello @George (we need your help ) ,

What is missing in autofocus? when I add a new input field, the autofocus stays in the previous one.

This is test page : http://netglobalturkey.com/wappler/test.html

#7

we know something is missing. @george , @Teodor , @patrick can help us