javascript - how to pass multiple data- id in a modal body - Stack Overflow

admin管理员组

文章数量:1401438

Suppose I have multiple order id

$order_id='12345566778';
$prod_id='126778899';
$sell_id='373462562363';

While I select particular orderid I want it to pass in php variable which is under the modal body of popup let me know how to do it I am struggling with this

<a rel="dialog" data-toggle="modal" data-id="<?=$order_id?>" href="#mymodal" data-target="#myModal" >
    <?php echo "<br> $order_id </br>";?>
</a>

<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>

                <table class="table table-hover table-bordered" >
                    <tr style=" background-color:#00AAAD; color:#FFF; ">
                        <div class="modal-body">

                            i want to get that order id under php variable which i select           
                            here i want to display the data
                        </div>
                    </tr>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

Suppose I have multiple order id

$order_id='12345566778';
$prod_id='126778899';
$sell_id='373462562363';

While I select particular orderid I want it to pass in php variable which is under the modal body of popup let me know how to do it I am struggling with this

<a rel="dialog" data-toggle="modal" data-id="<?=$order_id?>" href="#mymodal" data-target="#myModal" >
    <?php echo "<br> $order_id </br>";?>
</a>

<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>

                <table class="table table-hover table-bordered" >
                    <tr style=" background-color:#00AAAD; color:#FFF; ">
                        <div class="modal-body">

                            i want to get that order id under php variable which i select           
                            here i want to display the data
                        </div>
                    </tr>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

• javascript
• php
• jquery
• html
• ajax

Share Improve this question Follow edited Apr 29, 2017 at 12:50 Bertrand Martel 45.6k1717 gold badges150150 silver badges168168 bronze badges asked Apr 27, 2017 at 7:04 user7356795user7356795 6

• help me out with this i am struggling – user7356795 Commented Apr 27, 2017 at 7:05
• You do not know php i see. Javascript is Client Side and ok, php is server side and is a scripting language, when you see your Page php as already stopped to run. To achieve what you want you need to make an Ajax call to another php page or submitting a form or changing the page using a Get variable. – Goikiu Commented Apr 27, 2017 at 7:07
• You can't as PHP runs at server and popups are in the browser way later. – Jai Commented Apr 27, 2017 at 7:07
• you can fetch data-id using javascript and display in model – Ahmed Ginani Commented Apr 27, 2017 at 7:09
• how can i do it – user7356795 Commented Apr 27, 2017 at 7:10

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

You can use jQuery.data() method to do this. Try this way:

HTML code

<a class="open-my-modal" rel="dialog" data-toggle="modal" data-id="<?=$order_id?>" data-prod-id="<?=$prod_id?>" data-sell-id="<?=$sell_id?>" href="#mymodal" data-target="#myModal" >
    <?php echo "<br> $order_id </br>";?>
</a>

<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>

                <table class="table table-hover table-bordered" >
                    <tr style=" background-color:#00AAAD; color:#FFF; ">
                        <div class="modal-body">

                            <div id='order-id'></div>
                            <div id='prod-id'></div>
                            <div id='sell-id'></div>
                        </div>
                    </tr>
                </table>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

jQuery Code

$(document).ready(function () {             
    $('.open-my-modal').click(function(){
        $('#order-id').html($(this).data('id'));
        $('#prod-id').html($(this).data('prod-id'));
        $('#sell-id').html($(this).data('sell-id'));

         // show Modal
         $('#myModal').modal('show');
    });
});

Theres a way you can do this.. The ways is really simple just use variable passing using get or post method. in action tag put the address of the current page.

<form action='your_current_page' method='post'>
  <select name='id' id='order_id'>
    <option value='12345566778'>12345566778</option>
    <option value='126778899'>126778899</option>
    <option value='373462562363'>373462562363</option>
   </select>
<?php
  $order_id=$_POST['id']; # id is you name attribute in select tag
?>

this is how you going to pass variables from html to php... hope this solves the problem..

本文标签： javascripthow to pass multiple data id in a modal bodyStack Overflow