display next span when filling in input of previous span-CodePudding

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" >
    <input type="text"  name="inputfield_smpc" value=""></input>
    <input type="text"  name="inputfield_evmpd" value=""></input>
</span>
<?PHP
for ($i=1; $i<=10; $i  )
{
    ?>
    <span name="datalist_2field" >
        <input type="text"  name="inputfield_smpc" value=""></input>
        <input type="text"  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!

CodePudding user response：

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

CodePudding user response：

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" >
<input type="text"  name="inputfield_smpc" value=""></input>
<input type="text"  name="inputfield_evmpd" value=""></input>
</span>

jQuery

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