Pedro Pedro - 1 month ago 9
jQuery Question

show textbox if previous is not empty

i have a form with 5 textbox and i want to show the next textbox unless the previous isnt empty.

something like this:

<form>
<input id="input1" name="input1" type="text" value="some text">
<br />
<!-- show -->
<input id="input2" name="input2" type="text" value="">
<br />
<!-- hide -->
<input id="input3" name="input3" type="text" value="">
<br />
<!-- hide -->
<input id="input4" name="input4" type="text" value="">
<br />
<!-- hide -->
<input id="input5" name="input5" type="text" value="">
</form>

Answer Source

May be this can solve your problem

$(document).ready(function() {
    $('#input3,#input4,#input5').hide();
    $('#input1,#input2,#input3,#input4,#input5').keyup(function(e) {
        var el = $(this);
        var code = e.keyCode || e.which;
        if (code == '9') {
            // Ignore Tab key
            return;
        }
        if (el.val() != '') {
            el.next().next().show();
        } else {

            if (el.attr('id') != 'input1') { // do not hide input 1            
                el.hide();
            }
            el.next().next().hide();
        }
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
    <input id="input1" name="input1" type="text" value="some text">
    <br />
    <!-- show -->
    <input id="input2" name="input2" type="text" value="">
    <br />
    <!-- hide -->
    <input id="input3" name="input3" type="text" value="">
    <br />
    <!-- hide -->
    <input id="input4" name="input4" type="text" value="">
    <br />
    <!-- hide -->
    <input id="input5" name="input5" type="text" value="">
</form>