$(this).val() does not return value of value-tag
Question
I am trying to get the value -attribute of my <a> -tag, which is in the below example 999 . See my minimum viable example below:
<!DOCTYPE html> <html> <head> <title>Jquery Modal</title> </head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script> $(document).ready(function() { //display modal form for product EDIT *************************** $(document).on('click', '.open_modal', function() { var cryptos_id = $(this).val(); console.log("cryptos_id: " + cryptos_id) }); }); </script> <body> <div> <tr> <a id="coo99" value="999" class="open_modal" data-target="#myModal"> <sup> EDIT</sup> </a> </tr> </div> <!-- MODAL SECTION --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">Edit</h4> </div> <div class="modal-body"> <form id="frmProducts" name="frmProducts" class="form-horizontal" novalidate=""> <div class="form-group error"> <label for="inputName" class="col-sm-3 control-label">Name: </label> <div class="col-sm-9"> <input type="text" class="form-control has-error" id="name" name="name" placeholder="Country of Origin" value=""> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="btn-save" value="update">Edit Entry</button> <input type="hidden" id="product_id" name="product_id" value="101"> </div> </div> </div> </div> </body> </html>
When you press the EDIT button crypto_id returns currently nothing, however I would like to get the value - attribute - 999 - of my a -tag back.
Any suggestion what I am doing wrong?
2 answers
solution1
4 ACCPTED 2017-12-29 18:53:56
Values only pertain to form field elements. You'd need to use a data attribute instead:
$(document).on('click', '.open_modal', function() { var cryptos_id = $(this).data('value'); console.log("cryptos_id: " + cryptos_id) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="coo99" class="open_modal" href="#" data-value="999" data-target="#myModal">Open Modal</a>
solution2
2 2017-12-29 18:54:35
You're looking at the wrong thing.
$(this).val() won't give you what you're after, you need to use something like $(this).attr("value") instead. This will grab any content defined in the attribute "value".
( .val() is mainly used in forms, ie with input entities).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.