I have seen this asked before but a lot of the answers I found where people looking to get a variable into a modal to query a database. However thats not what I want. I just want to send a variable into s modal.

Here is my button the activated the bootstrap modal

<button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModalNorm" data-id="<?php echo "$issueid";?>">Add New Followup</a>

Then I have a modal code as below. I want the value from data-id to show in the text box named caseid

    <!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title

            <!-- Modal Body -->
            <div class="modal-body">
                <form role="form" method="POST" action="./view_customer?cid=<?php echo "$cid";?>">
                  <input type="text" id="casenoteid" name="caseid" />
                  <div class="form-group">
                    <label for="exampleInputEmail1">The Issue</label>
                      <input type="text" class="form-control" name="issuenote" id="issuenote"/>
                  <input type="submit" class="btn btn-default" value="SAVE NOTE" name="savenote">


            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                <button type="button" class="btn btn-primary">
                    Save changes

then I have the jquery

             $('#myModal').on('show.bs.modal', function (e) {
                   var rowid = $(e.relatedTarget).data('casenoteid');

1 Answer 1


This should do:

var $j = jQuery.noConflict(); // you didn't mention any conflicts, though, this would probably be the next issue since you most likely will conflict with the prototype lib

  $j('button[data-toggle="modal"]').click('show.bs.modal', function (e) { // or simply give your button an id to refer to it, i.e. $j('#theButtonId')
    var rowid = $j(this).data('id'); // get the value - .data('id') for " data-id='' ", .data('target') for " data-target='' "
    $j("#casenoteid").val(rowid); // set the value

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.