Question

I’m wondering if a jQuery or JS library exists that does the following:

Based on what a user inputs in A01, check that value, and if that value is equal to ‘x’, make A01_1 visible. If not, do nothing.

<form id="survey">
    <fieldset>
            <label for="A01">A01</label>
            <input type="number" name="A01" id="A01" min="0" max="5" >

            <label for="A01_1">A01_1</label>
            <input type="text" name="A01_1" id="A01_1" >

I guess I’m looking for some sort of inline validation function that will make another element visible if it matches a specific input. I need to apply this in a number of different places so I want to make it a reusable function.

My JS skills are limited so any help (where to start etc.) is greatly appreciated.

Answer 1

$('input[name=A01]').on('keyup', function() {

   var val = $.trim( this.value ),
       x = 'your_custom_value',
       id = this.id,
       target = $('label[for='+ id +'_1], input[name='+ id +'_1]');

   target.hide();

   if( val == x) {
     target.show();
   }
});

For reuse you can change you markup like:

<form id="survey">
    <fieldset>
            <label for="A01">A01</label>
            <input type="number" name="A01" id="A01" min="0" max="5" class="myinput">

            <label for="A01_1">A01_1</label>
            <input type="text" name="A01_1" id="A01_1" >

            <label for="A02">A02</label>
            <input type="number" name="A02" id="A02" min="0" max="5" class="myinput">

            <label for="A02_1">A02_1</label>
            <input type="text" name="A02_1" id="A02_1" >
     </fieldset>
</form>

And change jQuery like:

$('input.myinput').on('keyup', function() {

   var val = $.trim( this.value ),
       x = 'your_custom_value',
       id = this.id,
       target = $('label[for^='+ id +'_], input[name='+ id +'_]');

   target.hide();

   if( val == x) {
     target.show();
   }
});