CODEWITHSUNDEEP
jquerymodal-dialog
nubteens
nubteens

Reputation: 6158

Passing a value to modal

I have a <table> and under one its <td>, I am printing a different value and there is also a button on each <td>. Upon clicking the button, I want to pass the value to the modal. Here's what I got so far:

HTML:

<a data-toggle="modal" data-id="123" href="room.html#myModal">
    Check in
</a>
<div class="modal hide" id="myModal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        Room Number: <a name="roomnumber" id="roomnumber"></a>
    </div>
</div>

Javascript:

$(document).on("click", ".modal", function () {
    var roomNumber = $(this).data('id');
    $(".modal-body #roomnumber").val(roomNumber);
});

Fiddle.

Upvotes: 0

Views: 3856

Answers (1)

roshan
roshan

Reputation: 2510

You are attaching click event on .modal which you have not given for check in. And to display data in anchor tag you can use .text()

<a data-toggle="modal" class="clickThis" data-id="123" href="room.html#myModal">
    Check in
</a>

and your js code:

$(document).on("click", ".clickThis", function () {
    var roomNumber = $(this).data('id');

    $(".modal-body #roomnumber").text(roomNumber);
});

demo

Upvotes: 2

Related Questions