johram pong johram pong - 1 month ago 16
Javascript Question

display a hidden input field when enter value on a particuloar input filed

anyone could help me out on how i could achieve this with either javascript or jquery maybe to get the following as mentioned below

say i have this field1

<input type="text" name="field1" value="">


and then i have this field2

<input type="hidden" name="field2" value="">


what i mean to say the field2 should be hidden but if someone enters some value in field1 then field2 shows but if no value on field1 then it disappears?

thanks in advance and appreciate your time and help

Answer

You'd get the first field, check if it has a value, and toggle the second field based on that, but you should not be using a hidden input, but instead hide it with CSS

$('[name="field1"]').on('input', function() {
    var el = $('[name="field2"]').toggle( this.value !== "" );

    if (this.value === "") el.val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="field1" value="" placeholder="type something">
<br><br>
<input type="text" name="field2" value="" style="display:none">