How can i show hidden input fields

Question

I have a question.

When I have form with lets say about 100 hidden input fields, how can I show them one by one after I press enter in the last shown input field?

Hi there, could you perhaps point to a Codepen or other live sample? — schalkneethling, May 29 '22 at 18:52
What do you mean by "one by one?" Do you want a delay between each? How long a delay? What do you mean by "show?" Do you mean change them from `type="hidden"` to `type="text"`, or something else? It would help if you were to [edit your question](https://stackoverflow.com/posts/72426362/edit) to show a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the HTML you are talking about. — kmoser, May 29 '22 at 19:45
When you press enter in the last input field I want to change the type of the next field from hidden to text — Николай Иванов, May 29 '22 at 19:47
How can there be a next field if you are already in the last field? — kmoser, May 29 '22 at 19:49
I will need maybe not more than 20 input fields but I will add 50 or 100 hidden input fields, so I can't reach the last field — Николай Иванов, May 29 '22 at 19:52

kmoser · Accepted Answer · 2022-05-29T20:31:36.760

This adds a key handler to each type="text" field. The key handler tests whether the field is the last type="text" field, and if the key was the Enter key. If so, it finds the next type="hidden" field, sets its type to "text", and adds the handler to it.

function callback(e){
    if (
        // If it's the last text field
        $(this).index() == $('#demo input[type="text"]').length - 1
            &&
        // And the key pressed is Enter:
        e.which == 13
    ) {
        // Find next hidden field, change it to text, and add the key handler:
        $(this).next('input[type="hidden"]').prop("type", "text").keypress(callback)
    }
}

// Add key handler to all text fields:
$('#demo input[type="text"]').keypress(callback)

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<div id="demo">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="hidden" value="hidden1">
    <input type="hidden" value="hidden2">
    <input type="hidden" value="hidden3">
</div>

References:

jQuery: how do I check if an element is the last sibling?

How can I detect pressing Enter on the keyboard using jQuery?

How can i show hidden input fields

1 Answers1