javascript - How to pass id to a modal within same page using GET method? - Stack Overflow

admin管理员组

文章数量:1410697

I have a following link:

<a type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" href="?id='.$row['uping_event_id'].'">
                                    <i class="fa fa-search"></i> Read more</a>

The read more looks like this:

When I press the read more button, a modal will pop up like this:

I tried the following code but it's not working:

<div class="modal fade product_view" id="product_view">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" data-dismiss="modal" class="class pull-right"><span
                            class="glyphicon glyphicon-remove"></span></a>
                <h3 class="modal-title">I want to show the event id here <?php echo $_GET['id']; ?></h3>
            </div>

            </div>
        </div>
    </div>
</div>
</div>

How to solve this? Or is there any better way to do this? I have to show the id into the modal, not on another page. Any help will be appreciated. Thanks in advance.

I have a following link:

<a type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" href="?id='.$row['uping_event_id'].'">
                                    <i class="fa fa-search"></i> Read more</a>

The read more looks like this:

When I press the read more button, a modal will pop up like this:

I tried the following code but it's not working:

<div class="modal fade product_view" id="product_view">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" data-dismiss="modal" class="class pull-right"><span
                            class="glyphicon glyphicon-remove"></span></a>
                <h3 class="modal-title">I want to show the event id here <?php echo $_GET['id']; ?></h3>
            </div>

            </div>
        </div>
    </div>
</div>
</div>

How to solve this? Or is there any better way to do this? I have to show the id into the modal, not on another page. Any help will be appreciated. Thanks in advance.

• javascript
• php
• mysql
• get
• modal-dialog

Share Improve this question Follow edited Apr 21, 2018 at 12:00 Samuel Liew 79.2k111111 gold badges169169 silver badges304304 bronze badges asked Apr 9, 2018 at 7:01 Optimized FaisalOptimized Faisal 4722 silver badges1212 bronze badges 5

• What do you want to solve? – Nagaraju Commented Apr 9, 2018 at 7:04
• When I press the read more button, I have to fetch the related data from database and show that into the modal. Thats why I am targeting with uping_event_id. #Nagaraju – Optimized Faisal Commented Apr 9, 2018 at 7:07
• I probably wouldn't use the href attribute to pass the ID. I feel that implies the button will take the user to a new page. I'd suggest using a data attribute e.g. data-event-id="<?php echo $event_id; ?>" then accessing the ID within the javascript that opens the modal. However I can't fully answer the question as I don't know if you are able to change the code that opens the modal. I presume this is javascript that controls that. – Andrew Chart Commented Apr 9, 2018 at 7:07
• 1 I guess you are using bootstrap, if so refer this getbootstrap./docs/4.0/ponents/modal/… – gvmani Commented Apr 9, 2018 at 7:07
• As the modal is in the same page and I have to send the data to that modal, I used href="?id=something" . #C2486 – Optimized Faisal Commented Apr 9, 2018 at 7:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

PHP code execute first, so you can't set PHP value for $_GET dynamically. Use a javascript function.

function setEventId(event_id){
    document.querySelector("#event_id").innerHTML = event_id;
}

Call setEventId() function from anchor tag

<a type="button" onclick="setEventId(<?= $row['uping_event_id'] ?>)" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" href="javascript:void(0)">
                                    <i class="fa fa-search"></i> Read more</a>

And use <span id="event_id"></span> to replace html value with event_id

<div class="modal fade product_view" id="product_view">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" data-dismiss="modal" class="class pull-right"><span
                            class="glyphicon glyphicon-remove"></span></a>
                <h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
            </div>

            </div>
        </div>
    </div>
</div>
</div>

Here is demo example after getting value of $row['uping_event_id'] or page load.

function setEventId(event_id){
    document.querySelector("#event_id").innerHTML = event_id;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css">
<a type="button" onclick="setEventId(1)" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" href="javascript:void(0)">
                                    <i class="fa fa-search"></i> Read more</a>
                                    
<a type="button" onclick="setEventId(2)" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" href="javascript:void(0)">
                                    <i class="fa fa-search"></i> Read more</a>
                                    
                                    
<a type="button" onclick="setEventId(3)" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" href="javascript:void(0)">
                                    <i class="fa fa-search"></i> Read more</a>
                                    
<div class="modal fade product_view" id="product_view">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="#" data-dismiss="modal" class="class pull-right"><span
                            class="glyphicon glyphicon-remove"></span></a>
                <h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
            </div>

            </div>
        </div>
    </div>

On your button add a data attribute containing your id, like this :

<a type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#product_view" data-id="'.$row['uping_event_id'].'" href="?id='.$row['uping_event_id'].'">
                                    <i class="fa fa-search"></i> Read more</a>

Then in JS you need no write an event listener function automatically called when your modal is open. for your need this function seems like :

$('#product_view').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) 
  var id = button.data('id') 

  var modal = $(this)
  modal.find('.modal-title').text('I want to show the event id here ' + id)
})

See official documentation here

What you can do is to use html data attribute on your tag. let's say :

<a href="#openModal_edit" data-idValue="<?= $row['uping_event_id'] ?>" ...</a>

Then you need to create onclick event handler, maybe on your modal button to extract your data attribute :

onclick="myId=this.dataset.idValue;document.querySelector('#THE_HTMLID_THAT_YOUWANT_DISPLAY_IDVALUE').value = myId;return true;"

and make sure in querySelector you add the element id that you want show the value on it.

本文标签： javascriptHow to pass id to a modal within same page using GET methodStack Overflow