Switching back and forth between fluid text fields

Is there a way to navigate between dynamically generated textfields using an iterator from struts-tags?

<s:iterator value="aList">
 <td width="50px" align="center">
  <s:textfield name="solField" size="2" maxlength="1" style="text-transform: uppercase; text-align:center"/>                    
 </td>
</s:iterator>

I attempted to use javascript for navigation, but encountered issues due to the fields having the same name. The resulting code in the browser (with three items in the list) is:

<td width="50px" align="center">
 <input type="text" name="solField" size="2" maxlength="1" value="" id="correct_solField" style="text-transform: uppercase; text-align:center"/>
</td>
<td width="50px" align="center">
 <input type="text" name="solField" size="2" maxlength="1" value="" id="correct_solField" style="text-transform: uppercase; text-align:center"/>
</td>
<td width="50px" align="center">
 <input type="text" name="solField" size="2" maxlength="1" value="" id="correct_solField" style="text-transform: uppercase; text-align:center"/>
</td>

If you have any suggestions or solutions, I would greatly appreciate it. Thank you.

javajavascriptiteratortextfieldstruts-tags

Answer №1

How can jQuery help with this situation?

$(document).on('keyup', 'input', function(){
   if($(this).val().length >= $(this).attr('maxlength'))
   {
       $(this).nextAll('input:first').focus();
       // Another option is
       // $(this).next('input').focus();
   }
});

Does this solution meet your needs? Check out this working example: http://fiddle.jshell.net/C3jeY/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Shortcuts for $scope variables in AngularJS templates

Within my controller, I often set: $scope.currentThing.data For different parts of my template, sometimes I require currentThing.data.response[0].hello and other times currentThing.data.otherStuff[0].goodbye //or currentThing.data.anotherThing[0].goo ...

javascriptangularjsangularjs-scopeangular-template

Is it possible to use a += operator with attr() and val() functions in JavaScript?

Ever since I switched to jQuery, my development process has significantly sped up. However, there is one task that has become a bit more time-consuming: appending a string to an attribute or value. For instance, if you wanted to add a letter to the value ...

javascriptjqueryattributestextbox

Using CDN to load the STLLoader in Three.js

After deciding to have some fun by creating an STL loader, I've hit a roadblock. Despite trying various solutions found online, I'm still facing issues, mainly due to CDN errors. Currently, I'm following the tutorial on the Three.js site and ...

javascriptthree.js

What is the proper way to document instance members that have been added through Object.defineProperties()?

