Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Data attributes html code

Data attributes html code

Data attributes html code

I have this html code:
<a data-id="test" title ="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a> which opens a modal and passes data is passed from the parent to th modal. It works fine but I need the data passed to be the input from a textbox.

The script:
$(document).on("click", ".open-AddBookDialog", function (e) {
var _self = $(this);
var myBookId = _self.data('id');

It takes the value of data-id and displays on my modal.
I need to make data-id receive a variable or an input from a text box.

RE: Data attributes html code


 <input type="text" name="myText" id="myText"/>
 <button id="myText_save">Save</button>
$('#myText_save').on('click', function(e){
  $('someReference').data('id', $('#myText').val());

if you need to do it inside the modal then:
1. store the calling element in a variable somewhere
2. interrupt the modal dialog's close event and write the value of the text box to the data-id attribute of the calling element (that is stored in the variable).

RE: Data attributes html code

here is what I have but can't seem to get to work.
$(function() {
$('#btnLaunch').click(function() {
var myBookId = $(this).data('id' $('#myText').val());


myText is the input box on my parent. appttext is the text box on my modal.
I wan to pass the data from myText to appttext

RE: Data attributes html code

the format of the command is


//to set a data attribute
$('#myElement').data('dataAttribute', 'dataValue');
//to retrieve a data attribute
var d = $('#myElement').data('dataAttribute'); 

so (still guessing at what you are trying to achieve) ...


 $('#btnLaunch').on('click', function(e){
   $(this).data('id', $('#myText').val()); //assigns content of myText to the data-id attribute of the button
   $('#myModal .appttext').data('myBookId', $('#myText'.val()); //assigns content of myText to the data-id attribute of all elements with a class of appttext as a ancestor of the element with an id of myModal

note that this does not lock the two values together. it merely duplicates/copies the values at a point in time. If you want the reverse logic also to happen then you must either attach an onchange event to the .appttext elements or interrupt the dialog close routine with a callback.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close