All geek questions in one place

Jquery input hidden value fails

I get an undefined value for warning (grp) ;, not sure what went wrong.

There are actually 2 forms below and each form has an input hidden tag. Therefore, as soon as I click the "Delete" button, I try to restore the hidden input value of this 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>
+5
source share
4 answers

demo: http://jsfiddle.net/swm53ran/335/

 $(document).ready(function() { $(document).on('click', '.remove', function() { alert($(this).closest('form').find('input[type=hidden]').val()); }); });
+1
source

You must use each to get two values ​​from an element.

 $('form input:hidden[name=group]').each(function(){ $( this ).val(); })
+1
source

use this line
var grp=(this).parents('form').find('input:hidden[name=group]').val();
instead of var grp = $('form input:hidden[name=group]').val();

 $(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 }); $(this).on('click', '.remove', function(e) { var grp = $(this).parents('form').find('input:hidden[name=group]').val(); alert(grp); }); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css"> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script> <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>

Note: removed the table.columns JS code, since this is a separate plugin, I did not get JS

+1
source

Remove the space before the attribute and assign the type and name assignment:

 <input type= hidden name= group value="group1">

it should be:

 <input type="hidden" name="group" value="group1">

Demo: http://jsfiddle.net/Lq9xvsgp/

0
source

Source: https://habr.com/ru/post/1232201/

More articles:


All Articles