I am struggling with JSDoc 3 recognizing instance properties defined using Object.defineProperties in my class. Here is a simplified version of the code I am working on: /** @exports mymodule */ function mymodule(exports) { /** @constructor * @p ...

javascriptjsdoc

What could be causing the second switchMap to be triggered repeatedly upon subscription?

Check out the code snippet below for reproducing the issue: import { defer, BehaviorSubject, of } from "rxjs"; import { shareReplay, switchMap } from "rxjs/operators"; const oneRandomNumber = defer(() => of(Math.floor(Math.random() ...

javascriptrxjs

Create and adapt dynamic tiles to fit within the available width

I am looking to create a dynamic tile (div) that adjusts based on the number of users available, similar to how it works in Microsoft Teams meetings. For example, if there is only one user, the div should occupy the full screen. When there are two users ...

javascriptcssbootstrap-4flexboxresponsive-design

Deactivate a chosen item following selection

Is there a way to deactivate a selectable element after it has been clicked in the scenario below? Additionally, I would like to modify its CSS style. $(function(){ $("#selectable").selectable({ stop: function() { var result = $( "#select-re ...

javascriptjquerycssjquery-uijquery-ui-selectable

Is it possible to utilize ag-grid's API to filter multiple checkbox values simultaneously?

I am currently utilizing angularjs and have implemented a series of checkboxes to filter my ag-grid. So far, I have successfully utilized radio buttons and the api.setQuickFilter method for filtering based on individual values. However, I am facing an iss ...

javascriptangularjscheckboxfilteringag-grid

The function cannot be invoked. The 'Boolean' type does not have any call signatures. An error has occurred in the computed property of Vue3

Currently, I am working on creating a computed property that checks if an item is in the array. The function I have created returns a boolean value and takes one parameter, which is the item to be checked. isSelected: function (item: MediaGalleryItemTypes) ...

javascripttypescriptvue.jsvue-componentvuejs3

Having trouble exporting data to an excel file using Selenium WebDriver and Apache POI

Just getting started with Selenium Web automation, so go easy on me. I've put together a method to write an array's content to an excel sheet. No errors or exceptions are popping up, but the data isn't showing up in the excel sheet as expec ...

javaexcelselenium-webdriverapache-poi

Is there a way to determine the size of an array without having to make another function call?

In the code snippet below, there are two classes: the main class and class1. The class1 contains a function called foo1() which iterates over an ArrayList<> and is called once in the main class. After calling this function, the size of the array is r ...

javaarraystime-complexityspace-complexity

contrasting the application of logic in Rails controllers versus JavaScript within the .js.erb files

When dealing with a large "data" active record object that needs to be filtered based on user interactions on a page, the question arises about where to place the data-filtering logic. Currently, the filtering is done in the rails controller action, simpli ...

javascriptruby-on-railsajaxjquery

It appears that the :first / :first-child selector is not functioning properly with Selenium 2

During my transition from Selenium 1 to Selenium 2, I encountered an issue. The structure I currently have is similar to the following: <ul id="documentType"> <li><a href="http://somelink.com">first</a></li> <li& ...

javaseleniumcss-selectors

Traversing a defined axis in Cython

Currently, I am delving into the realm of Cython and have made some modifications to the code found in a tutorial on numerical differentiation: import numpy as np cimport numpy as np import cython np.import_array() def test3(a, int order=2, int axis=-1): ...

pythonnumpypointersiteratorcython

How can we wrap the Vuex store within a Vue plugin's install function?

I developed a plugin that utilizes Vuex for state management. // plugin.js import Vuex from "vuex"; import store from "./store.js"; export default { install(Vue, options) { const storeInstance = new Vuex.Store(store); Vue.pr ...

javascriptvue.jsvuejs2vue-componentvuex

Encountering a Vue syntax error following the binding of a session variable

Encountering a syntax error while attempting to bind a session variable as a prop of my Vue component. Scrutinizing my code did not reveal any mistakes, but perhaps another set of eyes may catch something. This is where I have registered my components: V ...

javascriptlaravelvue.jsvuejs2

Using jQuery, how can you make fixed elements fade as the page scrolls?

How can I make a fixed element, such as a corner ad or notice, fade when the page is scrolled down to a certain point? What would be the most effective method for determining this point: using pixels, percentage, or another way? And how can I implement th ...

javascriptjqueryscrollfade

Utilize selenium IDE to retrieve a specific portion of text and save it as a variable

I am trying to figure out how to extract the number 694575 from a text using Selenium Ide and store it in a variable for future use. Here is the text I am working with: <div class="loginBoxTitle">Edit Exhibition Centre - 694575, Exhibition Center1&l ...

javascriptseleniumselenium-ide

Is there a way to keep the input field data in my form in next js persist even after the page refreshes?

I am currently developing a form in Next.js and I need the data to persist even after the page is refreshed or reloaded. Unfortunately, local storage does not work with Next.js, so I am exploring other alternatives. Every time I try to use local storage, ...

javascriptreactjsformsnext.js

Displaying and Concealing Divisions

My journey to showing/hiding divs began with piecing together a series of questions: $(document).ready(function(){ $('.box').hide(); $('#categories').onMouseOver(function() { $('.box').hide(); $('#div' + ...

javascriptjquery