兄弟姐妹麻烦

Question

I'm trying to grab the value of sibling input fields in a form. The goal is to compare two date fields; the field that just changed and the other date field in that form. Each of the date fields is class "adate". I can get the value of teh current field but when I try to grab the other field in the sibling set, I get 'undefined' instead of the value of the field. Here's the javascript code:

    $(".adate").change(function(){


        var name = $(this).attr("name");

        if (name == 'start') {

            var start = new Date($(this).val());
            var end = new Date($(this).siblings('[name="end"]').val());

        } else {

            var end = new Date($(this).val());
            var sibs = $(this).siblings('.adate');

            var start = new Date(sibs.eq(0).val());
        }

        if(end < start) alert("The end date must be after the start date.");

    });

Here's the html:

<div class='jumbotron'>
    <table>
        <tr><td>Type</td><td>Start Date</td><td>End Date</td><td>By</td><td></td><td></td></tr><form action="manage.php" method="post">
            <tr>
                <td ><select name="type"  class="form-control" style="width:auto;"><option value="hunt" selected >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td><td><input type="date" name="start" value="2015-12-07" class="form-control adate" /></td>
                <td><input type="date" name="end" value="2015-12-09" class="form-control adate" /></td>
                <td><input type="text" name="uid" value="phil" class="form-control" readonly style="width:80px;" /></td>
                <td><input type="hidden" name="id" value="1" /><button class="btn btn-sm btn-primary btn-block" type="submit">Save</button></td></form>
                <td><form action="manage.php" method="post"><input type="hidden" name="id" value="1" /><input type="hidden" name="delete" value="delete" /><button class="btn btn-sm btn-primary btn-block" type="submit" style="background-color:red; " >Del</button></form></td>
            </tr><form action="manage.php" method="post">
            <tr>
                <td><select name="type"  class="form-control" style="width:auto;"><option value="hunt" >hunt</option><option value="closed" >closed</option><option value="snow" >snow</option></select></td>
                <td><input type="date" name="start"  class="form-control adate" value="2015-11-17" /></td>
                <td><input type="date" name="end"   class="form-control adate" /></td>
                <td><input type="text" name="uid" value="phil"  class="form-control"  style="width:80px;" readonly/></td>
                <td><button class="btn btn-sm btn-primary btn-block" type="submit">Add</button></form>
            </tr>
      </table>
</div>

What am I doing wrong??

Answer 1

Here is one way of doing it, assuming that you have only two distinctly named input fields. The advantage here is that the elements are picked out whether or not they are siblings.

 $(".adate").change(function() { var theRow = $(this).parents("tr"); /* theTag is for demo only, shows that the right row is picked out */ var theTag = theRow.attr('class'); alert(theTag); var theStartDate = new Date($(theRow).find(".adate[name='startDate']").val()); var theEndDate = new Date($(theRow).find(".adate[name='endDate']").val()); if (theEndDate < theStartDate) { alert("The end date must be after the start date."); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <tr class="row1"> <td> <input class="adate" type="text" name="startDate" value="2015-10-10"> </td> <td> <input class="adate" type="text" name="endDate" value="2015-10-10"> </td> </tr> <tr class="row2"> <td> <input class="adate" type="text" name="startDate" value="2015-10-10"> </td> <td> <input class="adate" type="text" name="endDate" value="2015-10-10"> </td> </tr> </table>