Menu
I am getting as undefined value for alert(grp);, not sure what went wrong.
Below there are actually 2 forms and in each form having input hidden tag. So as soon as I click 'Remove' button, I am trying to retreive input hidden value of that form.
Below is the code:
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function () {
var uids = [];
$('table[id^="example"]').each(function () {
var tableId = '#' + this.id;
$(tableId + ' tfoot th').each(function () {
var title = $(tableId + ' thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $(tableId).DataTable({
"paging": true
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
that
.search(this.value)
.draw();
});
});
$(this).on('click', '.remove', function (e) {
var grp = $('form input:hidden[name=group]').val();
alert(grp);
});
});
});
</script>
HTML
<body>
<form>
<input type= hidden name= group value="group1">
<table id="example1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>$320,800</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>$433,060</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>$103,600</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>$342,000</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>$217,500</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>$92,575</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>$324,050</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>$75,650</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>$183,000</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
</tbody>
</table>
</form>
<form>
<input type= hidden name= group value="group2">
<table id="example2" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>$90,560</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>$313,500</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>$385,750</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>$198,500</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>$132,000</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>$1,200,000</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>$114,500</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>$145,000</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>$136,200</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>$163,500</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>$356,250</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>$103,500</td>
<td>
<button type="button" class="btn btn-primary btn-details remove">Remove</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
972
demo: http://jsfiddle.net/swm53ran/335/
$(document).ready(function() {
$(document).on('click', '.remove', function() {
alert($(this).closest('form').find('input[type=hidden]').val());
});
});
You should use each for get two value from element
$('form input:hidden[name=group]').each(function(){
$( this ).val();
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
