填写前一个跨度的输入时显示下一个跨度

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");
});