How do I get the ID of a data inside a modal and then pass it to ajax?

Question

I'm currently working on a system that has a CREATE EVENT module. Now this CREATE EVENT module allows a user to create events and display it on their profile, and other users can join their event. I used a modal to view further details of an event posted. In the perspective of the one creating the event, the user can publish an event to this so-called "PAST EVENTS" if the event is finished already. I'm having trouble publishing since I cannot figure out how to pass an ID of an EVENT inside a modal.

This is my modal. I used ajax in retrieving and displaying the data.

<div id="readmore" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="event_title"></h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-6">
                        <img id="event_img">
                        <h6>HOW TO GET THERE</h6>
                    </div>
                    <div class="col-xs-6">
                        <p id="event_description"></p>
                        <h6>WHEN</h6>
                        <p id="event_start"></p>
                        <h6>WHO</h6>
                        <p id="occupation"></p>
                        <h6>WHAT TO BRING</h6>
                        <p id="event_material_req"></p>
                    </div>
                </div> 
            </div>
            <div class="modal-footer">
                <a class="btn btn-danger" data-dismiss="modal" onclick="publishToPast()">Publish to Past Activity</a>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Now what I want is when this <a class="btn btn-danger" data-dismiss="modal" onclick="publishToPast()">Publish to Past Activity</a> will be clicked, it will get the ID of the data in the modal and then update the STATUS of the EVENT on the Database so it can now be displayed on the PAST EVENTS. I was thinking getting it through PHP (through $_SESSION) but I cannot do so, because the modal depends on the number of EVENTS the user will create.

Answer 1

You have not mention but i guess that you are using an Ajax call to get and show event data in this modal. In this case, the way you are showing data of WHEN , WHO , WHAT TO BRING etc. You can add one hidden input field in this modal with some unique id like below and insert event id in that input field.

<input type="hidden" name="event_id" id="event_id" value="">

Now in your publishToPast() function write below code.

var eventId = $("event_id").val();

Now you have event id in eventId variable. Use it wherever you want.

Remember to remove event id from that input when modal close.

Answer 2

如果仅在onclick函数中显示模态时具有ID， onclick="publishToPast(herePassIDvalue)"