Form validation - won't hide DIV which contains two empy inputs

Form validation - won't hide DIV which contains two empy inputs

Hi all,

Thanks to those who helped me out with using .submit() in my last post, this place is great when I get to the point of staring into the abyss thinking there's no solution in sight.

I've spent the last 2 hours on another problem which I hope you can help with, probably very simple but reading the code, this should do what I want, but it doesn't.

I have 10x rows of text inputs - each row contains 2x text inputs. I call each row a "pair" (pair of text inputs). I know I didn't need to use the class "pair" but did so for clarity.

  1. <div class="pair">
    <input type="text" name="ID[]" maxlength="20" />
    <input type="text" name="Title[]" maxlength="175" />
    </div>


  2. ...repeated 9x more times...
  3. <span class="progress1"></span><br />
    <span class="progress2"></span><br />


On submission, I want to remove each pair of text inputs if they are both empty, but keep a pair of inputs visible if at least one (or both) of the inputs in that pair has a value.

I thought it sounded simple but apparently not!

This code removes all the div.pairs even if I enter a value in one of the text inputs:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function($) {

    $('[name="myForm"]').submit(function(event) {

        $('.pair').each(function() {
       
            if  (($('input:eq(0)').val().length == 0) && ($('input:eq(1)').val().length == 0)) {
                $(this).parent().remove();
                $('.progress1').text('Empty pairs removed.');
                $('.progress2').text('Pairs where either field is populated: retained - if any.');
                event.preventDefault();
            }

        });

    });

    });
    </script>



















I'm at a loss, are my failures obvious?