display next span when filling in input of previous span

Question

I have 2 input fields in each span. when the first span of the row is filled with some date, the next span should be visible.

<span name="datalist_2field" class="display_inline xyz">
    <input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
    <input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
</span>
<?PHP
for ($i=1; $i<=10; $i++)
{
    ?>
    <span name="datalist_2field" class="display_none xyz">
        <input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
        <input type="text" class="datalist_2row_right" name="inputfield_evmpd" value=""></input>
    </span>
    <?PHP
}
?>

jQuery:

$('input[name="inputfield_smpc"]').keyup(function(){
     $(span.xyz).next().removeClass('display_none');
     $(span.xyz).next().addClass("display_inline");
});

Unfortunately it doesn't work. What's wrong? Thanks!

Answer 1

I'd recommend the change() event instead of keyup(). The reason you shouldn't use keyup() is because if a user inputs a value using autofill, it will not fire keyup(). However, autofill does fire the change() event, and your verification script will run, and the input will be verified.

As for why it isn't working, you have

.removeClass('display_none')

but the item you're trying to select doesn't have a class name called 'display_none'

if your trying to change the css without using another class you can use something like this

.css("display", "block");

Answer 2

display_none need to be added to second input instead of the span based on your requirement.

Code sample for your first span: HTML

<span name="datalist_2field" class="display_inline xyz">
<input type="text" class="datalist_2row_left" name="inputfield_smpc" value=""></input>
<input type="text" class="datalist_2row_right display_none" name="inputfield_evmpd" value=""></input>
</span>

jQuery

 $('input[name="inputfield_smpc"]').keyup(function(){
   $(this).next().removeClass('display_none');
   $(this).next().addClass("display_inline");
});