Passing button data to modal form

Question

i came up from this link Passing data to a bootstrap modal but yet still after hours, I cant find my way to do it on my own. I want to get the id of the button (let say i will do this via jsp) this is the button

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg" data-id="p_id">Launch demo modal</a>

and here is the modal

                    <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-hidden="true">&times;</button>
                                    <h4 class="modal-title">Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    <input type="text" name="p_id" id="p_id" value=""/>
                                    <hr>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->

With this <script> just above the button

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

The ID should be display in the <input type="text" name="p_id" id="p_id" value=""/> I almost spend my whole night figuring this out.

score 1 · Answer 1 · answered Mar 18 '16 at 16:12

1

Your selector in the script is wrong. Try this

$(document).on("click", "a[href='#myModal']", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #p_id").val( myBookId );
});

The problem was with this "#myModal" you were trying to trigger a click event of a element with id = "myModal" But in your case its the href value of the a tag and not the id. So I have changed the script to say a[href='#myModal']

answered Mar 18 '16 at 16:12

Rajshekar Reddy

18,647
3
40
59

Put a alert inside the click event and see if it fires. If it does and your input value is still empty that means there another instance of #p_id in your page.. It's must be unique.. Have a check – Rajshekar Reddy Mar 18 '16 at 17:27

score 1 · Answer 2 · answered Mar 18 '16 at 20:13

Everything is OK except that you are using wrong selector. You are using '#myModal which is not the id for button you have. Use a[href='#myModal'] instead.

Change your code to:

$(document).on("click", "a[href='#myModal']", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #p_id").val( myBookId );
});

score 0 · Answer 3 · answered Mar 18 '16 at 16:08

Give the link an id and then reference the link being clicked like so:

<a data-toggle="modal" href="#myModal" id="myButton" class="btn btn-primary btn-lg" data-id="p_id">Launch demo modal</a>

<script>
$(document).on('click','#myButton',function(){
    var myBookId = $(this).data('id);

    $('#p_id').val = myBookId;
});
</script>

Passing button data to modal form

3 Answers3