Getting hidden input using next and parent in Jquery

Question

I'm having a problems retriving values from two input boxes, using the parent(). and next() functions. . In my head this should work! can anyone see what i'm missing?

Thanks.

I have this HTML

<tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
</tr> 
<input class="hidden" value="<?= $value[1] ?>">
<input class="hidden" value="<?= $value[0]->user_id ?>">

And this JQUERY

 $('.content').on('click', '.deleteME', function() {
    var class_id = $(this).parent().parent().next().val();
    var user_id = $(this).parent().parent().next().next().val();

    $.ajax({
        type: "POST",
        url: (my_ajax_script.ajaxurl),
        data: ({action: 'delete_student_from_class', class_id: class_id, student_id: user_id}),
        success: function(msg) {
            alert("data something" + msg);
        }

    });
});

Answer 1

You should not have html elements in table directly rather you need to put them in some td. The html should be changed. You can add hidden field in the same row in new td after your .deleteME.

Html

tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
<td>
<input class="hidden" value="<?= $value[1] ?>">
<input class="hidden" value="<?= $value[0]->user_id ?>">
</td>
</tr> 

Javascript

var class_id = $(this).closest('tr').find('.hidden:eq(0)').val();
var user_id =  $(this).closest('tr').find('.hidden:eq(1)').val();

Or

var class_id = $(this).parent().next('td').find('.hidden:eq(0)').val();
var user_id =  $(this).parent().next('td').find('.hidden:eq(1)').val();

Answer 2

parent() can get confusing and when your DOM changes it will break your code.

Maybe you could try something like this:

HTML

<tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME data-class="<?= $value[1] ?>" data-user="<?= $value[0]->user_id ?>" "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
</tr> 

JS

$('.content').on('click', '.deleteME', function() {
    var class_id = $(this).data('class');
    var user_id = $(this).data('user');

    $.ajax({
        type: "POST",
        url: (my_ajax_script.ajaxurl),
        data: ({action: 'delete_student_from_class', class_id: class_id, student_id: user_id}),
        success: function(msg) {
            alert("data something" + msg);
        }

    });
});

Reference: jQuery .data()

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object.