Home/ Questions/Q 8675383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T19:56:11+00:00

I have been working on some more complex form where the fields are shown

  • 0

I have been working on some more complex form where the fields are shown depending on some conditions of the values entered within a form.

However, when the form is entered through <Tab> key (<Tab> key->enter value-><Tab> key), it does not go to the newly appeared field, but to the one which was previously visible.

The following is the simplified example. If you write anything to field with number 1, on change event is triggered and the input with value 2 is shown, but not the next to be focused on.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form>
    <input id="input1" value="1" tabindex="1" onchange="$('#input2').show()">
    <input id="input2" value="2" tabindex="2" style="display: none;">
    <input id="input3" value="3" tabindex="3" onchange="$('#input4').show()">
    <input id="input4" value="4" tabindex="4" style="display: none;">
    <input id="input5" value="5" tabindex="5">
    <input id="input6" value="6" tabindex="6">
</form>

Due to its complexity, I would not like to play with direct control of the <Tab> key.
Further, I cannot use the onchange="$('#input2').show();$('#input2').focus()" since the same code is used also in cases when it is not an immediate next element.
Are there any ways to solve this?

Thanks in advance for any comments/suggestions.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    click here for a working solution on jsFiddle.

    i used keypress to make this work.

    in the example, you can tab forward and back through textfields 1, 3, and 5, then change the value of textfield 1 which shows textfield 2; you then can tab to textfield 2, 3, and 5 — and so on.

    i hope i have understood your challenge correctly and that this is helpful. cheers.

    <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("input").live("keypress", function() {
          $(this).next().show()
        })
      })
    </script>

    <style type="text/css">
      .hidden {
        display:none;
      }
    </style>
</head>
<body>
<form>
    <input id="input1" value="1">
    <input id="input2" value="2" class="hidden">
    <input id="input3" value="3">
    <input id="input4" value="4" class="hidden">
    <input id="input5" value="5">
    <input id="input6" value="6" class="hidden">
</form>
</body>
</html>
    • 0